在 Google Maps 如果想要加上標記及視窗說明,這可以使用
GMarker 物件來加以實現。
看範例所呈現的結果var myMarker = new GMarker( new GLatLng(25.08532, 121.561498) ); 建立一個 GMarker 物件,設定位置在經度 25.08532,緯度 121.561498 的位置上。
GMap2.addOverlay(overlay) 將加疊層加入地圖中,這裡我們將新建立的 GMarker 加入地圖中。
GMarker.openInfoWindowHtml(content, opts?) 在標記圖示之上打開地圖訊息視窗。如果要關閉已打開的訊息視窗可以使用
GMarker.closeInfoWindow()。
在上面的範例中是否覺得陽春了點,再來看看下面這個範例,我們將針對加在地圖上的標記做些改變,並加入動作事件處理程序。
看範例所呈現的結果這裡介紹一個改變地圖上標記呈現相當重要的物件
GIcon,這可以讓我們建立屬於自己的圖示,使用在 GMarker 上。針對 GIcon 有許多屬性可加以設定,必須要注意 image、iconAnchor、infoWindowAnchor 這三個是必要屬性,如果省略將會照成執行上的錯誤。
var myMarker = new GMarker( new GLatLng(25.08532, 121.561498), {icon:myIcon, draggable:true} ); 在這範例中,建立 GMarker 物件多加了一個參數設定
GMarkerOptions,此為一個物件我們設定了兩個屬性。
icon 指定所使用的圖示 GIcon;
draggable 使用者是否可拖拽此標記,true 為可拖曳,默認值為 false。
GEvent 在 Google Maps API 中所有事件都是透過此來加以定義,包含地圖本身的事件處理,至於有那些事件可以使用必須參考每個物件中事件部分的說明。所以這範例我們透過
GEvent.addListener(source, event, handler),針對 GMarker 註冊了三個事件處理程序,分別為 click、dragstart、dragend。
在之前的所有範例中可以發現經常出現的兩個物件,
GLatLng 是以緯度和經度表示的地理座標點。
GPoint 是以像素座標表示的地圖上的一點。這兩個物件為 Google Maps API 中定義地圖上座標的主要物件,在往後的教學範例中還會經常看見它們。
參考︰
‧
class GMap2︰addOverlay(overlay)
‧
class GMarker︰openInfoWindowHtml(content, opts?)、closeInfoWindow()
‧
class GMarkerOptions‧
class GIcon‧
class GEvent︰addListener(source, event, handler)
‧
class GLatLng‧
class GPoint更多教學文件在此︰
Google Maps API - 前言及目錄