ลงทะเบียน
ใกล้กัน ช่วยให้คุณแชร์เรื่องราวต่างๆ กับผู้คนมากมาย

โดย

การเขียน Javascript เชื่อมกับ Google Map API เป็นสิ่งสำคัญที่ควรต้องศึกษาเพื่อใช้คำสั่งที่ Google เตรียมไว้ให้ทำงานได้อย่างถูกต้อง

 

Maps การดึง Latitude และ Longitude จากแผนที่

function getLatLngFromAddress(obj) {
  var geocoder = new google.maps.Geocoder();
  var strLatLng;
  geocoder.geocode({
    'address': obj.kw
		}, function (results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

      var arrLatLng = [];

      var floatLat = results[0].geometry.location.lat().toFixed(6);
      var floatLng = results[0].geometry.location.lng().toFixed(6);
      arrLatLng.push(floatLat);
      arrLatLng.push(floatLng);

      var objData = {
        id: obj.id,
        kw: obj.kw,
        placeid: obj.placeid,
        center: arrLatLng.join(","),
        listtype: obj.listtype
      }

      //goto Map
      Tooktee.linkToLocation(objData);

      //strLatLng = 
      return true;

    } else {
      console.log("getLatLngFromAddress not LatLng");
      return false;
    }
  });

  console.log(strLatLng);
}

 

การใช้ Google API ให้ทำงานตามที่เราต้องการในรูปแบบต่าง ๆ ส่วนใหญ่จะใช้คำสั่งผ่าน Javascript 

// Sets the map on all markers in the array.
function setMapOnAll(map) {
  for (var i = 0; i < markers.length; i++) {
    markers.setMap(map);
  }
}

Removes the markers from the map, but keeps them in the array.

function clearMarkers() {
  setMapOnAll(null);
}

Deletes all markers in the array by removing references to them.

function deleteMarkers() {
  clearMarkers();
  markers = [];
}


Defines the Popup class.

function definePopupClass() {
  Popup = function (position, arrayloc) {
    this.position = position;

    var content = document.createElement("div");
    //ct.setAttribute("id", uid);
    content.setAttribute("data-id", arrayloc.id);
    //ct.setAttribute("data-toggle", "tooltip");
    //ct.setAttribute("title", content);
    content.classList.add("popup-bubble-content");
    var htm = "";
    let nolist = false;
    if (arrayloc.name != "") {
      html = "" + arrayloc.name + "";
      content.innerHTML = html;
      nolist = false;
    } else {
      content.innerHTML = "No listing";
      nolist = true;
    }

    var pixelOffset = document.createElement("div");
    pixelOffset.classList.add("popup-bubble-anchor");
    pixelOffset.appendChild(content);

    this.anchor = document.createElement("div");
    this.anchor.setAttribute("id", "pid-" + arrayloc.id);
    this.anchor.setAttribute("data-id", arrayloc.id);
    this.anchor.classList.add("popup-tip-anchor");
    //this.anchor.appendChild(pixelOffset);
    if (nolist) {
      this.anchor.classList.add("nolist");
    }
    this.anchor.appendChild(content);
    // Optionally stop clicks, etc., from bubbling up to the map.
    this.stopEventPropagation();
  };
  // NOTE: google.maps.OverlayView is only defined once the Maps API has
  // loaded. That is why Popup is defined inside initMap().
  Popup.prototype = Object.create(google.maps.OverlayView.prototype);

  /** Called when the popup is added to the map. */
  Popup.prototype.onAdd = function () {
    this.getPanes().floatPane.appendChild(this.anchor);
  };
}

Called when the popup is removed from the map.

Popup.prototype.onRemove = function () {
  if (this.anchor.parentElement) {
    this.anchor.parentElement.removeChild(this.anchor);
  }
};

Called when the popup needs to draw itself. 

Popup.prototype.draw = function () {
  var divPosition = this.getProjection().fromLatLngToDivPixel(this.position);
  // Hide the popup when it is far out of view.
  var display =
    Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000
      ? "block"
      : "none";

  if (display === "block") {
    this.anchor.style.left = divPosition.x + "px";
    this.anchor.style.top = divPosition.y + "px";
  }
  if (this.anchor.style.display !== display) {
    this.anchor.style.display = display;
  }
};

Stops clicks/drags from bubbling up to the map.

Popup.prototype.stopEventPropagation = function () {
  var anchor = this.anchor;
  anchor.style.cursor = "auto";
  [
    "click",
    "dblclick",
    "contextmenu",
    "wheel",
    "mousedown",
    "touchstart",
    "pointerdown",
  ].forEach(function (event) {
    anchor.addEventListener(event, function (e) {
      e.stopPropagation();
    });
  });
};

 

สั่งให้หมุดหยุดเด้ง

function clearBounce() {
  markersArray.forEach(function (item, index) {
    item.setAnimation(null);
    item.setZIndex(100);
  });
}

สั่งให้หมุดเด้งดึ๋งดึง

function toggleBounce(id) {
  console.log(id);
  markerID[id].setAnimation(google.maps.Animation.BOUNCE);
  markerID[id].setZIndex(101);
}

 

Google Map API เอกสาร

https://developers.google.com/maps/documentation/javascript/examples/map-simple

 

 

คำค้น: คำสั่ง Google Map API ที่ใช้บ่อยสุด
รายงานบทความนี้
Captcha Challenge
ลองรูปภาพใหม่
Type in the verification code above