| | 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 如何使用自己定義的背景圖層?? |
