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

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

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

function MyControl(){}

MyControl.prototype = new GControl();

MyControl.prototype.initialize = function(map){

    this.map = map;

    var container = map.getContainer();

    var label = document.createElement("div");
    container.appendChild(label);

    lable.innerHTML = "Hello World";

    return label;

}

MyControl.prototype.getDefaultPosition = function(){

    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(50, 10));

}

上面這段代碼中，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哦，基本的版權意識咱們還是應該有的，就像你也希望別人能夠尊重你的勞動成果一樣！