uniapp 如何使用高德地图进行开发

在uniapp中集成高德地图进行开发时，具体步骤是什么？需要配置哪些参数？如何获取高德地图的API key？在开发过程中有哪些常见问题需要注意？是否支持H5和小程序平台？

2 回复

在uniapp中使用高德地图，需先申请高德地图key，然后在manifest.json中配置。使用map组件，通过js API调用定位、搜索等功能。注意跨平台兼容性，部分功能需条件编译。


在 UniApp 中使用高德地图进行开发，主要通过引入高德地图的 JavaScript SDK 或使用 UniApp 的 <map> 组件结合高德地图服务来实现。以下是具体步骤和示例：

1. 使用 UniApp 内置 <map> 组件（简单集成）

UniApp 提供了原生 <map> 组件，默认支持高德地图（在微信小程序中需配置）。适用于基础地图展示和简单交互。

步骤：

  • 在 pages.json 中配置地图权限（如需要）。
  • 在页面中使用 <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>

2. 使用高德地图 JavaScript SDK（功能更丰富）

适用于需要高级功能（如路径规划、地理编码等）的 H5 端开发。

步骤：

  1. 申请高德地图 Key：

  2. 在 UniApp 中引入 SDK：

    • 在 index.html（H5 端）或通过 npm 安装（如使用 vue-amap）。

示例代码（H5 端）：

<!-- 在 index.html 中引入 -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德Key"></script>

<template>
  <view>
    <div id="mapContainer" style="width: 100%; height: 300px;"></div>
  </view>
</template>

<script>
export default {
  mounted() {
    // 仅 H5 端生效
    if (typeof window !== 'undefined' && window.AMap) {
      const map = new AMap.Map('mapContainer', {
        zoom: 10,
        center: [116.397, 39.909]
      });
      // 添加标记
      const marker = new AMap.Marker({
        position: [116.397, 39.909]
      });
      map.add(marker);
    }
  }
};
</script>

3. 平台差异处理

  • 小程序端：需在微信小程序后台配置高德地图域名（如 https://restapi.amap.com），并使用 <map> 组件。
  • App 端：可通过 WebView 嵌入 H5 地图或使用原生插件（如官方推荐的 amap-location 插件）。

注意事项

  • 密钥安全：避免在前端代码硬编码 Key，建议通过服务器代理请求。
  • 跨平台兼容：使用条件编译区分 H5、小程序和 App 端。
  • 性能优化：大量标记时使用点聚合功能。

通过以上方法，可快速在 UniApp 中集成高德地图，并根据需求选择合适方案。

回到顶部