uniapp 高德地图如何使用

在uniapp中如何集成高德地图？需要哪些配置步骤？能否提供一个简单的示例代码展示地图的初始化和标记点功能？官方文档看了还是不太明白具体操作流程。

2 回复

在uniapp中使用高德地图，需先申请高德地图key，然后在manifest.json中配置。使用map组件，设置longitude、latitude等属性即可显示地图。


在 UniApp 中使用高德地图，可以通过以下步骤实现：

1. 引入高德地图 SDK

  • 在 manifest.json 中添加高德地图配置：
    {
  "app-plus": {
    "modules": {
      "Maps": {
        "provider": "amap"
      }
    },
    "distribute": {
      "sdkConfigs": {
        "maps": {
          "amap": {
            "appkey_ios": "你的iOS AppKey",
            "appkey_android": "你的Android AppKey"
          }
        }
      }
    }
  }
}
    需在高德开放平台申请 AppKey（分 iOS 和 Android）。

2. 使用地图组件

在页面中通过 <map> 组件调用高德地图：

<template>
  <view>
    <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: [{
        id: 1,
        latitude: 39.909,
        longitude: 116.397,
        title: '北京市'
      }]
    };
  }
};
</script>

3. 常用功能

  • 定位：使用 uni.getLocation 获取当前位置：
    uni.getLocation({
  type: 'gcj02', // 高德坐标系
  success: (res) => {
    this.latitude = res.latitude;
    this.longitude = res.longitude;
  }
});
  • 添加标记：通过 markers 数组配置标记点。
  • 地图控件：设置 show-location 显示定位按钮。

4. 注意事项

  • 确保 AppKey 正确，且包名与高德平台配置一致。
  • 真机调试需打包测试（部分功能模拟器不支持）。

通过以上步骤即可在 UniApp 中快速集成高德地图的基础功能。

回到顶部