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

崔曉明發布于2019-08-22 10:35 / 2987人閱讀

摘要：今天又看了下官網，發現官網上有地圖標記的詳細說明。請注意，上述方法并不會刪除該標記。查看示例也可以參考上一篇文章，谷歌地圖開發之添加標記其實跟官網的基本原理也是一樣的。表示該標記應該在原地彈跳。將自動調整圖標大小。

今天又看了下官網，發現官網上有地圖標記的詳細說明。當時居然眼瞎看不見，還琢磨了好久...#$%^&，一定是項目太急，沒看到(^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)。

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

云服務器 GPU云服務器谷歌地圖api 谷歌地圖api接口 js地圖標記怎么清空谷歌地圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90869.html

谷歌地圖 API 開發之添加標記

摘要：創建地圖之后，基本上都需要標記位置的，就是那個圓點。然后參考谷歌的，找了許久，網址代碼如下創建對象地圖居中到當前坐標這段運行效果，就是你點擊地圖就會添加一個標記。創建地圖之后，基本上都需要標記位置的，就是那個圓點。然后參考谷歌的API，找了許久，網址：https://developers.google.com... 代碼如下: Accessing arg...

huaixiaoz 2019-08-22 11:01 評論0 收藏0
谷歌地圖 API 開發之信息窗口

摘要：信息窗口具有一個內容區域和一個錐形柄。添加信息窗口構造函數采用了對象字面量，后者為顯示信息窗口指定了一組初始參數。其中包含此信息窗口錨定位置的。在標記上打開信息窗口將自動更新。用于指定信息窗口的最大寬度以像素為單位。信息窗口簡介 InfoWindow 在地圖上方給定位置的彈出窗口中顯示內容（通常為文本或圖像）。信息窗口具有一個內容區域和一個錐形柄。柄頂部與地圖上的某指定位置相連。 ...

princekin 2019-08-20 10:13 評論0 收藏0
學習設計模式前需要知道的事情

摘要：為什么要學習設計模式做事情之前問個為什么總是好的。設計模式的使用方法關于使用方式，像我這種初學者最容易犯的錯誤就是生搬硬套，但是模仿本來也是學習的一個過程，最重要的事情是在模仿中要學會思考。為什么要學習設計模式？做事情之前問個為什么總是好的。關于設計模式的好壞，我在知乎上也看過一些討論，有知友對其提出過一些疑問，里面有一些關于設計模式的觀點：設計模式有何不妥，所謂的荼毒體現在哪...

kviccn 2019-08-21 10:53 評論0 收藏0
谷歌地圖 API 開發之新建地圖

摘要：最近項目用到谷歌地圖，但是看谷歌文檔，對于國人來說，還是比較吃力的，網上找資料也并沒有太多的資料，所以就想分享給大家。顯示了整個地球地圖的完全縮放。最近項目用到谷歌地圖，但是看谷歌api文檔，對于國人來說，還是比較吃力的，網上找資料也并沒有太多的資料，所以就想分享給大家。但是因為本人太懶了，每次研究技術完事時間一久就忘了，更別提分享了，在朋友的鼓勵支持之下，重新開始寫博客，共享給大家...

Winer 2019-08-22 10:34 評論0 收藏0