uni-app使用map组件的translateMarker方法时，小米10手机出现marker多复制一个的问题，咋整？

uni-app使用map组件的translateMarker方法时，小米10手机出现marker多复制一个的问题，咋整？ 需求是，根据后端传的经纬度数据，让标识产生实时移动的效果。

苹果手机没有问题，小米手机使用后，会复制一个图标出来。附件中有展示。这是啥问题？

代码片段

 let deviceMarker = [  
            {  
                id: 0,  
                lngLatList: [  
                    {  
                        lng: 111.12,  
                        lat: 22.12,  
                    },  
                    {  
                        lng: 111.56,  
                        lat: 22.22,  
                    },  
                    {  
                        lng: 111.43,  
                        lat: 22.89,  
                    },  
                    {  
                        lng: 111.66,  
                        lat: 22.12,  
                    },  
                ],  
            },  
        ];

let allDriverMarker=[]；
moveMarkers(deviceMarker) {
deviceMarker.forEach(item => {
if (item.lngLatList.length > 0) {
item.lngLatList.forEach(lngLatItem => {
if (lngLatItem.lng && lngLatItem.lat) {
if (this.allDriverMarker.includes(item.id)) {
this.mapObj.translateMarker({
markerId: item.id,
autoRotate: false,
duration: 1000,
destination: {
latitude: lngLatItem.lat,
longitude: lngLatItem.lng,
},

                            });  
                        } else {  
                            this.mapObj.addMarkers({  
                                markers: [  
                                    {  
                                        id: item.id,  
                                        latitude: lngLatItem.lat,  
                                        longitude: lngLatItem.lng,  

                                    },  
                                ],  
                            });  
                            this.allDriverMarker.push(item.id);  
                        }  
                    }  
                });  
            } else {  
                if (this.allDriverMarker.includes(item.id)) {  
                    this.mapObj.removeMarkers({  
                        markerIds: [item.id],  
                    });  
                }  
            }  
        });  

    },

更多关于uni-app使用map组件的translateMarker方法时，小米10手机出现marker多复制一个的问题，咋整？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app使用map组件的translateMarker方法时，小米10手机出现marker多复制一个的问题，咋整？的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于小米手机（部分Android机型）上map组件的translateMarker方法在动画执行过程中，可能会临时创建一个新的marker实例导致的视觉重复。

从代码看，你通过allDriverMarker数组记录已添加的marker，逻辑本身没问题。但小米手机在执行translateMarker时，系统底层可能会在动画期间生成一个临时marker，动画结束后未及时清除，造成“复制”的错觉。

建议调整方案：

  1. 在调用translateMarker前，先移除原marker再重新添加（虽然效率略低，但能规避此问题）：

    if (this.allDriverMarker.includes(item.id)) {
    this.mapObj.removeMarkers({
        markerIds: [item.id]
    });
    // 短暂延迟后添加新位置marker（避免渲染冲突）
    setTimeout(() => {
        this.mapObj.addMarkers({
            markers: [{
                id: item.id,
                latitude: lngLatItem.lat,
                longitude: lngLatItem.lng
            }]
        });
    }, 50);
}

  2. 或尝试强制设置animationEnd回调后手动刷新marker列表（部分开发者反馈有效）：

    this.mapObj.translateMarker({
    markerId: item.id,
    // ...其他参数
    animationEnd: () => {
        // 可在此处尝试调用map组件的update方法
        this.mapObj.$forceUpdate();
    }
});
回到顶部