Google Map開發系列(七)——使用谷歌地圖API實現自定義控件

使用谷歌地圖API定義自定義的控件其實非常簡單,看看我在右邊地圖的右上角添加的半透明的狀態監控欄,這就是一個自定義的控件。

閒話少說,先看一段Hello World的代碼

[javascript] view plain copy
  1. function MyControl(){}  
  2. MyControl.prototype = new GControl();  
  3. MyControl.prototype.initialize = function(map){  
  4.     this.map = map;  
  5.     var container = map.getContainer();    
  6.     var label = document.createElement("div");    
  7.     container.appendChild(label);    
  8.     lable.innerHTML = "Hello World";    
  9.     return label;    
  10. }    
  11. MyControl.prototype.getDefaultPosition = function(){    
  12.     return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(50, 10));    
  13. }  

上面這段代碼中,MyControl就是一個自定義的控件了,在需要的時候,和添加其他默認控件一樣,使用map.addControl(new MyControl())就可以在地圖上添加這個自定義的控件了,只不過這個控件現在也沒什麼實際用處,就是在你的地圖容器的頂部顯示一個Hello World的文本,與地圖沒什麼交互。

   下面來詳細解釋一下這段代碼:

   第一行定義了一個MyControl類;

   接下來,把這個類定義爲GControl類的子類,就是把MyControl的prototype指定爲GControl類的實例/對象;

   後面的兩個方法initiallize和getDefaultPosition是繼承GControl類的時候必須實現的兩個方法,API文檔裏定義GControl是接口類,所以可以把這兩個方法認爲是抽象方法,就不難理解爲什麼必須要實現了。需要注意的是,這兩個方法我們只負責實現,但是不需要我們去顯式的調用,在向地圖上添加控件時API類庫會自動調用這兩個方法。

   方法initialize接受一個參數map,就是你創建地圖時new出來的GMap2對象。在這個方法中,你使用map.getContainer()方法取得放置地圖的DOM容器,然後,你就可以向這個DOM容器裏添加任何你想加入的DOM元素了。在上面的示例中我創建了一個div元素,用來顯示Hello World,但是,你可以在這裏加入任何你想添加的DOM元素,並且可以定義它們的行爲,也就是說,這裏就是你可以自由發揮的天地了,無論你是想顯示動態的信息,還是來控制地圖,比如右邊地圖裏的狀態監控欄。initialize方法最後需要返回你所創建的最外層的DOM元素,這個千萬別忘了。

   方法getDefaultPosition的作用是定義你的控件在地圖容器裏的位置,實現起來就更簡單了,你可以直接把我這裏的代碼copy過去,改成你需要定位的地方就可以了。GControlPosition的第一個參數是你的控件的錨點,只能使用G_ANCHOR_TOP_LEFT、G_ANCHOR_TOP_RIGHT、G_ANCHOR_BOTTOM_LEFT、G_ANCHOR_BOTTOM_RIGHT這四個代表上左、上右、下左、下右這四個角的常量,後一個參數使用GSize來定義你的控件距離地圖容器邊界的偏移量,第一個參數是橫向偏移、第二個參數是縱向偏移。

   到這裏一個自定義的控件就完成了,沒什麼複雜的吧?剛纔看到論壇裏有朋友問怎麼能把自己的LOGO和地圖左下角Google的LOGO並排放在一起,看了自定義控件,你一定知道怎麼做了吧。不過,千萬別想用你的LOGO覆蓋Google的LOGO哦,基本的版權意識咱們還是應該有的,就像你也希望別人能夠尊重你的勞動成果一樣!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章