uni-app nvue页面map中心点不更新

uni-app nvue页面map中心点不更新

示例代码：

<map :latitude="latitude" :longitude="longitude"></map>
const _this = this;
uni.getLocation({
type: 'gcj02',
success(res) {
console.log(res)
_this.latitude = res.latitude;
_this.longitude = res.longitude;
},
fail() {}
});

操作步骤：

按照上述代码在nvue页面中执行

预期结果：

希望可以直接将当前位置作为中心点

实际结果：

没有将当前位置作为中心点

bug描述：

在nvue页面中使用map想一键定位到当前位置，通过uni.getLocation重新给latitude和longitude赋值之后，无法将中心点定位到当前位置。


更多关于uni-app nvue页面map中心点不更新的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

用 mapconetxt 的 moveToLocation 这个方法：https://uniapp.dcloud.net.cn/api/location/map.html#mapcontext

更多关于uni-app nvue页面map中心点不更新的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的，多谢

这个参数不是响应的，只有在地图创建的时候才会使用

在nvue页面中，map组件的中心点更新需要特殊处理。nvue的map组件在数据更新后不会自动重新渲染，需要手动触发更新。

解决方案：

  1. 使用ref获取map实例，通过updateLocation方法强制更新：
<map ref="map" :latitude="latitude" :longitude="longitude"></map>

const _this = this;
uni.getLocation({
    type: 'gcj02',
    success(res) {
        _this.latitude = res.latitude;
        _this.longitude = res.longitude;
        
        // 手动触发map更新
        _this.$nextTick(() => {
            _this.$refs.map.updateLocation({
                latitude: res.latitude,
                longitude: res.longitude
            });
        });
    },
    fail() {}
});
  1. 如果上述方法无效，可以尝试使用setTimeout延迟更新：
success(res) {
    _this.latitude = res.latitude;
    _this.longitude = res.longitude;
    
    setTimeout(() => {
        _this.$refs.map.updateLocation({
            latitude: res.latitude,
            longitude: res.longitude
        });
    }, 100);
}
回到顶部