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页面切换到其他页面再返回时,地图组件状态未正确恢复。
解决方案:
- 在页面onHide/onShow生命周期中手动管理地图状态:
onShow() {
this.$refs.map && this.$refs.map.updateComponent();
},
onHide() {
// 保存当前地图状态
this.saveMapState();
}
- 使用v-if控制地图组件的显示,在页面显示时重新渲染:
<map v-if="showMap" ...></map>
- 在返回时重置地图位置:
methods: {
resetMapPosition() {
this.$refs.map.setCenter({
latitude: this.savedLat,
longitude: this.savedLng
});
}
}