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 地圖的左下角。

offset 為 GSize(width, height) 物件來表示控制項距離地圖邊緣多少像素。
<br />var myMap = new GMap2(document.getElementById("my_map"));<br />myMap.setCenter(new GLatLng(25.08532, 121.561498), 11);<br /> <br />var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));<br />myMap.addControl(new GLargeMapControl(), topRight);<br />
看範例所呈現的結果

‧自訂地圖控制項

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

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

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

getDefaultPosition() 方法必須返回類型為 GControlPosition，向地圖返回預設情況下控制項在地圖中出現的位置。
<br />//ImgZoomControl 是顯示「放大」和「縮小」按鈕的 GControl，先定義函數。<br />function ImgZoomControl() {<br />}<br /><br />//要建立 GControl 的子類，我們將 prototype 對象設置為 GControl 對象的一個實例。<br />ImgZoomControl.prototype = new GControl();<br /><br />//為每個按鈕創建一個 DIV，並將其放在容器 DIV 中，然後返回容器 DIV 作為我們的控件元素。<br />//將該控件添加到地圖容器中，並將其返回，以便地圖類能正確地放置它。<br />ImgZoomControl.prototype.initialize = function(map) {<br /> var container = document.createElement("div");<br /> <br /> var zoomInDiv = document.createElement("div");<br /> zoomInDiv.innerHTML = '<img src="add.png" width="32" height="32" border="0" style="cursor:pointer;" />';<br /> GEvent.addDomListener(zoomInDiv, "click", function() {<br /> map.zoomIn();<br /> });<br /> container.appendChild(zoomInDiv);<br /> <br /> var zoomOutDiv = document.createElement("div");<br /> zoomOutDiv.innerHTML = '<img src="del.png" width="32" height="32" border="0" style="cursor:pointer;" />';<br /> GEvent.addDomListener(zoomOutDiv, "click", function() {<br /> map.zoomOut();<br /> });<br /> container.appendChild(zoomOutDiv);<br /> <br /> map.getContainer().appendChild(container);<br /> return container;<br />}<br /><br />//預設情況下，該控制項將在地圖的左上角顯示，邊距為 7 像素。<br />ImgZoomControl.prototype.getDefaultPosition = function() {<br /> return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));<br />}<br /><br />function load() {<br /> if (GBrowserIsCompatible()) {<br /> var myMap = new GMap2(document.getElementById("my_map"));<br /> myMap.setCenter(new GLatLng(25.08532, 121.561498), 11);<br /> <br /> myMap.addControl(new ImgZoomControl());<br /> }<br />}<br />
看範例所呈現的結果

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


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