Marker与Label结合使用创建车牌

// 创建车牌label框

    createLabel(car) {
      // 创建文本标注点坐标
      var length = car.locationList.length - 1
      var point = this.GCJ2BD09([
        car.locationList[length].longitude,
        car.locationList[length].latitude
      ])
      point = new window.BMapGL.Point(point[0], point[1])

      var marker = new window.BMapGL.Marker(point)

      // 创建label文本标记
      var label = new window.BMapGL.Label(car.licensePlate, {
        offset: new window.BMapGL.Size(-50, -40) // 设置label的偏移量,为了让label的中心显示在点上
      })

      // 设置label框的样式
      label.setStyle({
        width: '112px',
        height: '30px',
        lineHeight: '30px',
        textAlign: 'center',
        borderRadius: '4px',
        borderColor: 'transparent',
        background: '#060910',
        fontSize: '16px',
        color: '#9CBCD7',
        fontFamily: 'PingFang SC'
      })

      // 为label框添加唯一标识
      label.name = { vin: car.vin, enterpriseId: car.enterpriseId }

      this.markerLayer.set(car.vin, marker)
      this.markerLabelLayer.set(car.vin, label)

 
 
  // 将label框添加到marker中去
      marker.setLabel(label)
   // 将marker添加到地图中去
   this.map.addOverlay(marker)

      // 为label框添加点击事件
      label.addEventListener('click', this.clickCarLabel)
    },

更新车牌label框的定位

    updateLabel(car) {
      var length = car.locationList.length - 1
      //车牌所在点
      var point = this.GCJ2BD09([
        car.locationList[length].longitude,
        car.locationList[length].latitude
      ])

      point = new window.BMapGL.Point(point[0], point[1])

      // 更新marker标记坐标
      this.markerLayer.get(car.vin).setPosition(point)
    }