Heartsuit的博客

Keep it simple and stupid.

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

需求

  • 从DB中检索附近一公里内的数据,并在百度地图展示;

    Note: 主要用于从本地数据表中查询符合条件的目标;

效果展示

2018-05-16-CircleRange

总结

(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!

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013810234/article/details/80335557
个人分类: Front-End
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭