百度地图自定义控件使用问题参考: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)
    },

效果图:

Logo

前往低代码交流专区

更多推荐