百度地图使用笔记

您所在的位置:网站首页 百度地图清除标记点在哪设置 百度地图使用笔记

百度地图使用笔记

2024-07-14 10:54| 来源: 网络整理| 查看: 265

功能描述:在百度地图中,我们需要选择设备,然后进行标注在地图中,而且是批量标注,这时就需要绘制地图点,线,所以这时点、线就涉及到创建,删除,创建自定义属性(创建自定义属性是为了绑定ID,与设备信息联系在一起,因为创建的覆盖物只包含该覆盖物的地图信息,不包含设备信息)等功能

要实现该功能,我们的思路很简单:选择设备——创建覆盖物(绘制点、线)——给点、线绑定删除事件——自定义属性

创建覆盖物(点、线):

创建点不传入自定义图标,则使用地图的默认图标

覆盖物的可拖拽:Lmarker .enableDragging()与不可拖拽;Lmarker .disableDragging(),。Lmarker 为创建覆盖物的对象

123456789101112131415161718192021222324252627282930313233343536// 点击地图创建点和折线 clickSetMark() {       var _that_ = this       // 地图绑定点击事件       _that_.map.addEventListener('click', function(e) {         // 只有在选择了灯组的时候才进行点击生成标注点         if (_that_.isSelectLamp) {           // 保存点击点           var obj = {}           obj.lg = e.point.lng           obj.la = e.point.lat           _that_.laAndLgArr.push(obj)           // 创建折线           var p = new BMap.Point(e.point.lng, e.point.lat)           // 保存折线点,点击一次地图,保存一个折线点           _that_.polyLine.push(p)           // 执行创建折线函数           _that_.creatPoyline()           // 创建灯具标注           const Lmarker = new BMap.Marker(p)           // 创建自定义属性           Lmarker .myid = '你好啊'           // 将生成的标注添加到地图上           _that_.map.addOverlay(Lmarker)           // 创建右键菜单           var markerMenu = new BMap.ContextMenu()           markerMenu.addItem(new BMap.MenuItem('保存标注点', _that_.savedrawing.bind(Lmarker)))           markerMenu.addItem(new BMap.MenuItem('清除所有标注点', _that_.removeAll.bind(Lmarker)))           markerMenu.addItem(new BMap.MenuItem('清除当前标注点', _that_.removeCurrent.bind(Lmarker)))           markerMenu.addItem(new BMap.MenuItem('清除绘制操作', _that_.removedrawing.bind(Lmarker)))           Lmarker.addContextMenu(markerMenu)         } else {           _that_.$message('请选择灯组再标注')         }       })     },

创建折线函数:

注意:

当保存折线点的数组polyLine有两个点时,会创建一个折线,而创建在地图上的覆盖物,如果不清除的话,会一直留在地图上,所以,对覆盖物的清除我们需要执行两点:1.执行百度地图的方法清除覆盖物。2.手动清除或者操作自己保存折线点的数组。每点击一次,就会创建一个覆盖物对象,如:点击一次,地图显示一个点,polyLine数组长度为1,点击两个点,地图创建一个线段,polyLine数组长度为2,又创建了一个覆盖物对象,点击三个点,地图创建两个线段,数组长度为3,又创建了一个覆盖物对象。其实,这时候是三条线段,前面一个已经和这次创建的重合了,因为这是两个不同的覆盖物对象,但是形成覆盖物的点确实一样的,所以前面一条线段颜色会比没有重合的线段颜色更深。不知道我这么讲老铁们是否明白,亲自去实现下就知道了;

所以,有了以上描述的问题,我们每次创建这个折线的时候都要先清除之前创建的覆盖物,就如下面的方法一:遍历所有的覆盖物,清除类型为线段的覆盖物,这样线段就不会重合了,但这方式仅适用于我不需要做‘删除当前标注点’的功能;

因为我需要做右键菜单中的“清除当前标注点”的功能,所以用下面的方法二,删除当前标注点就是:画一个线段,发现当前线段有误,删除当前的线段和点,而不是删除前面画的线段,方法二的基本逻辑就是:创建线段时,每条线段视为一个单独的覆盖物对象,每次创建覆盖物对象就只传入这条线段的两个点,而不传入其他不是这条线段的点这样就不会重合了,而且也使得删除当前覆盖物不会删除到其他的线段,基本要点就是每次创建线段必然是两个坐标点,而且是点数组的最后两个,因为这个数组存放的数据是有规律的,先标的点肯定在数组前面,当前标的点在数组后面

这样创建出来的覆盖物就是你数到有几个覆盖物(包含点,线段),就和this.map.getOverlays()获取到的数量一致,而不会少;

123456789101112131415161718192021// 创建折线     creatPoyline() {       // 每次创建折线之前,先清除之前创建的折线,要不然会重复,备注:不需要删除当前折线的可以使用这个方法清除覆盖物重复的问题       // 方式一:       // var overlayArr = this.map.getOverlays()       // for (var i = 0; i < overlayArr.length; i++) {       //   if (overlayArr[i].toString() === '[object Polyline]') {       //     this.map.removeOverlay(overlayArr[i])       //   }       // }       // 方式二:       // 需要解决线段重合问题       if (this.polyLine.length > 1) {         // 每个线段创建一个折线对象进行添加,而不是整个折线组为一个折线对象         var markLine = []         markLine.push(this.polyLine[this.polyLine.length - 1])         markLine.push(this.polyLine[this.polyLine.length - 2])         var polylineObj = new BMap.Polyline(markLine, { strokeColor: 'blue', strokeWeight: 6, strokeOpacity: 0.5 })         this.map.addOverlay(polylineObj) // 增加折线       }     },

删除当前标注点、清除所有标注点,清除绘制操作:

1.清除所有节点:两步:1.获取地图上覆盖物,循环清除所有覆盖物,如果其他不需要清除的需要加判断,2.清空保存线段点的数组

2.清除当前节点:同样的两步,清除地图的当前覆盖物,和清除数组最后一个覆盖物(因为数组存放的覆盖物是有先后顺序的)

3.清除绘制操作:清除所有覆盖物,清空数组,状态设置为不可绘制

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647// 清除所有节点     removeAll(e, ee, marker) {       // 不要创建中心点,要不然创建标注点会和中心点区分不开来,不好处理       var overlayArr = this.map.getOverlays()       for (var i = 0; i < overlayArr.length; i++) {         this.map.removeOverlay(overlayArr[i])       }       // 折线和折线点清空       this.polyLine = []       this.laAndLgArr = []     },     // 清除当前节点     removeCurrent(e, ee, marker) {       // 清除技巧:地图上要清除,保存的标注点也要清除       // 所有折线点包含绘制的覆盖物,折线,点,与中心点       // 打印创建的自定义属性       console.log('点击当前节点', marker.myid)       var overlayArr = this.map.getOverlays()       this.map.removeOverlay(marker)       // 选择点数组删除最后一个元素       this.laAndLgArr.pop()       // 保存所有的折线点,清除当前折线为清除折线数组下的最后一个折线       var lineArr = []       for (var i = 0; i < overlayArr.length; i++) {         // 判断覆盖物为折线         if (overlayArr[i].toString() === '[object Polyline]') {           lineArr.push(overlayArr[i])         }       }       // 清除地图折线的最后一个对象       this.map.removeOverlay(lineArr[lineArr.length - 1])       // 清除折线数组的最后一个对象       this.polyLine.pop()       if (this.map.getOverlays().length < 1) {         // 当没有覆盖物时,保存的折线覆盖物都清空         this.polyLine = []         this.laAndLgArr = []       }     },     // 清除绘制操作,     removedrawing() {       // 清除绘制操作:清空地图所有标注,选择的点数组清空,重新选择灯组       this.map.clearOverlays()       this.laAndLgArr = []       this.polyLine = []       this.isSelectLamp = false     },

创建覆盖物的自定义属性:

这个也简单,如上面创建点、先代码中,给对象添加一个自定义属性即可,然后右键菜单中即可获取该属性,主要用于给地图的覆盖物绑定设备ID,因为标注在地图的设备(覆盖物)只有绑定ID,才能去调接口获取设备信息,才能与设备联系起来。

地图的点击事件以及遇到的问题:

问题描述:给地图绑定点击事件后,多次点击会出现点击一次,里面代码执行了两次的情况

解决方法:当点击后执行完菜单操作后移除点击事件就不会出现这样的情况了,

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950// 点击地图生成标注图标并获取经纬度,生成折线,当绘制完成或非绘制模式时不应为点击标注     clickSetMark() {       this.map.addEventListener('click', this.clickEVENT)     },     // 地图点击事件     clickEVENT(e) {       // 只有在选择了灯组的时候才进行点击生成标注点       if (this.isSelectLamp) {         // 保存点击折线点         var obj = {}         obj.lg = e.point.lng         obj.la = e.point.lat         this.laAndLgArr.push(obj)         console.log('点数组4', this.laAndLgArr)         // 创建折线         var p = new BMap.Point(e.point.lng, e.point.lat)         this.polyLine.push(p)         this.creatPoyline()         // 创建灯具标注         const Lmarker = new BMap.Marker(p)         // 设置文字标签       // -30:左右调节,-的越多,向左条,-25:上下调节:正的向下调节       var label = new BMap.Label(text, { offset: new BMap.Size(-30, -20) })       // 设置文字标签的样式       label.setStyle({         color: '#909399',         fontSize: '12px',         border: '1px solid 909399',         backgroundColor: '#fff'       })       Lmarker.setLabel(label)         Lmarker.markTypes = 'mark'         // 将生成的标注添加到地图上         this.map.addOverlay(Lmarker)         // 创建右键菜单         var markerMenu = new BMap.ContextMenu()         markerMenu.addItem(new BMap.MenuItem('保存标注点', this.savedrawing.bind(Lmarker)))         markerMenu.addItem(new BMap.MenuItem('清除所有节点', this.removeAll.bind(Lmarker)))         markerMenu.addItem(new BMap.MenuItem('清除当前节点', this.removeCurrent.bind(Lmarker)))         markerMenu.addItem(new BMap.MenuItem('清除绘制操作', this.removedrawing.bind(Lmarker)))         Lmarker.addContextMenu(markerMenu)       } else {         this.$message('请选择灯组再标注')       }     },     // 移除地图点击事件     removeMapClick() {       this.map.removeEventListener('click', this.clickEVENT)       console.log('清除点击事件')     },

创建覆盖物文字标签如上代码,也可设置文字标签样式

设置地图中心点:

问题描述:我们进入地图时,希望进入到曾经自己设置过的中心点的地图界面去,调用中心点的接口和地图加载之间的关系没弄对,中心点就会设置不成功

我们获取中心点的接口在mounted中调用,加载地图在获取到中心点后加载

12345678910111213// 获取地图中心点     getMapCenters() {       const para = {         id: this.peopleId       }       var params = Qs.stringify(para)       getMarkcenter(params).then(res => {         // 获取地图中心点,设置中心点,必须在获取到中心点之后再加载地图         this.lg = res.longitude         this.la = res.latitude         this.loadmap()       })     },

效果图:



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3