uni-app 使用map组件调用腾讯地图正式环境显示空白
uni-app 使用map组件调用腾讯地图正式环境显示空白
| 项目信息 | 详情 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | Win10 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.4.8 |
| 手机系统 | 全部 |
| 页面类型 | vue |
| vue版本 | vue2 |
| 打包方式 | 离线 |
| 项目创建方式 | HBuilderX |
测试过的手机：
示例代码：
<map
style="width: 100%; height: 100%"
scale="mapScale"
latitude="latitude"
longitude="longitude"
markers="serviceStations"
></map>
data
markers: [],
mapScale: 13,
latitude: 28.227586,
longitude: 112.879219,操作步骤：
- 小程序、h5测试环境、开发环境正常显示
- 打包后app端运行的也是h5，但是正式环境突然空白了。
预期结果：
- 预期结果应该地图不论正式或者测试应该正常显示
实际结果：
- 正式环境显示空白
bug描述：
- 打包app后，正式环境是空白的
- 测试环境和开发环境均为正常，小程序端也是正常的
- 只有打包app后app端显示空白
5 回复
在 uni-app 中使用 map 组件调用腾讯地图时，如果正式环境显示空白，可能是由于以下几个原因导致的。以下是一些常见的排查步骤和解决方案：
1. 检查 map 组件的配置
确保在 pages.json 或页面的配置文件中正确配置了 map 组件。例如：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "Map",
"enablePullDownRefresh": false,
"usingComponents": {
"map": "/components/map/map"
}
}
}
]
}2. 检查腾讯地图的 Key 是否正确
腾讯地图需要配置有效的 key，确保在 map 组件中正确填写了腾讯地图的 key。例如：
<template>
<map
id="map"
:latitude="latitude"
:longitude="longitude"
:markers="markers"
:key="tencentMapKey"
style="width: 100%; height: 300px;"
></map>
</template>
<script>
export default {
data() {
return {
latitude: 39.90469, // 纬度
longitude: 116.40717, // 经度
markers: [], // 标记点
tencentMapKey: 'your-tencent-map-key' // 腾讯地图 Key
};
}
};
</script>注意：key 必须是有效的，且需要在腾讯地图开发者平台申请。
3. 检查域名白名单
腾讯地图的 key 需要绑定域名。确保在腾讯地图开发者平台中，将你的正式环境域名添加到白名单中。如果域名未绑定，地图将无法加载。
4. 检查网络请求
在正式环境中，地图数据是通过网络请求加载的。如果网络请求失败，地图将显示空白。可以通过浏览器的开发者工具（F12）检查是否有网络请求失败的情况。
5. 检查权限问题
确保在 manifest.json 中配置了必要的地图权限。例如：
{
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于地图定位"
}
}
}6. 检查地图组件的宽高
确保 map 组件的宽高设置正确。如果宽高为 0，地图将无法显示。例如：
<map style="width: 100%; height: 300px;"></map>7. 检查腾讯地图 SDK 是否正确引入
在 manifest.json 中，确保正确引入了腾讯地图的 SDK。例如：
{
"app-plus": {
"maps": {
"qqmap": {
"key": "your-tencent-map-key"
}
}
}
}