Vue 3 中如何对接高德地图

news2024/11/13 9:29:17

1. 准备工作

1.1. 获取高德地图 API Key

首先，你需要在高德开放平台注册并获取一个 API Key。访问高德开放平台注册并申请。

1.2. 安装依赖

在 Vue 3 项目中使用高德地图，可以通过以下步骤安装依赖：

npm install @types/amap-js-api --save-dev

这是为了给高德地图 API 提供 TypeScript 的类型定义。

2. 创建 Vue 组件

2.1. 创建 Map.vue 组件

在 `src/components` 目录下创建 `Map.vue` 文件，这是我们将要实现地图功能的组件。

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

解释：

<template> 标签内定义了组件的 HTML 结构。
id="mapContainer" 是地图容器的 ID，地图将渲染到这个容器中。
style 属性用于设置地图容器的宽高。

2.2. 添加地图初始化脚本

在 `Map.vue` 文件中，添加 `script` 部分：

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

// 高德地图 API Key
const amapKey = '你的高德地图 API Key';

// 初始化地图
const initMap = () => {
  // 确保高德地图 API 已经加载
  const script = document.createElement('script');
  script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${amapKey}`;
  script.async = true;
  script.onload = () => {
    // 高德地图 API 加载完成后的回调
    const map = new AMap.Map('mapContainer', {
      zoom: 10, // 设置地图的缩放级别
      center: [116.397428, 39.90923] // 设置地图的中心坐标
    });
  };
  document.head.appendChild(script);
};

// Vue 3 生命周期钩子，组件挂载后执行
onMounted(() => {
  initMap();
});
</script>

按照下面步骤获取高德地图的API key

解释：

import { onMounted } from 'vue'; 引入 Vue 3 的 onMounted 钩子，用于在组件挂载后执行代码。
const amapKey = '你的高德地图 API Key'; 替换为你在高德开放平台注册后获得的 API Key。
const script = document.createElement('script'); 创建一个新的 <script> 标签，用于引入高德地图的 API。
script.src 设置地图 API 的 URL，包括版本号和 API Key。
script.onload 指定 API 加载完成后的回调函数，用于初始化地图。
const map = new AMap.Map('mapContainer', {...}); 创建地图实例并配置中心点和缩放级别。
onMounted(() => { initMap(); }); 确保 initMap 在组件挂载后调用，初始化地图。

2.3. 样式设置

你可以在 `Map.vue` 文件内的 `<style>` 标签中添加地图样式，例如：

<style scoped>
#mapContainer {
  width: 100%;
  height: 500px;
}
</style>

3. 使用组件

在 `src/App.vue` 或其他需要使用地图的组件中，导入并使用 `Map.vue` 组件：

<template>
  <div id="app">
    <Map />
  </div>
</template>

<script setup>
import Map from './components/Map.vue';
</script>

解释：

import Map from './components/Map.vue'; 引入 Map.vue 组件。
<Map /> 使用 Map 组件并在页面上渲染地图。

4. 高级功能

高德地图提供了丰富的 API 和功能，例如标记、路线规划等。你可以在 `initMap` 函数中添加更多功能。

例如，添加一个标记：

const initMap = () => {
  // 确保高德地图 API 已经加载
  const script = document.createElement('script');
  script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${amapKey}`;
  script.async = true;
  script.onload = () => {
    // 高德地图 API 加载完成后的回调
    const map = new AMap.Map('mapContainer', {
      zoom: 10,
      center: [116.397428, 39.90923]
    });

    // 添加标记
    new AMap.Marker({
      position: [116.397428, 39.90923],
      map: map
    });
  };
  document.head.appendChild(script);
};