需求

• 從DB中檢索附近一公里內的資料，並在百度地圖展示；

  Note: 主要用於從本地資料表中查詢符合條件的目標；

效果展示

總結

(1) 覆蓋物樣式設定

// 圓形覆蓋物
var circle = new BMap.Circle(center, radius,
  {
    strokeColor: "#1abc9c", StrokeStyle: "solid", strokeWeight: 1, strokeOpacity: 0.8, // 輪廓
    fillColor: "#1abc9c", fillOpacity: 0.5, // 填充
    enableEditing: true
 
 // 是否啟用形狀編輯
  });

(2) 判斷點是否在圓中

GeoUtils.js提供若干幾何演算法，用來幫助使用者判斷點與矩形、圓形、多邊形線、多邊形面的關係,並提供計算折線長度和多邊形的面積的公式。基於Baidu Map API 1.2。 @author Baidu Map Api Group
這裡主要用到其中判斷點是否在圓中的方法：BMapLib.GeoUtils.isPointInCircle(point, circle);

(3) 為圓形覆蓋物新增lineupdate監聽事件

當覆蓋物形狀改變時，動態渲染marker；

Note: 需要在覆蓋物中設定enableEditing: true

(4) 設定覆蓋物是否可被清除

circle.disableMassClear(); // 禁止circle在 map.clearOverlays 方法中被清除
map.clearOverlays();  // 結合circle.disableMassClear(); 清除所有marker而保留circle；

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!