百度地图展示附近1公里范围内的目标

需求

  • 从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) 判断点是否在圆中
【百度地图展示附近1公里范围内的目标】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!

    推荐阅读