vue中百度地图使用笔记———覆盖物（点，折线）的创建，删除，自定义属性，地图点击事件，设置地图中心点，覆盖物的文字样式设置

百度地图自定义控件使用问题参考：https://blog.csdn.net/qq_39009348/article/details/105990473 

先说一个加载百度地图的问题：

加载地图，必须给地图设置有宽高的容器，如果你要让百度地图100%显示在你的容器中，直接写下面的代码就好了：

#allmap{width:100%;height:100%;overflow: hidden;margin:0;font-family:"微软雅黑";position:absolute;}

注意点：不能在该容器的父级加：position:relative,否则地图加载不出来 

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

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

创建覆盖物（点、线）：

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

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

// 点击地图创建点和折线
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()获取到的数量一致，而不会少；

// 创建折线
    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.清除绘制操作：清除所有覆盖物，清空数组，状态设置为不可绘制 

// 清除所有节点
    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，才能去调接口获取设备信息，才能与设备联系起来。

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

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

解决方法：在执行下面的点击事件clickEVENT生成标注点之前移除点击事件就不会出现这样的情况了，

// 点击地图生成标注图标并获取经纬度，生成折线，当绘制完成或非绘制模式时不应为点击标注
    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中调用，加载地图在获取到中心点后加载

// 获取地图中心点
    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()
      })
    },

覆盖物的title文字样式设置与鼠标滑入显示：

思路就是：设置文字样式初始为display：none，为每一个标注添加鼠标移入和移除事件，移入和移除改变display的值

// 生成已绘制图标（灯图标）
    buildMarkedIcon(Lpoint, myid, markType, text) {
      // 设置灯具图标点尺寸
      const LdeviceSize = new BMap.Size(30, 30)
      // 生成灯具icon图标
      const LdeviceIcon = new BMap.Icon(lampMarked, LdeviceSize, { // 会以base64的方式传参iconCar
        imageSize: LdeviceSize
      })
      // 创建灯具标注
      const Lmarkered = new BMap.Marker(Lpoint, {
        icon: LdeviceIcon
      })
      // 设置文字标签
      // -30:左右调节，-的越多，向左条，-25：上下调节：正的向下调节
      var label = new BMap.Label(text, { offset: new BMap.Size(-30, -20) })
      // 设置文字标签的样式
      label.setStyle({
        color: '#909399',
        fontSize: '12px',
        border: '1px solid 909399',
        display: 'none',
        backgroundColor: '#fff'
      })
      // 鼠标滑入显示文字title，划出隐藏
      Lmarkered.addEventListener('mouseover', function(e) {
        label.setStyle({ display: 'block' })
      })
      Lmarkered.addEventListener('mouseout', function(e) {
        label.setStyle({ display: 'none' })
      })
      Lmarkered.setLabel(label)
      Lmarkered.myID = myid
      Lmarkered.markTypes = markType
      // 将生成的标注添加到地图上
      this.map.addOverlay(Lmarkered)
      // 创建右键菜单
      var markerMenu = new BMap.ContextMenu()
      markerMenu.addItem(new BMap.MenuItem('移动', this.move.bind(Lmarkered)))
      markerMenu.addItem(new BMap.MenuItem('清除', this.clearCurrentMark.bind(Lmarkered)))
      markerMenu.addItem(new BMap.MenuItem('保存', this.saveMarkResult.bind(Lmarkered)))
      Lmarkered.addContextMenu(markerMenu)
    },

效果图：