1.首先在index.html中引入高德地圖
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=&plugin=AMap.Driving"></script>
備注：key是在高德地圖平台申請的密鑰必填的，plugin是插件所用到的方法（這里使用的是行程經緯度）
2.在需要使用地圖的界面：
<div id="container"></div>
script中 設置全局變量 var MAP,driving;
在mounted中：
MAP = new AMap.Map('container', {
mapStyle: 'amap://styles/normal',
zoom: 4, //級別
center: [116.397428, 39.90923], //中心點坐標
viewMode: '3D', // 地圖模式
pitch: 43.5, //設置俯仰角
});
這樣就可以顯示地圖了，然后我們把marker添加到地圖上
使用axios獲取后台接口：
axios.post('后台接口地址').then(res=>{
let {code,data} = res.data;
if(code == 200){
data.map(item=>{
let marker = new AMap.Marker({
map: MAP,
icon: require('../images/markerIcon.png') ,//marker圖標
position: [item.longitude, item.latitude],//接口返回經緯度
title:item.carNumber,
});
})
}
})
如果是需要動態切換圖標的位置則會用到websocket；
那么把上邊的方法直接寫到onMessage里邊就可以了，但是在渲染marker之前，必須先調用MAP.clearMap()方法，
再進行渲染，否則marker圖標改變位置時，原先的marker圖標依然還在而導致marker圖標越來越多。
3.再說這個plugin獲取行程路徑的方法
在method中定義一個方法：
showMap() {
MAP = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],//地圖中心點
zoom: 13 //地圖顯示的縮放級別
});
//構造路線導航類
driving = new AMap.Driving({
map: MAP,
panel: "panel"
});
this.tuJingPath = [];
axios.post('后台接口地址').then(res=>{
let {code,data} = res.data;
if(code==200){
this.startPath = [data[0].longitude,data[0].latitude];//起點坐標
this.endPath = [data[data.length-1].longitude,data[data.length-1].latitude];//終點坐標
data.map(item=>{
this.tuJingPath.push(new AMap.LngLat(item.longitude,item.latitude))
this.tuJingPath.shift();
this.tuJingPath.pop();
})
// 根據起終點經緯度規划駕車導航路線
driving.search(this.startPath,this.endPath,{waypoints:this.tuJingPath},(status, result)=>{
if (status === 'complete') {
// log.success('繪制駕車路線完成')
} else {
// log.error('獲取駕車數據失敗：' + result)
}
})
}
})
},
在需要這個功能的頁面直接調用就OK：
還有許多方法，高德文檔上都有，感興趣的小伙伴可以詳細看一下，隨時溝通！