您的位置:首页 > Web前端 > JavaScript

js百度地图-鼠标选点连线,最终生成多边形覆盖物

2017-04-22 20:35 183 查看
最近做项目,需要使用百度地图,自定义创建区域,期初使用的是鼠标绘制管理类BMapLib.DrawingManager.可以实现功能,但无法实现事件绑定,

有些坑。于是换了一个思路。先上截图功能演示:








主要使用到的类: 

1. BMap 基类(不多说,自己看文档) 

2. Polygon (多边形覆盖物) 

3. Marker(热点标注) 

4. Polyline (绘制折线)

简单说下思路: 

第一步: 

对 Map 添加click事件。 获取当前点击的 坐标并生成 热点。 将热点 存储数据中。

第二步: 

当点击第二个点时,创建 BMap.Polyline(options,{}) .第一个 options 就是 热点集合,再调用 bmp.addOverlay(polyline).加入到地图中。 注意:(如果后面要做折线删除,就需要调用enableMassClear()【官方解释:允许覆盖物在map.clearOverlays方法中被清除】)、

第三步: 

当满足3个以上的点。 就可以闭合,结束绘画区域了。 这里所谓的 闭合,其实是一个假象。 

做的操作其实是: 将polyline 里的 点的坐标, 读出来,再生成一个 polygon对象。 然后回来再删除 polyline 对象。

后面的思路,就简单很多了。附下载地址,欢迎沟通!
http://download.csdn.net/detail/u012423557/9822500
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐