谷歌地圖 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)。

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