vue-amap：Vue3 快速集成高德地圖組件

技術(shù) PRO 稿源：前端資源推薦 2025-06-12 09:44

文章來自公眾號(hào)：前端資源推薦

vue-amap 是一套基于 Vue 3 和高德地圖 2.0 的地圖組件庫。為開發(fā)者提供了便捷的方式來集成高德地圖功能到項(xiàng)目中。通過封裝高德地圖的 API，vue-amap 提供了簡潔的 Vue 驅(qū)動(dòng)方式，讓開發(fā)者可以享受 Vue 的開發(fā)體驗(yàn)，同時(shí)快速實(shí)現(xiàn)地圖功能。

特點(diǎn)介紹：

1. Vue 驅(qū)動(dòng)：享受 Vue 的開發(fā)體驗(yàn)，只需要關(guān)注數(shù)據(jù)變化。@vuemap/vue-amap 利用 Vue 的響應(yīng)式系統(tǒng)，使得地圖的更新和交互更加自然和高效。

2. 可自定義：提供多個(gè)接口開發(fā)原生對(duì)象，方便快速實(shí)現(xiàn)自定義功能。開發(fā)者可以通過這些接口，輕松擴(kuò)展和自定義地圖組件，滿足特定的業(yè)務(wù)需求。

3. 完善 TypeScript 支持

基于官方 types 文件完善，提供本地化的 types。這使得使用 TypeScript 的開發(fā)者能夠獲得更好的類型支持和開發(fā)體驗(yàn)。

4. 多庫支持

除了基礎(chǔ)地圖功能，還提供了擴(kuò)展庫支持，如 Loca 和 Three.js，以滿足更復(fù)雜的地圖可視化需求。

安裝使用：

//?安裝基礎(chǔ)地圖庫 npm?install?@vuemap/vue-amap?--save //?安裝?Loca?庫（可選） npm?install?@vuemap/vue-amap-loca?--save //?安裝擴(kuò)展庫（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')

功能特性：

地圖顯示：支持高德地圖的基本顯示功能，包括地圖的縮放、拖拽等。

地理定位：提供地理定位功能，可以獲取用戶當(dāng)前位置。

路徑規(guī)劃：支持路徑規(guī)劃功能，可以顯示從起點(diǎn)到終點(diǎn)的路線。

地圖標(biāo)注：支持在地圖上添加標(biāo)注，用于標(biāo)記特定位置。

多種地圖類型：支持多種地圖類型，如普通地圖、衛(wèi)星地圖等。

擴(kuò)展庫支持：支持 Loca 和 Three.js 等擴(kuò)展庫，滿足復(fù)雜的地圖可視化需求。

部分屬性 API：

項(xiàng)目地址

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

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

0XU.CN