uni-app uni.chooseLocation 高德地图组件 渲染不全

uni-app uni.chooseLocation 高德地图组件 渲染不全

示例代码：

// 这里请求定位
uni.getLocation({
type: 'wgs84',
success: (res) => {
uni.chooseLocation({
latitude: res.latitude,
longitude: res.longitude,
useSecureNetwork:true,
success: (res) => {
formData.value.detailAddr = res.address;
formData.value.lat = res.latitude;
formData.value.lon = res.longitude;
}  
})  
}  
})

操作步骤：

  • uni.chooseLocation打开地图

预期结果：

  • 地图正确渲染

实际结果：

  • 地图为正确渲染

bug描述：

使用uni.chooseLocation时，高德地图组件 渲染不全，无具体地图详情

Image

信息类别 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 11 专业版
HBuilderX类型 正式
HBuilderX版本号 4.87
浏览器平台 Firefox
浏览器版本 146.0
项目创建方式 HBuilderX

更多关于uni-app uni.chooseLocation 高德地图组件 渲染不全的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

该bug反馈内容不完整，缺少关键信息：未明确说明运行平台（App/Web/小程序），未提供manifest.json中地图配置详情，未描述"渲染不全"的具体现象（如空白/部分显示），且实际结果描述存在矛盾（"地图为正确渲染"应指未正确渲染）。代码示例缺少错误处理(fail回调)和完整上下文，无法直接复现。
根据知识库分析，此问题很可能不成立：

App端使用uni.chooseLocation需配置高德地图AppKey（manifest配置指南）
自2024年7月18日起腾讯地图gcj02接口下线，但用户HBuilderX 4.87版本已高于要求的uni-app 4.24版
知识库明确提示：“manifest中配置好自己的地图厂商key…自定义基座和打包后异常，都是这个原因”（三方定位说明）

属于基础配置问题而非框架bug。建议用户：

确认运行平台（App端需高德地图配置）
检查manifest.json是否配置高德AppKey
验证高德开放平台是否开通"周边搜索"权限
补充完整复现步骤和错误截图

相关文档：地图组件服务商说明 | H5端地图配置 内容为 AI 生成，仅供参考

更多关于uni-app uni.chooseLocation 高德地图组件 渲染不全的实战教程也可以访问 https://www.itying.com/category-93-b0.html


未明确说明运行平台（App/Web/小程序）： 上面已反馈 是web H5 火狐浏览器 未描述"渲染不全"的具体现象：附件截图有 代码刚加上fail了，并未进入fail。console中有浏览器脚本报错，看起来像是uni-app包里面 的错误 // 这里请求定位 uni.getLocation({ type: ‘wgs84’, success: (res) => { uni.chooseLocation({ latitude: res.latitude, longitude: res.longitude, useSecureNetwork:true, success: (res) => { formData.value.detailAddr = res.address; formData.value.lat = res.latitude; formData.value.lon = res.longitude;
},fail(res){
console.log(res)
}

            })  
        },  
        fail(res){  
            console.log(res)  
        }  
    })

检查manifest.json是否配置高德AppKey 这个提问题时已经上传配置了，上面写的仅管理员可见； 我认为不是这个配置的问题，定位和附近搜索都可以用，但是地图加载不出来

这个页面也是调用uni.chooseLocation弹出的，应该是你们内置包的页面，不是我开发的页面

而且每次移动地图坐标，console就会出现黄色提醒

根据你的描述和截图，uni.chooseLocation 在高德地图组件中渲染不全，这通常与H5平台下地图容器的样式或初始化时机有关。

主要原因：

  1. CSS样式问题：地图容器可能被父元素样式影响（如overflow:hidden、z-index层级过低、宽高异常等）。
  2. 渲染时机问题：地图在DOM未完全渲染或隐藏状态下初始化，导致计算错误。

解决方案：

1. 检查并修复容器样式 确保地图容器有明确的宽高，且未被遮挡：

/* 全局样式检查 */
uni-map, .map-container {
  width: 100vw !important;
  height: 100vh !important;
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 9999;
}

2. 延迟调用地图 在onReady或nextTick中调用，确保DOM就绪：

setTimeout(() => {
  uni.chooseLocation({
    latitude: res.latitude,
    longitude: res.longitude,
    success: (res) => {
      // 处理结果
    }
  });
}, 300);
回到顶部