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

技術(shù) 2025-06-12 09:44

聲明：該文章來自（前端資源推薦）版權(quán)由原作者所有，K2OS渲染引擎提供網(wǎng)頁加速服務(wù)。

文章來自公眾號：前端資源推薦

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

特點介紹：

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

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

3. 完善 TypeScript 支持

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

4. 多庫支持

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

安裝使用：

//?安裝基礎(chǔ)地圖庫 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')

功能特性：

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

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

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

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

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

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

部分屬性 API：

項目地址

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

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

關(guān)注我們