uniapp开发app时高德地图logo显示了但地图显示黑色是什么原因

在uniapp开发app时，使用了高德地图，地图的logo能正常显示，但地图区域却显示为黑色，这是什么原因导致的？已经确认key配置正确，权限也正常开启了，但地图就是无法正常渲染。请问有遇到过类似问题的吗？该如何解决？

2 回复

可能是地图容器未正确初始化或样式问题。检查地图组件宽高是否设置，确保在onReady生命周期中初始化地图。也可能是key配置错误或网络问题。


在UniApp开发中，高德地图显示黑色但Logo可见，通常由以下原因导致：

  1. 未正确配置AppKey或权限

    • 检查高德地图开放平台是否申请正确的AppKey（确保选择“Android/iOS平台”而非Web端）。
    • 在 manifest.json 中正确配置：
      "app-plus": {
    "modules": {
        "Maps": {
            "AMap": {
                "appkey_android": "你的Android端AppKey",
                "appkey_ios": "你的iOS端AppKey"
            }
        }
    }
}
    • 在项目中添加定位权限（Android需在 manifest.json 的 permissions 中声明 "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>"）。

  2. 地图容器样式问题
    确保地图组件设置了宽高，例如：

    <template>
  <view class="map-container">
    <map style="width: 100%; height: 300px;"></map>
  </view>
</template>

  3. 初始化时机或网络问题

    • 地图组件需在页面加载完成后渲染，可尝试在 onReady 生命周期中初始化。
    • 检查设备网络是否正常，地图数据需要联网加载。

  4. SDK配置错误

    • 确认高德地图SDK已正确集成（UniApp默认包含，但需检查自定义基座或原生插件冲突）。

解决步骤：

  1. 核对AppKey与平台匹配。
  2. 添加必要权限并重新打包自定义基座。
  3. 确保地图组件样式宽高有效。
  4. 真机测试排除模拟器兼容问题。

若问题持续，查看高德开发者平台控制台，确认Key是否欠费或调用异常。

回到顶部