摘要：今天又看了下官網(wǎng)，發(fā)現(xiàn)官網(wǎng)上有地圖標(biāo)記的詳細(xì)說明。請(qǐng)注意，上述方法并不會(huì)刪除該標(biāo)記。查看示例也可以參考上一篇文章，谷歌地圖開發(fā)之添加標(biāo)記其實(shí)跟官網(wǎng)的基本原理也是一樣的。表示該標(biāo)記應(yīng)該在原地彈跳。將自動(dòng)調(diào)整圖標(biāo)大小。

今天又看了下官網(wǎng)，發(fā)現(xiàn)官網(wǎng)上有地圖標(biāo)記的詳細(xì)說明。當(dāng)時(shí)居然眼瞎看不見，還琢磨了好久...#$%^&，一定是項(xiàng)目太急，沒看到(^o^)/~
地址：https://developers.google.com...

google.maps.Marker 的構(gòu)造函數(shù)只需傳入一個(gè) MarkerOptions 對(duì)象字面量，用于指定標(biāo)記的初始屬性。

以下字段特別重要，并且在構(gòu)建標(biāo)記時(shí)通常會(huì)進(jìn)行設(shè)置：

position（必填）指定用于標(biāo)識(shí)標(biāo)記的初始位置的 LatLng。 map（可選）指定用來放置標(biāo)記的

Map。如果您在構(gòu)建標(biāo)記時(shí)未指定地圖，則標(biāo)記會(huì)被創(chuàng)建，但不會(huì)附加到（或顯示在）地圖上。您以后可以通過調(diào)用標(biāo)記的 setMap() 方法來添加標(biāo)記。

以下示例將一個(gè)簡單的標(biāo)記添加到烏魯魯（位于澳大利亞的中心）的地圖上：

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,
  });
}

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

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);

要從地圖上移除標(biāo)記，請(qǐng)調(diào)用 setMap() 方法并傳遞 null 作為自變量。

marker.setMap(null);

請(qǐng)注意，上述方法并不會(huì)刪除該標(biāo)記。它只是將該標(biāo)記從地圖上移除。如果您是想刪除該標(biāo)記，則應(yīng)該從地圖上移除它，然后將該標(biāo)記本身設(shè)置為 null。

如果您希望管理一組標(biāo)記，則應(yīng)該創(chuàng)建一個(gè)數(shù)組來保存這些標(biāo)記。使用此數(shù)組，您就可以依次對(duì)數(shù)組中的每個(gè)標(biāo)記調(diào)用 setMap() 來移除這些標(biāo)記。您也可以刪除這些標(biāo)記，只需先將其從地圖上移除，然后將數(shù)組的 length 設(shè)置為 0，這將移除這些標(biāo)記的所有引用。

查看示例 (marker-remove.html)

也可以參考上一篇文章，谷歌地圖API 開發(fā) 之 添加標(biāo)記 其實(shí)跟官網(wǎng)的基本原理也是一樣的。

您可以通過動(dòng)畫的方式呈現(xiàn)標(biāo)記，以便它們能夠在各種不同的情況下展現(xiàn)出動(dòng)態(tài)移動(dòng)的效果。要指定某個(gè)標(biāo)記的動(dòng)畫呈現(xiàn)方式，請(qǐng)使用該標(biāo)記的 animation 屬性，其類型為 google.maps.Animation。可支持以下 Animation 值：

DROP 表示第一次將該標(biāo)記放置在地圖上時(shí)，該標(biāo)記應(yīng)該從地圖頂部下落到其最終位置。一旦標(biāo)記停止移動(dòng)，動(dòng)畫即停止，并且 animation 將還原為 null。在創(chuàng)建 Marker 時(shí)，通常會(huì)指定這種類型的動(dòng)畫。

BOUNCE 表示該標(biāo)記應(yīng)該在原地彈跳。彈跳標(biāo)記將持續(xù)彈跳，直到其 animation 屬性顯式設(shè)置為 null。

您可以通過對(duì) Marker 對(duì)象調(diào)用 setAnimation() 來對(duì)現(xiàn)有標(biāo)記啟動(dòng)動(dòng)畫。

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 設(shè)為 可拖動(dòng)
    animation: google.maps.Animation.DROP, //動(dòng)畫屬性設(shè)為DROP
    position: {lat: 59.327, lng: 18.067}
  });
  marker.addListener("click", toggleBounce); //監(jiān)聽marker點(diǎn)擊時(shí)執(zhí)行togglerBounce方法切換動(dòng)畫屬性 
}

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

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

在最基本的情況下，圖標(biāo)可以簡單地表示一個(gè)要代替默認(rèn)的 Google Maps 圖釘圖標(biāo)的圖像。要指定這樣的圖標(biāo)，請(qǐng)將標(biāo)記的 icon 屬性設(shè)置為某個(gè)圖像的 URL。Google Maps API 將自動(dòng)調(diào)整圖標(biāo)大小。

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   //圖標(biāo)
  });
}

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

好了，谷歌添加標(biāo)記的就整理這么多，想深入研究的小伙伴可以第一行的官網(wǎng)查看下。
然后要開始今天的重要內(nèi)容 如何獲取當(dāng)前點(diǎn)擊的坐標(biāo)以及城市街道地址，寫到下一篇。