2008年6月7日 星期六

Google Maps API - 在地圖上新增標註

在 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 - 前言及目錄

2 則留言:

匿名 提到...

不好意思,
我想請問一下openInfoWindowHtml
如何控制讓他的大小為固定,
不會因為內容越來越多而一直往右邊變長。
謝謝。

Ian 懶惰蟲 提到...

openInfoWindowHtml 訊息視窗內容是可以使用 HTML 的,看你要用 table 還是 div 都可以達到控制內容呈現大小的目的。