小程序地图标记点自定义标签的实现

实现效果:

<map id="map" style="width:100%;heighet:100vh;" latitude="{{latitude1}}" longitude="{{longitude1}}" scale="17" markers="{{markers}}" bindcontroltap="controltap" bindmarkertap="markertap" show-location>
  <block wx:for="{{markers}}" wx:key="">
    <cover-view slot="callout">
      <cover-view class="callout" marker-id="{{item.id}}">
      <!--  carDrivingStatus 1 行驶->蓝色 2 停止->绿色 3 离线->白色 -->
        <cover-view class="dian" wx:if='{{item.carDrivingStatus==1}}' style="color: blue;">·</cover-view>
        <cover-view class="dian" wx:if='{{item.carDrivingStatus==2}}' style="color: chartreuse;">·</cover-view>
        <cover-view class="dian" wx:if='{{item.carDrivingStatus==3}}' style="color: #fff;">·</cover-view>
        {{item.licensePlateNumber}}</cover-view>
    </cover-view>
  </block>
</map>

css

.dian {
  font-size: 120rpx;
  line-height: 12rpx;
  margin-right: 10rpx;
}

.callout {
  background: rgba(0, 0, 0, 0.5);
  padding: 10rpx 20rpx 10rpx 10rpx;
  border-radius: 4rpx;
  color: white;
  display: flex;
  flex-direction: row;
  font-size: 22rpx;
}

js

  getData(status) {
    let data = {
      "id": "",
      status,
    }
    util.request('/g/carExhibition', 'get', data, '', res => {
      let list = res.data.data
      list.forEach((item, idx) => {
        console.log(item)
        if (item.lng != "0" && item.carOilBunker) {

          that.setMapItemMarkers(item.lng, item.lat, item.licensePlateNumber, item.direction, item.carDrivingStatus, item.carOilBunker, idx)
        }
      })
      that.setData({
        list_data: list,
        latitude1: list[0].lat,
        longitude1: list[0].lng
      })

    }, err => {
      wx.showToast({
        title: '加载数据失败',
      })
    })
  },
  setMapItemMarkers(longitude, latitude, licensePlateNumber, direction,carDrivingStatus, carOilBunker, idx) {
    var that = this;
    let iconPath;
    // direction 旋转角度
    // 车牌号 licensePlateNumber
    // carDrivingStatus 1 行驶->蓝色 2 停止->绿色 3 离线->白色
    // carOilBunker 1 轻车 2 中车 3 重车
    var obj_item = {
      iconPath: "../../../images/car" + carOilBunker + ".png",
      id: setMapItemMarkers_id,
      longitude: longitude,
      latitude: latitude,
      rotate: Number(direction),
      licensePlateNumber,
      carDrivingStatus,
      customCallout: {
        anchorX:45,
        anchorY:45,
        display: "ALWAYS",
      },
      width: 15,
      height: 45
    };

    var circles_aa = {
      latitude: latitude,
      longitude: longitude,
      color: '#FF0000DD',
      fillColor: '#7cb5ec88',
      radius: 160,
      strokeWidth: 1
    }
    var circles = this.data.circles || [];

    circles.push(circles_aa);

    setMapItemMarkers_id++;
    var markers = this.data.markers || [];
    markers.push(obj_item);
    this.setData({
      markers
      //  circles
    })
  },