百度地图展示附近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!
推荐阅读
- 广角叙述|广角叙述 展众生群像——试析鲁迅《示众》的展示艺术
- 拿着旧地图,找不到新大陆
- 工具|后天就是七夕节,你准备好了吗(送上几个七夕代码,展示你技能的时候到了!)
- 百度云极速下载,来体验飞的感觉,还可以看最新动漫的百度云视频哦
- 地图|地图 旅行 菜系
- 界面展示bug随笔
- 虎刺梅
- 假如给我三天光明
- 学生优秀作文展示(羽毛球的魅力)
- 儿时的年味/记忆中的年味