谷歌地圖 API 開發之添加標記（解析以及補充）

今天又看了下官網，發現官網上有地圖標記的詳細說明。當時竟然眼瞎看不見，還琢磨了很久...#$%^&，必定是項目太急，沒看到(^o^)/~
地址：https://developers.google.com...

添加標記

google.maps.Marker 的構造函數只需傳入一個 MarkerOptions 對象字面量，用於指定標記的初始屬性。

如下字段特別重要，而且在構建標記時一般會進行設置：

• position（必填）指定用於標識標記的初始位置的 LatLng。 map（可選）指定用來放置標記的

• Map。若是您在構建標記時未指定地圖，則標記會被建立，但不會附加到（或顯示在）地圖上。您之後能夠經過調用標記的 setMap() 方法來添加標記。

如下示例將一個簡單的標記添加到烏魯魯（位於澳大利亞的中心）的地圖上：

function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
  });
}

在以上示例中，在構建標記時使用了 MarkerOptions 中的 map 屬性將該標記放置在地圖上。或者，您也能夠直接使用標記的 setMap() 方法將該標記添加到地圖上，如如下示例中所示：

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
});

// To add the marker to the map, call setMap();
marker.setMap(map);

移除標記

要從地圖上移除標記，請調用 setMap() 方法並傳遞 null 做爲自變量。

marker.setMap(null);

請注意，上述方法並不會刪除該標記。它只是將該標記從地圖上移除。若是您是想刪除該標記，則應該從地圖上移除它，而後將該標記自己設置爲 null。

若是您但願管理一組標記，則應該建立一個數組來保存這些標記。使用此數組，您就能夠依次對數組中的每一個標記調用 setMap() 來移除這些標記。您也能夠刪除這些標記，只需先將其從地圖上移除，而後將數組的 length 設置爲 0，這將移除這些標記的全部引用。

查看示例 (marker-remove.html)

也能夠參考上一篇文章，谷歌地圖API 開發 之 添加標記 其實跟官網的基本原理也是同樣的。

以動畫方式呈現標記

您能夠經過動畫的方式呈現標記，以便它們可以在各類不一樣的狀況下展示出動態移動的效果。要指定某個標記的動畫呈現方式，請使用該標記的 animation 屬性，其類型爲 google.maps.Animation。可支持如下 Animation 值：

• DROP 表示第一次將該標記放置在地圖上時，該標記應該從地圖頂部下落到其最終位置。一旦標記中止移動，動畫即中止，而且 animation 將還原爲 null。在建立 Marker 時，一般會指定這種類型的動畫。

• BOUNCE 表示該標記應該在原地彈跳。彈跳標記將持續彈跳，直到其 animation 屬性顯式設置爲 null。

您能夠經過對 Marker 對象調用 setAnimation() 來對現有標記啓動動畫。

var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 59.325, lng: 18.070}
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,   //marker 設爲 可拖動
    animation: google.maps.Animation.DROP, //動畫屬性設爲DROP
    position: {lat: 59.327, lng: 18.067}
  });
  marker.addListener('click', toggleBounce); //監聽marker點擊時執行togglerBounce方法切換動畫屬性 
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

查看示例 (marker-animations.html)。

標記的圖標

在最基本的狀況下，圖標能夠簡單地表示一個要代替默認的 Google Maps 圖釘圖標的圖像。要指定這樣的圖標，請將標記的 icon 屬性設置爲某個圖像的 URL。Google Maps API 將自動調整圖標大小。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151}
  });

  var image = 'images/beachflag.png';
  var beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map: map,
    icon: image   //圖標
  });
}

查看示例 (icon-simple.html)。

好了，谷歌添加標記的就整理這麼多，想深刻研究的小夥伴能夠第一行的官網查看下。而後要開始今天的重要內容 如何獲取當前點擊的座標以及城市街道地址，寫到下一篇。