收藏
回答

uniapp 地图marker点更新安卓手机闪烁,该如何解决?

以下是可复现的完整代码片段
<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: [], // 存储所有用户的 Marker
			};
		},
		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 => ({
					...user,
					rotate: list[Math.floor(Math.random() * list.length)],
				}));
			},
		}
	};
</script>
回答关注问题邀请回答
收藏

1 个回答

  • 圈圈牛
    圈圈牛
    2025-08-26

    有人遇到过这个问题么?该如何解决

    2025-08-26
    有用
    回复
登录 后发表内容