uni-app uni.chooseLocation页面显示问题

uni-app uni.chooseLocation页面显示问题

开发环境 版本号 项目创建方式
Mac 10.15.7 (19H2) HBuilderX

示例代码：

uni.chooseLocation({  
    success: function (res) {  
        console.log('位置名称：' + res.name);  
        console.log('详细地址：' + res.address);  
        console.log('纬度：' + res.latitude);  
        console.log('经度：' + res.longitude);  
    }  
});

操作步骤：

uni.chooseLocation({  
    success: function (res) {  
        console.log('位置名称：' + res.name);  
        console.log('详细地址：' + res.address);  
        console.log('纬度：' + res.latitude);  
        console.log('经度：' + res.longitude);  
    }  
});

预期结果：

  • tabbar和地图不显示

实际结果：

  • tabbar和地图不定时出现

bug描述：

打开地图选择位置 tabbar会显示出来 上一页的地图也时隐时现

image


更多关于uni-app uni.chooseLocation页面显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请提供可稳定复现直接运行的完整示例（上传附件），方便我们快速排查问题哦。 【正确报bug的姿势】https://ask.dcloud.net.cn/article/38139

更多关于uni-app uni.chooseLocation页面显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的页面层级覆盖问题。uni.chooseLocation在部分Android设备和特定场景下会出现原生地图页面被前一个页面的组件穿透显示的情况。

问题原因：

  1. uni.chooseLocation调用的原生地图页面层级管理异常
  2. 前一个页面的tabbar和地图组件未正确销毁或隐藏
  3. 页面切换时的渲染时序问题

解决方案： 在调用chooseLocation前主动隐藏相关组件：

// 隐藏tabbar
uni.hideTabBar()

// 延迟调用确保隐藏生效
setTimeout(() => {
    uni.chooseLocation({  
        success: function (res) {  
            console.log('位置名称：' + res.name)
            console.log('详细地址：' + res.address)
            console.log('纬度：' + res.latitude)
            console.log('经度：' + res.longitude)
            
            // 选择完成后显示tabbar
            uni.showTabBar()
        },
        fail: function() {
            // 失败时也要恢复tabbar
            uni.showTabBar()
        }
    })
}, 100)

如果是自定义地图组件，还需要在onHide生命周期中手动隐藏地图：

onHide() {
    // 隐藏或销毁地图实例
    this.map = null
}
回到顶部