Effect:

<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 driving -> blue 2 stopping -> green 3 offline -> white --> <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>Copy the code

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; }Copy the code

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: 'failure load data,})})}, setMapItemMarkers (longitude, latitude, licensePlateNumber, direction, carDrivingStatus, carOilBunker, idx) { var that = this; let iconPath; CarDrivingStatus 1 Running -> Blue 2 stopped -> green 3 offline -> white // carOilBunker 1 light car 2 medium car 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 }) },Copy the code