回复
DCloud_UNI_yuhe ： 问题：定时更改marker标记点的rotate markers出现闪烁问题安卓手机 华为p70 微信小程序
我直接复制给你一个完整的代码demo 你放到uniapp里运行一下看看吧
<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 class="debug-info">
<text>用户数量：{{ markers.length }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
centerLatitude: 39.908, // 地图中心纬度（可选）
centerLongitude: 116.397, // 地图中心经度（可选）
markers: [], // 存储所有用户的 Marker
userId: 'user1', // 当前用户 ID（模拟）
socketTask: null, // WebSocket 连接（模拟数据）
};
},
onLoad() {
//初始化模拟数据
this.initMockData();
// 定时更新位置（模拟实时数据）
setInterval(() => {
this.updateMarkersPosition();
}, 2000);
},
onUnload() {},
methods: {
// 初始化模拟数据
initMockData() {
// 模拟 3 个用户
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
},
];
// 转换为 markers 格式
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,
}
}));
},
// 更新所有 Marker 的rotate
updateMarkersPosition() {
const list = [45, 60, 90, 120, 150, 270]
this.markers = this.markers.map(user => ({
id: user.id,
rotate: list[Math.floor(Math.random() * list.length)],
latitude: user.latitude,
longitude: user.longitude,
iconPath: user.iconPath,
anchor: user.anchor,
width: 20,
height: 20,
title: user.title,
customCallout: user.customCallout
}));
// 延迟 100ms 后执行移动动画（确保数据已更新）
setTimeout(() => {
this.moveAllMarkers();
}, 100);
},
// 移动所有 Marker（核心方法）
moveAllMarkers() {
const mapContext = uni.createMapContext('myMap', this);
// 遍历所有 Marker，只移动位置变化的
this.markers.forEach(marker => {
mapContext.translateMarker({
markerId: marker.id,
destination: {
latitude: marker.latitude,
longitude: marker.longitude
},
duration: 1000, // 1 秒移动完成
autoRotate: false, // 根据需求开启（如导航箭头）
animationEnd: () => {
console.log(`Marker ${marker.id} 已移动`);
}
});
});
}
}
};
</script>
