[JS版]基于百度地圖的 Overlay 擴充，仿Q房網實作自定義覆寫物

經常看到各大找房系統平台上，有類似這樣的功能： 地圖上顯示目前城市的區，滑鼠懸停上去，顯示這個區的不規則的範圍覆寫物。點選這個地區熱點，顯示這個地區下的詳細 熱點。 最近做項目也需要用到類似效果，找不到合适的，自己動手撸了一個，有需要的朋友可以做下參考。

老規則，先上效果圖：

點選區域後顯示：

大概說下實作思路：

主要使用到 百度的 Overlay類。但是該類隻有基本的功能，并不能滿足我們的需求， 這就需要我們自己擴充了(prototype)。

1.定義自己的覆寫物實體，
           

function ComplexCustomOverlay(lon, lat, text,  index, type, id) {
        this._point = new BMap.Point(lon, lat);
        this._lon = lon;
        this._lat = lat;
        this._text = text;
        this._index = index;
        this._type = type;
        this._id = id;
    }
           

2.繼承API的BMap.Overla     
           

3.重寫初始化自定義覆寫物構造
           

ComplexCustomOverlay.prototype.initialize = function (map) {
        //do something... （此處主要做樣式的調整、事件的綁定等）
    }
           

4.重寫draw （注：此方法不是必須重寫，看項目需求）
           

ComplexCustomOverlay.prototype.draw = function () {
        var map = this._map;
        // 根據地理坐标轉換為像素坐标，并設定給容器
        var pixel = map.pointToOverlayPixel(this._point);
        this._div.style.left = pixel.x -  + "px";
        this._div.style.top = pixel.y -  + "px";
    }
           

5.最有一步，添加到地圖展     
           

var polygon1 = []; //一級覆寫物存儲的多邊形區域
    var myOverlay1 = [];  //一級覆寫物熱點

    function addFirstOverlay() {

        //存放所有的行政區級圓形覆寫物
        for (var i = ; i < district.length; i++) {

            //添加行政區多邊形覆寫物
            polygon1[i] = new BMap.Polygon(district[i].position_border, {
                strokeColor: "#31C14D",
                strokeWeight: ,
                strokeOpacity: 
            });

            //建立多邊形
            mp.addOverlay(polygon1[i]);

            polygon1[i].hide();

            //添加行政區圓形覆寫物
            myOverlay1[i] = new ComplexCustomOverlay(district[i].longitude, district[i].latitude, district[i].name, district[i].house_count, i, , district[i].id);
            mp.addOverlay(myOverlay1[i]);
        }
    }
           

關于多邊形覆寫物的生成 ,請參考百度API Boundary類。

好了，以上是添加多邊形覆寫物的步驟，其他熱點就簡單很多了，就不多說了，附demo下載下傳位址（報考多邊形如何生成）：

源碼下載下傳位址