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);
};
解释：
-
new AMap.Marker({...}) 创建一个新的标记并将其添加到地图上。
总结
通过上述步骤，你可以在 Vue 3 项目中成功集成高德地图。你可以根据需求扩展地图功能，例如添加标记、绘制路径等。
