tabbar nvue页面谷歌地图初次正常 进入其他页面返回 地图标记点 返回原点等所有操作都失效 地图定位到其他位置

tabbar nvue页面谷歌地图初次正常 进入其他页面返回 地图标记点 返回原点等所有操作都失效 地图定位到其他位置

开发环境 版本号 项目创建方式
Mac 15.1 HBuilderX

产品分类:uniapp/App

PC开发环境操作系统:Mac

HBuilderX类型:正式

HBuilderX版本号:4.56

手机系统:Android

手机系统版本号:Android 13

手机厂商:vivo

手机机型:x70t

页面类型:vue

vue版本:vue2

打包方式:云端

操作步骤:

tabbar nvue页面谷歌地图初次正常 进入其他页面返回  地图标记点 返回原点等所有操作都失效 地图定位到其他位置  

预期结果:

tabbar nvue页面谷歌地图初次正常 进入其他页面返回  地图也正常

实际结果:

tabbar nvue页面谷歌地图初次正常 进入其他页面返回  地图标记点 返回原点等所有操作都失效 地图定位到其他位置  

bug描述:

tabbar nvue页面谷歌地图初次正常 进入其他页面返回  地图标记点 返回原点等所有操作都失效 地图定位到其他位置  

2 回复

nvue页面已经不再维护,可以考虑在vue页面使用腾讯地图代替。


这是一个典型的Google Maps在nvue页面生命周期管理的问题。当从tabbar页面切换到其他页面再返回时,地图组件状态未正确恢复。

解决方案:

  1. 在页面onHide/onShow生命周期中手动管理地图状态:
onShow() {
    this.$refs.map && this.$refs.map.updateComponent();
},
onHide() {
    // 保存当前地图状态
    this.saveMapState();
}
  1. 使用v-if控制地图组件的显示,在页面显示时重新渲染:
<map v-if="showMap" ...></map>
  1. 在返回时重置地图位置:
methods: {
    resetMapPosition() {
        this.$refs.map.setCenter({
            latitude: this.savedLat,
            longitude: this.savedLng
        });
    }
}
回到顶部