2014年1月3日 星期五

取得 Google Maps 的觸發事件

當可以在頁面上顯示地圖之後,接著會更想瞭解如何收集使用者的操作行為,這時候就需要取得使用者在地圖上的任何動作的觸發事件。而 Google Maps 允許我們存取以下使用者的動作:

click:當用滑鼠點選地圖時會被觸發。但如果是點在地圖標記上(Marker)則不會觸發。
dblclick:用滑鼠連續點選地圖兩次時被觸發。但如果畫面上也有攔截 click 事件,則 click 事件會優先被觸發。經實作後發現,當地圖上同時攔截 click 與 dblclick 事件時,只會取得 click 事件。
mouseup:滑鼠點下去,被放開的那一刻觸發。
mousedown:滑鼠點下去被觸發。
mouseover:滑鼠移到地圖上時被觸發。
mouseout:滑鼠離開地圖時被觸發。

接下來如何把這些事件與程式綁在一起呢?可以透過下面的語法:



google.maps.event.addListenergoogle.maps.event.addListener(對象,事件名稱,事件函數);

對象:舉例來說,可能是 map 或 marker
事件名稱:例如 click
事件函數:function(event){alert('paladin lee');}

下面的範例,則是取得使用者在畫面上點選時,會跳出經緯度資訊。
//攔截 map 的 click event
google.maps.event.addListener(map, 'click', function (event) {
    var location = event.latLng;
    alert(location.lat() + ',' + location.lng());
});

由於 click 事件會傳送 MouseEvent,而這 MouseEvent 含有 latLng 屬性,所以我們就可以用
event.latLng.lat() 取得「緯度」
event.latLng.lng() 取得「經度」

參考:
01:Google Maps Javascript API V3 Reference
02:ASP.Net 實作 Google Maps Ver.3
03:輕鬆搞定Google雲端技術:Maps.Android.App Engine.Cloud SQL與電子商務API實例解析

沒有留言:

張貼留言