uni-app map 组件更新markers问题

uni-app map 组件更新markers问题

开发环境 版本号 项目创建方式
Windows HBuilderX
3.1.12

操作步骤： map 更新markers更新完成后,旧的点依然显示

预期结果： map 更新markers更新完成后,旧的点不显示

实际结果： map 更新markers更新完成后,旧的点依然显示

bug描述：

map 更新markers更新完成后,旧的点依然显示

更多关于uni-app map 组件更新markers问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

17 回复

那你为什么不清空前面的点？

更多关于uni-app map 组件更新markers问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


清空无用

已经试过以前文章的方法,请求回来的点新加上去再清除不了

清空无用

示例发下 目前测试没发现问题

回复 DCloud_Android_ST: 下面附了代码,就是从接口请求回来,加的点有问题

回复 神越科技: 附件提供一下吧 你这粘贴会被格式掉一些符号。而且ask篇幅太长影响阅读

回复 DCloud_Android_ST: 附文件了

回复 DCloud_Android_ST: 里面有自己写的公共方法和公共组件请忽略

回复 神越科技: 请提供可直接操作的示例。很浪费时间啊。。。。并提供复现问题的操作步骤

回复 DCloud_Android_ST: 上传更新了

回复 神越科技: 你需要把id改为唯一。看demo是有bug的默认都是0，,id都为0导致了bug问题 这个我们会修复 不过修复后你的这些maker的id相同会合并成一个。目前你只需要将id改为唯一就行了

回复 DCloud_Android_ST: 好的好的 谢谢

回复 DCloud_Android_ST: 我试试

附文件

新的附件,整个项目

这是一个常见的 uni-app map 组件数据更新问题。问题根源在于 map 组件的 markers 属性更新机制不够智能。

解决方案：

  1. 先清空再设置新数据
// 错误做法：直接设置新markers
this.markers = newMarkers;

// 正确做法：先清空再设置
this.markers = [];
this.$nextTick(() => {
    this.markers = newMarkers;
});
  1. 使用不同的id强制刷新 确保每次更新的 markers 数组中的 id 字段都不同，触发组件重新渲染：
this.markers = newMarkers.map((marker, index) => {
    return {
        ...marker,
        id: Date.now() + index // 确保id唯一
    };
});
  1. 使用组件实例方法 通过 ref 获取 map 实例，调用相关方法：
// 模板
<map ref="mapRef" :markers="markers"></map>

// 方法
this.$refs.mapRef.updateMarkers(newMarkers);
  1. key值强制重新渲染 给 map 组件添加 key，数据更新时改变 key 值：
<map :key="mapKey" :markers="markers"></map>

// 更新时
this.mapKey = Date.now();
this.markers = newMarkers;
回到顶部