uni-app nvue中map的polyline无法清除

uni-app nvue中map的polyline无法清除

开发环境信息

类别 信息
PC操作系统 Windows
操作系统版本 Windows 10 家庭中文版 20H2
IDE HBuilderX
IDE版本 3.1.18
手机系统 Android
手机系统版本 Android 9.0
手机厂商 华为
手机型号 荣耀9（STF-AL10）

示例代码：

this.$set(this.$data, 'markers', []);
// this.$set(this.$data, 'polyline', []);
this.polyline = [];
this.polyline.slice(0);
console.log('polyline',this.polyline);

操作步骤：

在nvue的map界面中生成一条polyline，再清楚该polyline。

预期结果：

地图上绘制的polyline消失。

实际结果：

地图上绘制的polyline依旧存在。

bug描述：

map 使用polyline，polyline为空时无法清除上次绘制好的路线；无法清除，无法重置。


更多关于uni-app nvue中map的polyline无法清除的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

请问你解决了吗？

更多关于uni-app nvue中map的polyline无法清除的实战教程也可以访问 https://www.itying.com/category-93-b0.html


this.polyline = [{ color: ‘#007aff’, width: 4, points:[] }]; 设置一个包含属性但points为空数组的polyline可以清除旧polyline。

回复 冠越灵: 不知道怎么回事我这用这个方法不行 我的需求是如果当前数据有起点和终点的经纬度 就进行画线 如果只有起点经纬度 就不画线 我的碰到的问题是我先选中有起点终点经纬度的选项 我在选中没有终点经纬度的选项 上一个的线并没有清除掉

this.polyline = [{
color: ‘#007aff’,
width: 4,
points:[]
}];
设置一个包含属性但points为空数组的polyline可以清除旧polyline。 但是还是希望官方可以尽快解决一下这个问题，可以通过设置polyline为空数组来置空

刚解决 用 uni.createMapContext(‘map’, this) 渲染下个的时候 初始化下地图

在 nvue 的 map 组件中，polyline 数据更新后视图未同步是已知问题。直接修改数组或使用 this.polyline = [] 无法触发组件更新。建议通过以下方式解决：

  1. 使用 $set 方法（你已注释的方案）：
this.$set(this.$data, 'polyline', []);
  1. 强制触发视图更新： 若 $set 无效，可临时修改数组引用后重置：
this.polyline = [{ points: [] }]; // 先置空内容
this.$nextTick(() => {
  this.polyline = [];
});
  1. 通过 key 强制重渲染（终极方案）：
<map :key="mapKey" ...></map>

// 清除时重新生成 key
this.mapKey = Date.now();
回到顶部