uniapp项目中如何完整使用高德地图组件（附完整代码）

在uniapp项目中集成高德地图组件时遇到了问题，按照官方文档配置后地图无法正常显示。求教完整的实现步骤，包括：

  1. 如何正确申请和配置高德地图Key？
  2. uniapp中需要安装哪些依赖？
  3. 能否提供地图显示、标记点、路线规划等功能的完整示例代码？
  4. 是否需要特殊处理跨平台（iOS/Android/H5）的兼容性问题？
    遇到控制台报错"INVALID_USER_SCODE"该如何解决？希望附上可运行的demo代码片段。
2 回复

在uniapp中使用高德地图组件步骤：

  1. 安装高德地图插件
npm install @dcloudio/uni-mp-amap
  1. 在pages.json中配置
{
  "pages": [
    {
      "path": "pages/map/map",
      "style": {
        "navigationBarTitleText": "地图",
        "mp-amap": {
          "sdkKey": "你的高德地图key"
        }
      }
    }
  ]
}
  1. 页面中使用
<template>
  <view>
    <map 
      id="myMap"
      style="width:100%;height:300px;"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
    ></map>
  </view>
</template>

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

记得在高德地图官网申请key并配置安全域名。


在 UniApp 中完整使用高德地图组件，可以通过以下步骤实现。这里以 Vue 3 语法为例，提供完整代码和说明。

步骤 1：注册高德地图并获取 Key

  1. 访问高德开放平台（https://lbs.amap.com/），注册账号并创建应用。
  2. 获取 Web 端 Key（选择“Web 服务”类型），记下该 Key。

步骤 2：在 UniApp 项目中安装和配置

  • 如果使用 HBuilder X 创建项目，确保项目支持 Vue 3。
  • 在 manifest.json 中配置高德地图：
    {
  "h5": {
    "sdkConfigs": {
      "maps": {
        "amap": {
          "key": "你的高德地图 Key"
        }
      }
    }
  }
}
    注意：高德地图主要支持 H5 和 App 平台，小程序端需使用其他方案（如微信小程序地图）。

步骤 3：创建地图组件页面

在页面文件中（如 map.vue），添加以下完整代码：

<template>
  <view class="map-container">
    <!-- 高德地图组件 -->
    <map
      id="myMap"
      :latitude="latitude"
      :longitude="longitude"
      :scale="scale"
      :markers="markers"
      @markertap="onMarkerTap"
      class="map"
    ></map>
    <!-- 控制按钮 -->
    <view class="controls">
      <button @click="moveToLocation">移动到当前位置</button>
      <button @click="addMarker">添加标记</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 地图中心坐标（示例：北京）
const latitude = ref(39.90923);
const longitude = ref(116.397428);
const scale = ref(14); // 缩放级别

// 标记点数组
const markers = ref([
  {
    id: 1,
    latitude: 39.90923,
    longitude: 116.397428,
    title: '天安门',
    iconPath: '/static/marker.png' // 可选自定义图标
  }
]);

// 标记点击事件
const onMarkerTap = (e) => {
  console.log('标记被点击:', e.markerId);
  uni.showToast({
    title: `点击标记: ${markers.value.find(m => m.id === e.markerId)?.title}`,
    icon: 'none'
  });
};

// 移动到当前位置（需获取用户位置权限）
const moveToLocation = () => {
  uni.getLocation({
    type: 'gcj02', // 高德坐标系
    success: (res) => {
      latitude.value = res.latitude;
      longitude.value = res.longitude;
      markers.value.push({
        id: Date.now(),
        latitude: res.latitude,
        longitude: res.longitude,
        title: '我的位置'
      });
    },
    fail: (err) => {
      console.error('获取位置失败:', err);
      uni.showToast({ title: '定位失败', icon: 'none' });
    }
  });
};

// 添加新标记
const addMarker = () => {
  const newMarker = {
    id: Date.now(),
    latitude: latitude.value + 0.005, // 偏移一点
    longitude: longitude.value + 0.005,
    title: '新标记'
  };
  markers.value.push(newMarker);
};

// 页面加载后初始化
onMounted(() => {
  // 可添加地图加载后的自定义逻辑
  console.log('地图页面加载完成');
});
</script>

<style scoped>
.map-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.map {
  width: 100%;
  flex: 1;
}
.controls {
  padding: 20rpx;
  display: flex;
  justify-content: space-around;
}
button {
  padding: 10rpx 20rpx;
  font-size: 28rpx;
}
</style>

步骤 4：运行和测试

  • H5 平台：在浏览器中运行，确保 manifest.json 中的 Key 正确。
  • App 平台：需在 manifest.json 的 App 模块配置中勾选“Maps”并设置高德 Key（具体参考 UniApp 文档）。
  • 获取用户位置时，在真机上测试需处理权限问题。

注意事项

  • 坐标系：高德使用 GCJ-02 坐标系，确保 uni.getLocation 的 type 设置为 'gcj02'。
  • 平台差异：小程序端不支持高德地图，需用 <map> 组件（腾讯系坐标系）。
  • 性能：标记点过多时可能影响性能，建议使用聚类或分页。

以上代码提供了基础地图显示、标记、交互和定位功能。根据实际需求扩展，如添加多边形、路线规划等。

回到顶部