以下是可复现的完整代码片段
<template>
<view>
<map id="myMap" style="width: 100%; height: 100vh;" :latitude="centerLatitude" :longitude="centerLongitude"
:markers="markers" show-location>
<cover-view slot="callout">
<cover-view v-for="(item,index) in markers" :key="item.id">
<cover-view :marker-id="item.id">
<cover-view>{{item.title}}</cover-view>
<cover-image
src="https://img1.baidu.com/it/u=261583383,1036443967&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
style="width: 30px;height: 30px;border-radius: 50%;"></cover-image>
</cover-view>
</cover-view>
</cover-view>
</map>
</view>
</template>
<script>
export default {
data() {
return {
centerLatitude: 39.908,
centerLongitude: 116.397,
markers: [],
};
},
onLoad() {
this.initMockData();
setInterval(() => {
this.updateMarkersPosition();
}, 2000);
},
onUnload() {},
methods: {
initMockData() {
const mockUsers = [{
id: 1,
name: '自己',
latitude: 39.908,
longitude: 116.397
},
{
id: 2,
name: '用户A',
latitude: 39.908,
longitude: 116.398
},
{
id: 3,
name: '用户B',
latitude: 39.909,
longitude: 116.397
},
];
this.markers = mockUsers.map(user => ({
id: user.id,
latitude: user.latitude,
longitude: user.longitude,
iconPath: 'https://img2.baidu.com/it/u=3190856383,2977784859&fm=253&fmt=auto&app=138&f=JPEG?w=285&h=285',
width: 20,
height: 20,
title: user.name,
anchor: {
x: 0.5,
y: 0.5
},
customCallout: {
display: 'ALWAYS',
anchorY: 0,
anchorX: 0,
}
}));
},
updateMarkersPosition() {
const list = [45, 60, 90, 120, 150, 270]
this.markers = this.markers.map(user => ({
...user,
rotate: list[Math.floor(Math.random() * list.length)],
}));
},
}
};
</script>
有人遇到过这个问题么?该如何解决