使用js地图选点

简介: 使用js地图选点

主要使用到的类:

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

2. Polygon (多边形覆盖物)

3. Marker(热点标注)

4. Polyline (绘制折线)


简单说下思路:

第一步:

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


第二步:

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


第三步:

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

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


c707c2fe96a549088b4f96c582edcc22.png

a0c69683a7264f3b8704f30232671237.png

相关文章
|
编解码 数据可视化 前端开发
如何使用 D3.js 创建一个交互式的地图可视化?
如何使用 D3.js 创建一个交互式的地图可视化?
|
编解码 数据可视化 前端开发
如何使用 D3.js 创建一个交互式的地图可视化?
如何使用 D3.js 创建一个交互式的地图可视化?
872 6
|
缓存 JavaScript 前端开发
mapbox没有token/token失效,地图闪烁后变空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.
本博客介绍了mapbox如何去除token验证,暴力破解mapbox的token验证机制。一劳永逸解决mapbox地图闪现一下然后变成空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.的方法,还介绍了类似问题的具体解决思路。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 定位技术 API
Js地图路线规划以及点击获取经纬度
Js地图路线规划以及点击获取经纬度
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
2257 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
397 0
|
JavaScript 前端开发 定位技术
JavaScript如何操作实现一个地图并标记到自身当前位置(本文从创建key值开始,到实现标点结束)
JavaScript如何操作实现一个地图并标记到自身当前位置(本文从创建key值开始,到实现标点结束)
463 0
JavaScript如何操作实现一个地图并标记到自身当前位置(本文从创建key值开始,到实现标点结束)
|
JavaScript 前端开发 定位技术
js实现地图选点获取经纬度
js实现地图选点获取经纬度
393 0
|
搜索推荐 JavaScript 数据可视化
数据可视化大屏高德地图javascript webAPI开发的智慧治安物联网管理系统实战解析(web GIS、3D视图、个性化地图、标注、涟漪动画、自定义弹窗、3D控件)
数据可视化大屏高德地图javascript webAPI开发的智慧治安物联网管理系统实战解析(web GIS、3D视图、个性化地图、标注、涟漪动画、自定义弹窗、3D控件)
1638 0