uniapp h5 map key not configured如何解决

在uniapp开发H5页面时遇到报错"map key not configured"，应该怎么解决？我在manifest.json里已经配置了高德地图的key，但运行到H5端还是提示这个错误，请问还需要其他配置吗？

2 回复

在H5平台使用uni-app地图时，需要在manifest.json中配置腾讯地图或高德地图的key。具体路径：manifest.json → H5配置 → SDK配置 → 地图，选择服务商并填写申请到的key即可。


在 UniApp 中，H5 端使用地图组件时出现 “map key not configured” 错误，是因为未正确配置地图服务的密钥（如高德地图、腾讯地图等）。以下是解决方案：

配置步骤（以高德地图为例）：

  1. 获取地图密钥：

  2. 在 UniApp 项目中配置：

    • 打开 manifest.json 文件，选择 “App 模块配置”。
    • 勾选 “Maps” 模块，并选择 “高德地图”（或其他地图服务商）。
    • 在 “高德地图” 配置项中填写获取的 Key。

  3. 在页面中使用地图组件：

    • 确保 template 中正确使用 <map> 组件。
    • 示例代码：
      <template>
  <view>
    <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude"></map>
  </view>
</template>

      export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.39742
    };
  }
};

注意事项：

  • 仅 H5 平台：H5 端依赖 Web 地图服务，需单独配置 Web 端 Key。
  • 跨平台差异：App 端使用原生地图，H5 端使用 Web API，配置方式不同。
  • 域名白名单：在高德平台配置 Key 时，需将项目域名添加到白名单（如本地调试用 localhost）。

完成配置后重新运行项目，错误应会解决。

回到顶部