背景

在物聯網行業，使用者、決策者通常需要直觀地看到不同區域、地點處的裝置部署情況，便於瞭解整體分佈。通過在數字地圖上動態劃分各區、縣的邊界，同時顯示每個區域的裝置數量，可實現這一需求。其實，這種技術已經很成熟，並在各大找房網站中得到廣泛應用。

這裡列出幾個參考網站，隨便感受下：

• 悟空找房
• 鏈家網
• 愛屋吉屋
• 安居客
• 巴樂兔

基本上就是根據地圖（高德、百度）的不同放大級別，分別顯示不同的覆蓋物；

專案需求

在百度地圖上，分級，按行政區、縣劃分輪廓界限；

一開始拿到這一需求後，先查閱了相關資料，結果基本都指向了悟空找房，果然不錯，隨即確認了眼神。向各大找房網站學習~~

效果展示

總結

(1) 自定義覆蓋物
主要解決了以下幾個問題：
1. 標註位置、樣式；
2. 根據放大級別顯示不同的標註覆蓋物；

(2) 呼叫百度API獲取指定區域邊界資料；

var plys = [];
var bdary = new BMap.Boundary();
bdary.get(省區縣名, function (rs) {
    var count = rs.boundaries.length;
    //建立多邊形覆蓋物
    for (var i = 0; i < count; i++) {
        var ply = new BMap.Polygon(rs.boundaries[i], {
            strokeWeight: 2
 
,
            strokeOpacity: 0.8,
            StrokeStyle: "solid",
            strokeColor: "#1abc9c",
            fillColor: "#16a085",
            fillOpacity: 0.2
        });
        plys.push(ply);
        map.addOverlay(ply);  //新增覆蓋物
    }
});

(3) 顯示、隱藏輪廓邊界；

為避免重複呼叫介面，並多次渲染地圖邊界，對邊界點呼叫show(), hide()

// 顯示輪廓
for (var i = 0; i < plys.length; i++) {
    plys[i].show();
}

// 隱藏輪廓
for (var i = 0; i < plys.length; i++) {
    plys[i].hide();
}

(4) mouseover和mouseout在滑鼠懸浮時多次觸發；

問題的根源在子元素，一句話說明 mouseover與mouseenter 的區別：

無論滑鼠穿過被選元素或其子元素，都會觸發 `mouseover` 事件。
僅當滑鼠穿過被選元素時，才會觸發 `mouseenter` 事件。

所以將 mouseover改為mouseenter，mouseout改為mouseleave，即可達到目的。

Source Code: Github

If you have any questions or any bugs are found, please feel free to contact me.

Your comments and suggestions are welcome!