vue-amap：Vue3 快速集成高德地图组件

技术 PRO 稿源：前端资源推荐 2025-06-12 09:44

文章来自公众号：前端资源推荐

vue-amap 是一套基于 Vue 3 和高德地图 2.0 的地图组件库。为开发者提供了便捷的方式来集成高德地图功能到项目中。通过封装高德地图的 API，vue-amap 提供了简洁的 Vue 驱动方式，让开发者可以享受 Vue 的开发体验，同时快速实现地图功能。

特点介绍：

1. Vue 驱动：享受 Vue 的开发体验，只需要关注数据变化。@vuemap/vue-amap 利用 Vue 的响应式系统，使得地图的更新和交互更加自然和高效。

2. 可自定义：提供多个接口开发原生对象，方便快速实现自定义功能。开发者可以通过这些接口，轻松扩展和自定义地图组件，满足特定的业务需求。

3. 完善 TypeScript 支持

基于官方 types 文件完善，提供本地化的 types。这使得使用 TypeScript 的开发者能够获得更好的类型支持和开发体验。

4. 多库支持

除了基础地图功能，还提供了扩展库支持，如 Loca 和 Three.js，以满足更复杂的地图可视化需求。

安装使用：

// 安装基础地图库 npm install @vuemap/vue-amap --save // 安装 Loca 库（可选） npm install @vuemap/vue-amap-loca --save // 安装扩展库（Three.js，可选） npm install @vuemap/vue-amap-extra --save

引入组件：

import App from'./App.vue' import VueAMap, {initAMapApiLoader} from'@vuemap/vue-amap'; import VueAMapLoca from'@vuemap/vue-amap-loca'; import VueAMapExtra from'@vuemap/vue-amap-extra'; import'@vuemap/vue-amap/dist/style.css' initAMapApiLoader({ key: 'YOUR_KEY', securityJsCode: 'securityJsCode', // 新版key需要配合安全密钥使用 Loca:{ version: '2.0.0' } }) createApp(App).use(VueAMap).use(VueAMapLoca).use(VueAMapExtra).mount('#app')

功能特性：

地图显示：支持高德地图的基本显示功能，包括地图的缩放、拖拽等。

地理定位：提供地理定位功能，可以获取用户当前位置。

路径规划：支持路径规划功能，可以显示从起点到终点的路线。

地图标注：支持在地图上添加标注，用于标记特定位置。

多种地图类型：支持多种地图类型，如普通地图、卫星地图等。

扩展库支持：支持 Loca 和 Three.js 等扩展库，满足复杂的地图可视化需求。

部分属性 API：

项目地址

Gitee：https://gitee.com/guyangyang/vue-amap

官方文档：https://vue-amap.guyixi.cn/

0XU.CN