百度地圖JS版API自定義覆蓋物和控件

一. 自定義覆蓋物：繼承Overlay類

      這個例子是在地圖中間添加了一個覆蓋物

 //1、定義構造函數並繼承Overlay

     定義自定義覆蓋物的構造函數  
    function SquareOverlay(center, length, color) {
        this._center = center;
        this._length = length;
        this._color = color;
    }
    // 繼承API的BMap.Overlay  
    SquareOverlay.prototype = new BMap.Overlay();


    //2、初始化自定義覆蓋物
    // 實現初始化方法  
    SquareOverlay.prototype.initialize = function (map) {
        // 保存map對象實例  
        this._map = map;
        // 創建div元素，作爲自定義覆蓋物的容器  
        var div = document.createElement("div");
        div.style.position = "absolute";
        // 可以根據參數設置元素外觀  
        div.style.width = this._length + "px";
        div.style.height = this._length + "px";

        div.style.background = this._color;

        div.appendChild(document.createTextNode("覆蓋物測試"));

        // 將div添加到覆蓋物容器中  

        map.getPanes().markerPane.appendChild(div);
        // 保存div實例  
        this._div = div;
        // 需要將div元素作爲方法的返回值，當調用該覆蓋物的show、  
        // hide方法，或者對覆蓋物進行移除時，API都將操作此元素。  
        return div;
    }

    //3、繪製覆蓋物
    // 實現繪製方法  
    SquareOverlay.prototype.draw = function () {
        // 根據地理座標轉換爲像素座標，並設置給容器 
          var position = this._map.pointToOverlayPixel(this._center);
          this._div.style.left = position.x - this._length / 2 + "px";
          this._div.style.top = position.y - this._length / 2 + "px";       
    }

    //4、顯示和隱藏覆蓋物
    // 實現顯示方法  
    SquareOverlay.prototype.show = function () {
        if (this._div) {
            this._div.style.display = "";
        }
    }
    // 實現隱藏方法  
    SquareOverlay.prototype.hide = function () {
        if (this._div) {
            this._div.style.display = "none";
        }
    }

    //5、添加其他覆蓋物方法
    //比如，改變顏色 
    SquareOverlay.prototype.yellow = function () {
        if (this._div) {
            this._div.style.background = "yellow";
        }
    }

    //6、自定義覆蓋物添加事件方法
    SquareOverlay.prototype.addEventListener = function (event, fun) {
        this._div['on' + event] = fun;
    }

    //7、添加自定義覆蓋物
    var mySquare = new SquareOverlay(map.getCenter(), 100, "red");
    map.addOverlay(mySquare);

    //8、 爲自定義覆蓋物添加點擊事件
    mySquare.addEventListener('click', function () {
        alert('haveTest');

        }); 

二. 自定義控件：繼承Control類

這裏是在地圖右上角添加了一個工具欄（三個按鈕）

function StaticsControl() {
        // 設置默認停靠位置和偏移量  
        this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
        this.defaultOffset = new BMap.Size(10, 10);
    }

    // 通過JavaScript的prototype屬性繼承於BMap.Control  
    StaticsControl.prototype = new BMap.Control();

    StaticsControl.prototype.initialize = function (map) {
        // 創建一個DOM元素  
        var div = document.createElement("div");
        // 添加文字說明  

        var e1 = document.createElement("input");
        e1.type = "button";
        e1.value = "專題統計";
        e1.onclick = function () {
            Statics();
        }
        var object = div.appendChild(e1);

        var e2 = document.createElement("input");
        e2.type = "button";
        e2.value = "結束統計";
        e2.onclick = function () {
            EndStatics();
        }
        var object = div.appendChild(e2);

        var e3 = document.createElement("input");
        e3.type = "button";
        e3.value = "統計設置";
        e3.onclick = function () {
            SetStatics();
        }
        var object = div.appendChild(e3);


        // 添加DOM元素到地圖中  
        map.getContainer().appendChild(div);

        // 將DOM元素返回  
        return div;
    }

    // 創建控件實例  
    var staticsCtrl = new StaticsControl();
    // 添加到地圖當中  
    map.addControl(staticsCtrl);

    function SetStatics() {
        alert("SetStatics");
    }

    function EndStatics() {
        alert("EndStatics");
    }

    function Statics() {
        alert("Statics");
    }