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: