2008年8月2日 星期六

Google Maps API - 設定地圖控制項位置及自訂地圖控制項

‧地圖控制項位置設定

之前已經介紹過如何透過 GMap2.addControl(control) 添加地圖控制項。addControl 方法有一個非必填的第二參數 GControlPosition(anchor, offset) 可以指定該控制項在地圖上的位置。

anchor 為一常數分別代表地圖的四個角落。
G_ANCHOR_TOP_RIGHT 地圖的右上角
G_ANCHOR_TOP_LEFT 地圖的左上角
G_ANCHOR_BOTTOM_RIGHT 地圖的右下角
G_ANCHOR_BOTTOM_LEFT 地圖的左下角。

offsetGSize(width, height) 物件來表示控制項距離地圖邊緣多少像素。

看範例所呈現的結果

‧自訂地圖控制項

Google Maps API 還允許透過創建 GControl 的子類自訂地圖控制項。從技術角度上講,不是使用 JavaScript 建立對象的 subclass,而是將 prototype 對象分配給 GControl 對象的實例。

自訂可用的地圖控制項,至少為該類定義以下兩個方法︰

initialize() 方法必須返回 DOM 元素,並透過 GMap2.getContainer() 取得包含地圖的 DOM 元素添加到地圖中。

getDefaultPosition() 方法必須返回類型為 GControlPosition,向地圖返回預設情況下控制項在地圖中出現的位置。

看範例所呈現的結果

參考︰
class GMap2︰addControl(control, position?),getContainer()
class GControlPosition
class GSize
enum GControlAnchor
interface GControl


更多教學文件在此︰Google Maps API - 前言及目錄

1 則留言:

Unknown 提到...

最近正在研究googleMap,版主提供的很受用~感謝^^