Vue AMap 是一個基于高德地圖 JavaScript API 封裝的Vue.js組件庫,它提供了一組簡單易用的組件,可以在Vue.js中輕松地集成高德地圖。
//示例代碼 import Vue from 'vue'; import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: 'your amap key', plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType'], v: '1.4.4', uiVersion: '1.0.11' }); // ...其他代碼
Vue AMap組件庫提供了許多參數來配置地圖,可以根據自己的需求選擇不同的參數進行配置。例如,在使用VueAMap組件庫時,可以使用下面的方法來創建地圖:
上面的代碼中,center參數表示地圖中心點的坐標,默認值為"auto",表示自動根據標記范圍調整地圖中心位置;zoom參數表示縮放等級,默認值為10;resizeEnable參數表示地圖是否自適應容器大小,默認值為false;dragEnable參數表示是否開啟拖拽,默認值為true;zoomEnable表示是否開啟滾輪縮放,默認值為true;rotateEnable參數表示是否開啟旋轉,默認值為false;scrollWheel參數表示是否允許鼠標滾輪縮放地圖,默認值為true。
Vue AMap還提供了其他常用的組件,例如AMap-marker、AMap-infoWindow、AMap-polyline、AMap-circle等,可以通過下面的代碼來使用:
其中,AMap-marker組件表示地圖上的標記點位置;AMap-infoWindow組件表示地圖上的信息窗體;AMap-polyline組件表示地圖上的折線;AMap-circle組件表示地圖上的圓形區域。
除了以上幾個組件外,Vue AMap還提供了車輛追蹤、地理編碼(地址解析)、逆地理編碼(坐標解析)等其他常用功能的API接口,這些API接口可以通過VueAMap實例來直接調用。
//示例代碼 const vueAmap = this.$amap; vueAmap.getDrivingRoute('浦東機場', '世紀大道', {policy:'riderFirst'}) .then(data =>{ console.log('getDrivingRoute', data); }); vueAmap.getDirection([ { keyword: '地鐵1號線' }, { keyword: '世紀大道' } ], {origin: '39.979590,116.481956'}) .then(data =>{ console.log('getDirection', data); });
其中,getDrivingRoute方法表示獲取駕車路線規劃信息;getDirection方法表示獲取公交/步行出行路線規劃信息。
總之,Vue AMap是一個非常不錯的Vue.js組件庫,它提供了一組簡單易用的組件和API接口,可以幫助開發者在Vue.js中輕松地集成高德地圖。