vue如何引入百度地图绘制工具

百度地图绘制工具示例
http://developer.baidu.com/map/jsdemo.htm#f0_7
百度地图绘制工具api文档
http://api.map.baidu.com/library/DrawingManager/1.4/docs/symbols/BMapLib.DrawingManager.html
vue加载百度地图及绘制工具

1.定义异步加载的js方法

const ak = 'nZVpgxBGRxCHTiznnR2d5kPK'
/*** 异步加载百度地图* @returns {Promise}* @constructor*/
function loadBaiDuMap () {return new Promise(function (resolve, reject) {try {console.log('BMap is defined:', BMap === undefined || BMap)resolve(BMap)} catch (e) {window.init = function () {resolve(BMap)}let script1 = document.createElement('script')script1.type = 'text/javascript'script1.src = 'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=init'script1.onerror = rejectdocument.body.appendChild(script1)}})
}export {loadBaiDuMap}/*** 异步加载百度地图,以及绘制工具* @returns {Promise}* @constructor*/
function loadBaiDuDrawMap () {return loadBaiDuMap().then(BMap => {let loaded = falsetry {loaded = (BMapLib && BMapLib.DrawingManager)} catch (e) {loaded = false}if (!loaded) {console.log('BMapLib.DrawingManager loading!')let script2 = document.createElement('script')script2.type = 'text/javascript'script2.src = 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js'document.body.appendChild(script2)let link = document.createElement('link')link.rel = 'stylesheet'link.href = 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css'document.body.appendChild(link)} else {console.log('BMapLib.DrawingManager is loaded!')}return BMap})
}export {loadBaiDuDrawMap}

2.vue文件中异步加载百度地图，初始化绘制工具

initMap () { // 初始化地图let vue = thisloadBaiDuDrawMap().then(BMap => {vue.bmap = new BMap.Map('bmap', {enableMapClick: false})            // 创建Map实例if (vue.cityId !== '') {vue.bmap.centerAndZoom(vue.cityName, vue.cityZoom)}vue.bmap.enableScrollWheelZoom()vue.bmap.clearOverlays()vue.bmap.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}))})}initDrawingManager () { // 初始化地图绘制工具,需要在第一次开启绘制时再初始化,如果随着页面加载一起初始化会报错if (!this.drawingManager) {this.drawingManager = new BMapLib.DrawingManager(this.bmap, {isOpen: false, // 是否开启绘制模式enableDrawingTool: false, // 是否显示工具栏polygonOptions: this.bizAddForm.polygonStyle // 多边形的样式})// 添加鼠标绘制工具监听事件，用于获取绘制结果// 多边形画完之后的事件this.drawingManager.addEventListener('polygoncomplete', this.polygonComplete)// marker点画完之后的事件this.drawingManager.addEventListener('markercomplete', this.markerComplete)}}

进入正题

先说一下我使用绘制工具的场景：
要画一个多边形,双击画完之后,让多边形处于编辑状态(我需要再次修改多边形的边界),还要给多边形设置一个中心点和名称,名称显示的位置就是中心点位置,中心点可以拖拽,拖拽过程中,名称位置会跟着中心点移动

这其中遇到两个问题如下:
两个问题的解决思路是一样的,不直接使用绘制工具绘制的覆盖物对象,而是复制一个新的来用

问题1

画好多边形之后再修改多边形的边界就有问题了,边界能改动,但是要是拖动或者缩放了地图,多边形又会变回最一开始画的,边界点还存在,如下图

问题代码：

polygonComplete (ply) { // 多边形覆盖物绘制完成之后的事件// 直接使用了绘制工具画好的多边形对象ply.enableEditing()
}

正确代码：

polygonComplete (ply) { // 多边形覆盖物绘制完成之后的事件// new一个新的多边形,将绘制工具画好的多边形抛弃掉let newPly = new BMap.Polygon(ply.getPath(), this.bizAddForm.polygonStyle)this.bmap.removeOverlay(ply) // 删掉绘制工具绘制的多边形覆盖物this.bmap.addOverlay(newPly) // 添加新的多边形覆盖物newPly.enableEditing() // 此代码一定要放在addOverlay之后
}

问题2

多边形的中心点画好之后,给中心点添加的事件不起作用

问题代码：

markerComplete (marker) { // 绘制marker点完成之后的事件marker.enableDragging()// 添加事件,不会起作用marker.addEventListener('dragend', function (e) {vue.currentEditPly.bizLabel.setPosition(e.point)})// 添加商圈名称vue.currentEditPly.bizLabel = vue.getLabel(marker.getPosition(), vue.currentEditPly.bizData.bizName)vue.bmap.addOverlay(vue.currentEditPly.bizLabel)vue.drawingManager.close()}

正确代码：

markerComplete (marker) { // 绘制marker点完成之后的事件// 复制一个新的marker，抛弃绘制工具绘制的markerlet newMarker = new BMap.Marker(marker.getPosition())// 添加事件newMarker.addEventListener('dragend', function (e) {vue.currentEditPly.bizLabel.setPosition(e.point)})vue.bmap.addOverlay(newMarker ) // 添加新marker的覆盖物vue.bmap.removeOverlay(marker) // 删掉绘制工具绘制的marker覆盖物// 添加商圈名称vue.currentEditPly.bizLabel = vue.getLabel(marker.getPosition(), vue.currentEditPly.bizData.bizName)vue.bmap.addOverlay(vue.currentEditPly.bizLabel)vue.drawingManager.close()}

分享一下,希望对遇到相同问题的同学有帮助

vue结合百度地图绘制工具遇到的问题及解决方案(多边形编辑状态下形状显示不全、marker点添加事件无效)相关推荐

百度地图-绘制工具以及覆盖物的简单使用
这几天重拾了地图相关的功能,做一个小小的总结. 本文的示例的后端为flask框架,前端使用了bootstrap和jQuery以及百度地图API. 接下来是展示部分. 地图上的覆盖物表示高校所处的位置, ...
百度地图绘制工具类 DrawingManager.js 源码
类 BMapLib.DrawingManager 鼠标绘制管理类,实现鼠标绘制管理的入口. 实例化该类后,即可调用该类提供的open 方法开启绘制模式状态. 也可加入工具栏进行选择操作. 源文件: ...
vue 百度地图绘制点线面
vue使用百度地图 1.在index.html 中直接引用 <script type="text/javascript" src="http://api.map.b ...
html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
vue引入百度地图BMapGL，获取天地图根据名称显示坐标定位信息
1. 解决提示:解决调用百度地图API弹出提示 "百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥"的方法百度官网生成ak: https://lb ...
android+动态地图+效果图,Android百度地图绘制圆形，圆形半径可动态变化
问题:百度地图绘制圆形,圆形半径可随进度拖动条发生改变思路:圆形本身是一个覆盖物,可参考百度地图Demo中的OverlayDemo.java这个类进行实现.完成画圆之后,圆形半径如何随着进度条的拖动 ...
wms地图绘制工具_【工具】奇幻风世界地图绘制工具Inkarnate
首先放出官方网站 https://inkarnate.com/inkarnate.com 加载完网页之后点击这里的Beta Sign Up注册,之后Worlds Log In就可以登入了. 这里有两 ...
Vue引用百度地图API
Vue引用百度地图API 一. 通过官网申请ak 1. 打开百度地图官网,在开发文档中找到JavaScript API 2.点击账号和获取密钥 3.按照页面步骤操作即可二. 通过模块化引入 1. 安 ...
vue使用百度地图获取位置信息
vue使用百度地图获取位置信息最近再做H5页面,就一个单页面,进来的时候,要获取地理位置,上代码 1.使用srcipt不受同源策略的影响,来获取百度api 写在了一个bmap.js里面,onBMap ...

vue结合百度地图绘制工具遇到的问题及解决方案(多边形编辑状态下形状显示不全、marker点添加事件无效)

vue如何引入百度地图绘制工具

进入正题

vue结合百度地图绘制工具遇到的问题及解决方案(多边形编辑状态下形状显示不全、marker点添加事件无效)相关推荐

最新文章

热门文章