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
![](https://i-blog.csdnimg.cn/direct/457daf4c98104c6ca62d47f007d04bf6.png)
![](https://i-blog.csdnimg.cn/direct/71bba6f10faf4ad8857098edaaa8a21a.png)
![](https://i-blog.csdnimg.cn/direct/64f5f1acd2ee4a0886efe24f2de39cb6.png)
![](https://i-blog.csdnimg.cn/direct/c98299b21d2b4a0c8a088d20ea9b3ddc.png)
解释:
-
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 项目中成功集成高德地图。你可以根据需求扩展地图功能,例如添加标记、绘制路径等。