uni-app中nuve的map组件的polyline属性无法局部更改数据

uni-app中nuve的map组件的polyline属性无法局部更改数据

开发环境 版本号 项目创建方式
Windows 7 HBuilderX 
### 操作步骤：
- 新开一个页面,使用附件上的代码

### 预期结果：
- map应该更新视图

### 实际结果：
- 数据更新了,但是map没有更新视图

### bug描述：
- polylines使用Vue.set()无法更新map的视图
5 回复

Vue.set() 不能触发。这样来实现吧。 this.polylines = [{points:this.points}];

更多关于uni-app中nuve的map组件的polyline属性无法局部更改数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html


但是这样更新数据会导致整个polylines重新绘制,在数据量很大的时候,总不能为了更改局部的一小部分数据而重新绘制map组件里的所有polyline线段吧,这样越往后面加数据到polyline就会越卡,polygons其实也是同理,动态绘制的数据量越大越卡

回复 1***@qq.com: 现在提供的线的绘制没有id的概念，所以没办法做到动态绘制的能力，意思就是即便Vue.set()可以触发，到了原生层还是会先clear掉lines，再从新添加上去。

回复 DCloud_Android_THB: 关于绘制的性能的担忧只要transform的改变就会触发重新渲染，假设同屏内绘制100条线，修改其中一条线，整体也会触发一次刷新。

在 uni-app 中，<map> 组件的 polyline 属性用于绘制地图上的折线。polyline 是一个数组，数组中的每个元素代表一条折线。如果你想要局部更改 polyline 数据，通常需要更新整个 polyline 数组，因为 uni-app 的 map 组件并不支持直接局部更新 polyline 数据。

解决方法

  1. 更新整个 polyline 数组： 你可以通过创建一个新的 polyline 数组，然后将其赋值给 map 组件的 polyline 属性来实现更新。虽然这种方法会更新整个数组，但它是目前最直接的方式。

    <template>
  <map :polyline="polyline"></map>
</template>

<script>
export default {
  data() {
    return {
      polyline: [
        {
          points: [
            { latitude: 39.90469, longitude: 116.40717 },
            { latitude: 39.90469, longitude: 116.50717 }
          ],
          color: '#FF0000',
          width: 2
        }
      ]
    };
  },
  methods: {
    updatePolyline() {
      // 假设我们只想更新第一条折线的颜色
      const newPolyline = [...this.polyline];
      newPolyline[0].color = '#00FF00';

      // 更新整个 polyline 数组
      this.polyline = newPolyline;
    }
  }
};
</script>

  2. 使用 setData 方法： 如果你使用的是 uni-app 的 nvue 模式，你可以尝试使用 setData 方法来局部更新数据。不过，setData 通常用于更新页面的数据绑定，而不是直接更新组件属性。

    this.$set(this.polyline, 0, { ...this.polyline[0], color: '#00FF00' });

    这种方法可能会触发视图的重新渲染，但并不一定能直接更新 map 组件的 polyline 属性。

  3. 重新渲染 map 组件： 如果上述方法无法满足需求，你还可以通过重新渲染整个 map 组件来达到更新 polyline 的目的。可以通过给 map 组件绑定一个 key，并在需要更新时改变这个 key 值。

    <template>
  <map :polyline="polyline" :key="mapKey"></map>
</template>

<script>
export default {
  data() {
    return {
      polyline: [
        {
          points: [
            { latitude: 39.90469, longitude: 116.40717 },
            { latitude: 39.90469, longitude: 116.50717 }
          ],
          color: '#FF0000',
          width: 2
        }
      ],
      mapKey: 0
    };
  },
  methods: {
    updatePolyline() {
      // 更新 polyline 数据
      this.polyline[0].color = '#00FF00';

      // 更新 key 值，强制重新渲染 map 组件
      this.mapKey += 1;
    }
  }
};
</script>
回到顶部