uni-app 使用 uni.chooseLocation 时显示不出来地址列表

发布于 1周前 作者 eggper 来自 Uni-App

uni-app 使用 uni.chooseLocation 时显示不出来地址列表

产品分类

uniapp/App

示例代码

uni.chooseLocation({  
    success(res){  
        // that.$utils.getposistion(false,true,`${res.longitude},${res.latitude}`).then(add=>{  
        //  that.formdata.region = `${add.province||''}-${add.city||''}-${add.district||''}`  
        //  that.formdata.province_name = add.province||''  
        //  that.formdata.city_name = add.city||''  
        //  that.formdata.district_name = add.district||''  
        //  that.formdata.address = `${res.address} ${res.name}`  
        //  uni.hideLoading()   
        // }).catch(err=>{  
        //  uni.hideLoading()  
        // })  
    },  
    fail() {  
        uni.hideLoading()  
    }  
})

操作步骤

调用uni.chooseLocation

预期结果

调用成功,显示地址列表

实际结果

地址列表不显示

bug描述

使用 uni.chooseLocation 时 显示不出来地址列表 ,但是定位的位置是正确的,在web和小程序端都正常。

配置的高德地图

截图

控制台报错

[JS Framework] Failed to execute the callback function:
TypeError: Cannot read property 'pageIndex' of null
reportJSException >>> exception function:WEEX_CALL_JAVASCRIPT, exception:JavaScript execute error!Uncaught TypeError: Cannot read property 'pageIndex' of null
at  (/__uniappchooselocation.js.nvue:1:25432)

开发环境信息

项目创建方式 HBuilderX
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 10 专业版 22H2
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 Android
手机系统版本号 Android 13
手机厂商 魅族
手机机型 18s
页面类型 vue
vue版本 vue2
打包方式 云端

3 回复

解决了,是因为安卓和ios的高德key ,写反了,安卓key写成ios的了,但控制台的报错属实看不懂


问题有没解决同样的问题

在使用 uni-app 开发应用时,如果遇到 uni.chooseLocation 调用后无法显示地址列表的问题,通常可能是由于权限设置、API调用方式或环境配置不当导致的。以下是一些常见的排查步骤和代码示例,帮助你定位和解决问题。

1. 确认权限配置

确保你的应用已经在 manifest.json 中配置了必要的地理位置权限。对于微信小程序等平台,需要在对应的后台管理界面开启地理位置权限。

// manifest.json
{
  "mp-weixin": { // 微信小程序配置示例
    "appid": "your-app-id",
    "setting": {
      "permission": {
        "scope.userLocation": {
          "desc": "你的位置信息将用于小程序定位功能"
        }
      }
    }
  }
}

2. 调用 uni.chooseLocation 的正确方式

确保 uni.chooseLocation 是在用户触发的事件中调用,比如按钮点击事件。以下是一个简单的调用示例:

// 页面脚本
Page({
  data: {},
  onLoad: function () {},
  chooseLocation: function () {
    uni.chooseLocation({
      success: function (res) {
        console.log('Location chosen:', res);
        // 处理选中的位置信息
      },
      fail: function (err) {
        console.error('Failed to choose location:', err);
        // 处理失败情况,如提示用户检查权限设置
      }
    });
  }
});

// 页面模板
<template>
  <view>
    <button @click="chooseLocation">选择位置</button>
  </view>
</template>

3. 检查平台差异

不同平台(如微信小程序、H5、App等)在调用 uni.chooseLocation 时可能有不同的行为表现。确保你了解并处理了这些差异。例如,在H5平台上,uni.chooseLocation 可能不直接支持,需要使用其他方式(如HTML5 Geolocation API)实现类似功能。

4. 调试和日志

利用开发者工具的调试功能,查看控制台输出,检查是否有权限拒绝或API调用失败的错误信息。这些信息可以帮助你更精确地定位问题。

5. 更新和兼容性

确保你的 uni-app 和相关依赖库都是最新版本,以避免已知的bug影响功能。同时,检查官方文档和社区,看是否有关于此API的最新更新或兼容性说明。

通过上述步骤,你应该能够诊断并解决 uni.chooseLocation 显示不出来地址列表的问题。如果问题依旧存在,可能需要更详细的日志信息或向官方社区求助。

回到顶部