实现效果:
<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
})
},