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
相关文章推荐
- JS - 百度地图 判断一个标注点是否在多边形区域里
- Android——百度地图开发、添加覆盖物、地理编码和反地理编码、以及覆盖物之间的连线
- JS动态生成元素鼠标响应方法 .live()
- js传数组到java后台使用Json转换 (高德地图多边形覆盖物显示)
- 百度地图 js API 覆盖物
- Android 百度地图(二)——地图切换、定位、添加覆盖物、搜索位置、连线
- js调用百度地图接口绘制任意多边形并获取每个点的经纬度
- 百度地图中多边形覆盖物的面积计算
- 百度地图笔记_覆盖物(标注marker,折线polyline,多边形polygon)的点击弹窗和右键菜单
- 百度地图笔记_多边形覆盖物区域加标签
- JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)
- 百度地图:普通覆盖物,以及多边形覆盖物,及他们的描述信息的添加,修改,删除,查看功能,还有多边形根据名称查询功能;
- 仿百度地图自行车路线搜索和地图选点,覆盖物,途经点阅览,路线总长度计算等
- 百度地图开发:多边形覆盖物的背景颜色等样式设置
- 百度地图 JS 可编辑 多边形
- 百度地图笔记_覆盖物(标注marker,折线polyline,多边形polygon)的点击弹窗和右键菜单
- js动态生成DIV(根据鼠标点击处生成DIV,兼容浏览器)
- 百度地图 鼠标绘制,获取矩形,多边形的顶点经纬度
- JS 获取最终生成的样式
- 百度地图实现鼠标绘制多边形并获取所有点坐标