[筆記]Google Map API (3) 自訂控制項 GControl

function TwControl() {} TwControl.prototype = new GControl(); // 起始 TwControl.prototype.initialize = function(map) { var container = document.createElement("div"); container.appendChild(this.createButton("台灣",23.639492, 120.783691, 8)); container.appendChild(this.createButton("馬祖",26.162083,119.941472, 10)); container.appendChild(this.createButton("金門",24.429333,118.315389, 10)); map.getContainer().appendChild(container); return container; } // 預設位置 TwControl.prototype.getDefaultPosition = function() { return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7)); } // 建立按鈕 TwControl.prototype.createButton = function(name, lat, lng, zoom) { var div = document.createElement("div"); this.setButtonStyle_(div); div.appendChild(document.createTextNode(name)); GEvent.addDomListener(div, "click", function() { map.setCenter(new GLatLng(lat, lng), zoom); }); return div; } // 設定按鈕樣式 TwControl.prototype.setButtonStyle_ = function(button) { button.style.textDecoration = "underline"; button.style.color = "#0000cc"; button.style.backgroundColor = "white"; button.style.font = "small Arial"; button.style.border = "1px solid black"; button.style.padding = "2px"; button.style.marginBottom = "3px"; button.style.textAlign = "center"; button.style.width = "6em"; button.style.cursor = "pointer"; } // 加入 map.addControl(new TwControl());

參考資料：

• 控件 - Google 地图 API - Google Code