uni-app使用V3编译器后，map组件中无法实时呈现polyline路线

uni-app使用V3编译器后，map组件中无法实时呈现polyline路线

以前使用HBuliderX2.5.1非V3模式开发，可以实现地图polyline实时绘制、实时呈现；但是目前HBuilderX2.8.3采用V3编译器后，无法实时加载路线，需要手动刷新才会加载，详见附件录屏

============

polyline: [{  
    points: [],  
    color: "#00ff7f",  
    width: 8,  
}],

that.polyline[0].points.push({  
    latitude: point.latitude,  
    longitude: point.longitude  
});

Screenrecorder-2020-07-29-16-10-29-226(0)(0).zip


更多关于uni-app使用V3编译器后，map组件中无法实时呈现polyline路线的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这个不是bug，vue不能检测到JS 数组和对象的变化，参考https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9， push的问题可以用计算属性处理，参考 https://ask.dcloud.net.cn/question/91041

更多关于uni-app使用V3编译器后，map组件中无法实时呈现polyline路线的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在V3编译器下，map组件的polyline数据更新确实存在渲染机制变化的问题。这是由于V3编译器对数据响应式处理方式的调整导致的。

解决方案建议：

  1. 直接重新赋值整个polyline数组而非修改其内部元素：
that.polyline = [{
    points: [...that.polyline[0].points, {
        latitude: point.latitude,
        longitude: point.longitude
    }],
    color: "#00ff7f",
    width: 8
}];
  1. 或者使用$set强制更新：
that.$set(that.polyline[0], 'points', [
    ...that.polyline[0].points,
    {latitude: point.latitude, longitude: point.longitude}
]);
  1. 如果仍无效，可以尝试在数据更新后调用map组件的update方法：
this.$nextTick(() => {
    this.$refs.map.update()
});
回到顶部