程式扎記: [Google Map APIv3] 入門教學(二):在 Map 上加入標記

標籤

2014年3月27日 星期四

[Google Map APIv3] 入門教學(二):在 Map 上加入標記

來源自 這裡 
Preface: 
要在 Google Map 上加入標記,需要利用的是 google.maps.Marker 這個物件. 延續 Google Map API 入門教學(一)的例子,可以將 JavaScript 加上以下的語法: 
  1. google.maps.event.addListener(currentMap, "click", function(event) {  
  2.   // Setting of marker  
  3.   var optionOfMarker = {  
  4.     position: event.latLng,  
  5.     map: currentMap,  
  6.     title: event.latLng.toString()  
  7.   };  
  8.   
  9.   // Show marker in the place of mouse clicks  
  10.   mapMarker = new google.maps.Marker(optionOfMarker);  
  11. });  
一開始先在 currentMap 這個 Map 物件上綁上 click 事件, 然後設定標記的相關屬性之後,產生該標記就可以讓標記在地圖上出現了. 屬性說明如下: 
* position:標記要放的位置,必須是一個 google.maps.LatLng 的物件。這裡因為要在使用者點擊的位置放標記,所以要讀取 click 事件傳進來的 event 物件中帶的 LatLng 位置。
* map:標記所屬的 Google Map 物件。
* title:滑鼠停留在標記上時要出現的泡泡內容。這裡是直接顯示使用者點擊的位置的座標

以上的程式碼加進去以後就可以讓使用者在地圖上一直點,標記就會一直出現。如果只讓標記出現一個的話,可以在 click 事件觸發時先檢查標記的變數是否存在,如果存在的話就把標記從地圖上移除: 
  1. // Clear marker if it already exists  
  2. if (mapMarker) mapMarker.setMap(null);  
至於為什麼移除標記要用 setMap(null) 呢?原因可以直接參照 Google Map API 文件 [1] 的說明: 
如要從地圖上移除疊加層,請呼叫疊加層的 setMap() 方法傳送 null。請注意,呼叫此方法不會刪除疊加層;只是從地圖上移除此疊加層。如果您希望刪除疊加層,應該從地圖上將其移除,然後將疊加層本身設定為 null。

如果您希望管理一組疊加層,應該建立陣列來存放疊加層。使用此陣列時,如果需要移除疊加層,您就可以在陣列的各個疊加層上呼叫 setMap()。(請注意,第 3 版與第 2 版不同,不提供 clearOverlays() 方法;您需自行負責追蹤疊加層並在不需要時從地圖上移除)。從地圖上移除疊加層並將陣列的 length 設為 0 即可刪除疊加層,這樣做會移除疊加層的所有參照...

如果需要刪除地圖註冊的事件時,可以使用 clearListeners 函式去移除事件: 
  1. google.maps.event.clearListeners(currentMap, "click");  
另外 Google Map API 原生支援了兩種標記的動畫: 
* BOUNCE:標記會在地圖的指定座標處不斷跳動。
* DROP:產生標記時,標記會從地圖上方掉下來。
使用方法如下: 
  1. mapMarker.setAnimation(google.maps.Animation.BOUNCE);  
Sample Code: 
把上面提到的全部加上去做成完整的 JavaScript 的話,可以寫成下面的範例: 
  1. var currentMap;  
  2. var mapMarker;  
  3.   
  4. $(function(){  
  5.   initialize();  
  6. });  
  7.   
  8. function initialize() {  
  9.   var latlng = new google.maps.LatLng(-34.397150.644);  
  10.   var myOptions = {  
  11.     zoom: 11,  
  12.     center: latlng,  
  13.     mapTypeId: google.maps.MapTypeId.HYBRID  
  14.   };  
  15.   currentMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
  16.   
  17.   // Clear all the click event of the map  
  18.   google.maps.event.clearListeners(currentMap, "click");  
  19.   // Register a click event to the map  
  20.   google.maps.event.addListener(currentMap, "click", function(event) {  
  21.     // Clear marker if it already exists  
  22.     if (mapMarker) mapMarker.setMap(null);  
  23.   
  24.     // Setting of marker  
  25.     var optionOfMarker = {  
  26.       position: event.latLng,  
  27.       map: currentMap,  
  28.       title: event.latLng.toString()  
  29.     };  
  30.   
  31.     // Show marker in the place of mouse clicks  
  32.     mapMarker = new google.maps.Marker(optionOfMarker);  
  33.     mapMarker.setAnimation(google.maps.Animation.DROP);  
  34.   });  
  35. }  
HTML 的部份則請直接參閱 Google Map API 入門教學(一)中的 index.html 的範例. 一個使用的範例可以參考 這裡 (選取學校, 並顯示 Google Map 上的位置). 

Supplement: 
Google Maps Javascript API V3 Reference 
Google Map API Tutorial - Simple markers 
Google Marker Icon List 
Google Map API Tutorial - Geocoding service 
Tool - 查詢地點的經緯度

沒有留言:

張貼留言

網誌存檔

關於我自己

我的相片
Where there is a will, there is a way!