uniapp 如何基于高德地图开发小程序、安卓app和ios app

最近在uniapp中集成高德地图开发多端应用时遇到了一些问题：

  1. 如何在高德地图官网申请适用于小程序、安卓和iOS的统一API key？是否需要分别申请不同平台的key？
  2. uniapp中引入高德地图SDK时，是否需要针对不同平台（微信小程序/安卓/iOS）做条件编译？有没有完整的配置示例？
  3. 地图功能（如定位、标记点、路线规划）在三端实现时有哪些常见兼容性问题？如何解决？
  4. 安卓和iOS打包时需要额外配置哪些地图相关权限和模块？求具体操作流程。
  5. 真机调试时遇到地图白屏或密钥错误，应该如何排查？
2 回复

使用uniapp开发地图应用，需集成高德地图SDK。步骤如下：

  1. 申请高德地图key
  2. 安装uni-app地图插件
  3. 配置manifest.json
  4. 使用map组件开发 支持三端运行，注意不同平台的配置差异。

在 UniApp 中基于高德地图开发小程序、安卓和 iOS 应用，可通过以下步骤实现：

1. 获取高德地图密钥

  • 访问高德开放平台，注册账号并创建应用。
  • 获取 Web 服务 API Key（用于小程序）和 Android/iOS 平台的 SDK Key。

2. 安装高德地图插件

在 UniApp 项目中，通过 npm 或 HBuilderX 插件市场安装高德地图相关插件，例如：

npm install [@amap](/user/amap)/amap-wx --save  # 小程序专用

或使用 UniApp 官方推荐的 uni-map 插件（支持多端）。

3. 配置平台密钥

  • 小程序端：在 manifest.json 中配置高德小程序 Key：
    "mp-weixin": {
  "appid": "你的小程序AppID",
  "setting": {
    "urlCheck": false
  },
  "plugins": {
    "amapPlugin": {
      "version": "1.0",
      "provider": "你的高德小程序Key"
    }
  }
}
  • App 端（Android/iOS）：在 manifest.json 的 App 模块配置中勾选“Maps”并填写高德 SDK Key：
    "app": {
  "modules": {
    "Maps": {
      "amap": {
        "appkey_android": "你的Android Key",
        "appkey_ios": "你的iOS Key"
      }
    }
  }
}

4. 编写地图组件代码

使用 map 组件或调用高德 SDK API，例如在 Vue 页面中：

<template>
  <view>
    <!-- 小程序和App通用地图组件 -->
    <map 
      :latitude="latitude" 
      :longitude="longitude" 
      :markers="markers"
      style="width: 100%; height: 300px;">
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.397,
      markers: [{
        latitude: 39.909,
        longitude: 116.397,
        title: '北京'
      }]
    }
  }
}
</script>

5. 处理多端差异

  • 小程序：需通过 amap-wx 插件实现复杂功能（如路线规划）。
  • App 端：直接使用 uni.createMapContext 调用原生地图能力。

6. 注意事项

  • 确保各平台密钥正确，并在高德平台绑定应用包名（Android）和 Bundle ID（iOS）。
  • 真机调试时，检查权限设置（如定位权限）。

通过以上步骤，可快速在 UniApp 中集成高德地图，实现跨端地图功能。

回到顶部