| 51 | * A: 參考範例 [http://code.google.com/apis/maps/documentation/examples/control-custom.html custom control] |
| 52 | * 解析 [http://code.google.com/apis/maps/documentation/examples/control-custom.html custom control] 原始碼 |
| 53 | * 從這一個範例,我們可以學習到 JavaScript 的多型繼承該怎麼作!! |
| 54 | {{{ |
| 55 | #!java |
| 56 | // 首先宣告一個函數 TextualZoomControl() 這個應該就是類別的建構子(Constructor) |
| 57 | function TextualZoomControl() { |
| 58 | } |
| 59 | // 宣告 TextualZoomControl 的原型(prototype) 是 GControl (型態是 Interface) |
| 60 | TextualZoomControl.prototype = new GControl(); |
| 61 | |
| 62 | // 重新實作 GControl 的 initialize(map) 回傳 Node (型態為 DOM 的 DIV 元件) |
| 63 | TextualZoomControl.prototype.initialize = function(map) { |
| 64 | // 產生最上層的 DIV |
| 65 | var container = document.createElement("div"); |
| 66 | // 產生第二層的 DIV (按鈕 Zoom In) |
| 67 | var zoomInDiv = document.createElement("div"); |
| 68 | // 設定 zoomInDiv 為自訂的格式 |
| 69 | this.setButtonStyle_(zoomInDiv); |
| 70 | // 把 zoomInDiv 加進 container |
| 71 | container.appendChild(zoomInDiv); |
| 72 | // 在 zoomInDiv 裡面寫文字 "Zoom In" |
| 73 | zoomInDiv.appendChild(document.createTextNode("Zoom In")); |
| 74 | // 替 zoomInDiv 註冊 onclick 事件處理等於 map.zoomIn() |
| 75 | GEvent.addDomListener(zoomInDiv, "click", function() { |
| 76 | map.zoomIn(); |
| 77 | }); |
| 78 | // 產生第二層的 DIV (按鈕 Zoom Out) |
| 79 | var zoomOutDiv = document.createElement("div"); |
| 80 | // 設定 zoomInDiv 為自訂的格式 |
| 81 | this.setButtonStyle_(zoomOutDiv); |
| 82 | // 把 zoomInDiv 加進 container |
| 83 | container.appendChild(zoomOutDiv); |
| 84 | // 在 zoomInDiv 裡面寫文字 "Zoom In" |
| 85 | zoomOutDiv.appendChild(document.createTextNode("Zoom Out")); |
| 86 | // 替 zoomInDiv 註冊 onclick 事件處理等於 map.zoomIn() |
| 87 | GEvent.addDomListener(zoomOutDiv, "click", function() { |
| 88 | map.zoomOut(); |
| 89 | }); |
| 90 | // 把 container 加進 google map 預設的 container (DIV) 裡面 |
| 91 | map.getContainer().appendChild(container); |
| 92 | return container; |
| 93 | } |
| 94 | |
| 95 | // 重新實作 GControl 的 getDefaultPosition() 回傳 GControlPosition 型態的變數 |
| 96 | TextualZoomControl.prototype.getDefaultPosition = function() { |
| 97 | return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7)); |
| 98 | } |
| 99 | |
| 100 | // 自訂函數 setButtonStyle_(button) |
| 101 | TextualZoomControl.prototype.setButtonStyle_ = function(button) { |
| 102 | button.style.textDecoration = "underline"; |
| 103 | button.style.color = "#0000cc"; |
| 104 | button.style.backgroundColor = "white"; |
| 105 | button.style.font = "small Arial"; |
| 106 | button.style.border = "1px solid black"; |
| 107 | button.style.padding = "2px"; |
| 108 | button.style.marginBottom = "3px"; |
| 109 | button.style.textAlign = "center"; |
| 110 | button.style.width = "6em"; |
| 111 | button.style.cursor = "pointer"; |
| 112 | } |
| 113 | |
| 114 | // 這個是 onload 時載入 google map 的處理函式 |
| 115 | function initialize() { |
| 116 | if (GBrowserIsCompatible()) { |
| 117 | var map = new GMap2(document.getElementById("map_canvas")); |
| 118 | map.setCenter(new GLatLng(37.441944, -122.141944), 13); |
| 119 | // 把自訂的按鈕 TextualZoomControl 加到左上角 |
| 120 | map.addControl(new TextualZoomControl()); |
| 121 | } |
| 122 | } |
| 123 | }}} |
| 124 | * 從上述範例程式碼可以學習到如何使用 javascript 產生 DOM 並定義對應的 Google Map 行為。 |
| 125 | * [感想] 我想應該也可以自己先寫好 DIV 並定義行為函數,應該也可以產生一樣的效果。 |
| 126 | |
| 127 | == 學習自訂背景圖層 == |
| 128 | |
| 129 | * Q: Google Map 如何使用自己定義的背景圖層?? |