uni-app IOS端APP地图显示空白，相关地图API调用不成功

项目信息	详情
产品分类	uniapp/App
PC开发环境	Windows
PC操作系统版本	win10
HBuilderX类型	正式
HBuilderX版本	3.3.12
手机系统	iOS
手机系统版本	iOS 13.0
手机厂商	苹果
手机机型	iphone11
页面类型	nvue
Vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

操作步骤：

uni.getLocation()调用，success，fail，complete都不执行

预期结果：

uni.getLocation()调用成功

实际结果：

uni.getLocation()调用，success，fail，complete都不执行

bug描述：

IOS端地图API调用都不成功，使用的是高德地图key，年前的时候使用正常，key也是检查正常，切换到旧版本APP，地图API又可以调用了，新版本编译出来的APP就调用不了。

songsunli 1楼

在 uni-app 开发中，如果在 iOS 端遇到地图显示空白或相关地图 API 调用不成功的问题，可能是由于以下几个原因导致的。以下是一些常见的排查步骤和解决方案：

1. 检查地图 SDK 配置

确保在 manifest.json 中正确配置了地图 SDK（如高德地图、腾讯地图等）。

{
  "app-plus": {
    "maps": {
      "amap": {
        "ios": "你的高德地图 iOS Key"
      }
    }
  }
}

高德地图：需要在高德开放平台申请 iOS 的 Key。
腾讯地图：需要在腾讯位置服务申请 iOS 的 Key。

确保申请的 Key 与项目中的 Bundle ID 匹配。

2. 检查权限配置

iOS 需要获取定位权限才能正常显示地图。在 manifest.json 中配置以下权限：

{
  "app-plus": {
    "distribute": {
      "ios": {
        "permissions": {
          "NSLocationWhenInUseUsageDescription": "需要获取您的位置以显示地图"
        }
      }
    }
  }
}

确保在 Xcode 项目中，Info.plist 文件中也配置了相应的权限描述。

3. 检查网络请求

iOS 对网络请求有严格的安全限制，确保地图 API 的请求域名已添加到 manifest.json 的 networkTimeout 或 request 配置中。

{
  "networkTimeout": {
    "request": 60000,
    "connectSocket": 60000,
    "uploadFile": 60000,
    "downloadFile": 60000
  }
}

4. 检查地图组件代码

确保地图组件的代码正确，例如：

<template>
  <map
    id="map"
    :latitude="latitude"
    :longitude="longitude"
    :markers="markers"
    style="width: 100%; height: 300px;"
  ></map>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.39742,
      markers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          name: '北京'
        }
      ]
    };
  }
};
</script>

5. 检查 iOS 真机调试

在 iOS 真机上调试时，确保：

设备已开启定位服务。
应用已获取定位权限（可以在系统设置中检查）。
设备网络正常。

6. 检查地图 SDK 版本

确保使用的 uni-app 版本和地图 SDK 版本兼容。如果问题仍然存在，可以尝试更新 uni-app 或地图 SDK。

7. 查看控制台日志

在 Xcode 中运行项目，查看控制台日志是否有相关错误信息。常见的错误包括：

地图 Key 无效。
网络请求失败。
权限未获取。

8. 测试其他地图功能

如果地图显示正常但 API 调用失败，检查 API 的调用方式是否正确。例如，使用高德地图的 uni.getLocation 方法：

uni.getLocation({
  type: 'wgs84',
  success: (res) => {
    console.log('经度：' + res.longitude);
    console.log('纬度：' + res.latitude);
  },
  fail: (err) => {
    console.error('获取位置失败：', err);
  }
});