JS API 結(jié)合 Vue 使用

高德地圖 jsapi 下載、引入

npm add @amap/amap-jsapi-loaderimport AMapLoader from '@amap/amap-jsapi-loader'

使用2.0版本的loader需要在window對(duì)象下先配置 securityJsCode? JS API 安全密鑰使用

JS?API?使用?script?標(biāo)簽同步加載增加代理服務(wù)器設(shè)置腳本，并將「您申請(qǐng)的安全密鑰」替換為您的安全密鑰；（注意您這個(gè)設(shè)置必須是在JS?API?腳本加載之前進(jìn)行設(shè)置，否則設(shè)置無效。）

window._AMapSecurityConfig = {securityJsCode: '「您申請(qǐng)的安全密鑰」'
}使用ts時(shí)，上面這里會(huì)顯示類型錯(cuò)誤，因此需要在類型文件中配置Window的類型
interface Window {_AMapSecurityConfig: {securityJsCode: string}
}

?頁面地圖初始化加載

自定義地圖-設(shè)置地圖顯示樣式?自定義地圖-地圖

AMapLoader.load({key: '', // 申請(qǐng)好的Web端開發(fā)者Key，首次調(diào)用 load 時(shí)必填version: '2.0' // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
}).then((AMap) => {// 地圖初始化// Map構(gòu)造函數(shù)第一個(gè)傳參的map為初始化地圖的容器的id,第二個(gè)傳參是配置對(duì)象const map = new AMap.Map('map', {viewMode:"3D",    //是否為3D地圖模式mapStyle: 'amap://styles/whitesmoke', //設(shè)置地圖的顯示樣式zoom: 12 //設(shè)置地圖的縮放級(jí)別})    }).catch((e) => {console.error(e) //加載錯(cuò)誤提示})

根據(jù)后臺(tái)返回的經(jīng)緯度數(shù)組，自定義繪制行車路徑，參考官方文檔 -?路線規(guī)劃

使用插件 AMap.Driving-根據(jù)起點(diǎn)和終點(diǎn)規(guī)劃自動(dòng)行車路徑

AMapLoader.load({key: '', // 申請(qǐng)好的Web端開發(fā)者Key，首次調(diào)用 load 時(shí)必填version: '2.0' // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
}).then((AMap) => {// 地圖初始化const map = new AMap.Map('map', {// viewMode:"3D",    //是否為3D地圖模式mapStyle: 'amap://styles/whitesmoke', //設(shè)置地圖的顯示樣式zoom: 12 //設(shè)置地圖的縮放級(jí)別})// 使用插件 AMap.DrivingAMap.plugin('AMap.Driving', function () {const driving = new AMap.Driving({map: map, // 配置參數(shù)map,意思是在那個(gè)地圖中繪制行車路徑showTraffic: false, // 關(guān)閉道路情況(設(shè)置是否顯示實(shí)時(shí)路況信息)hideMarkers: true // 關(guān)閉沿途標(biāo)記(設(shè)置隱藏路徑規(guī)劃的起始點(diǎn)圖標(biāo) )})// logisticsInfo是后端返回的行車路徑的數(shù)組if (logistics.value?.logisticsInfo && logistics.value.logisticsInfo.length >= 2) {const list = [...logistics.value.logisticsInfo]// 起點(diǎn) startconst start = list.shift()// 終點(diǎn) endconst end = list.pop()// 傳入起點(diǎn)和終點(diǎn)的經(jīng)緯度信息，獲取對(duì)應(yīng)的駕車路線規(guī)劃driving.search([start?.longitude, start?.latitude],[end?.longitude, end?.latitude],function () {// 未出錯(cuò)時(shí)，result即是對(duì)應(yīng)的路線規(guī)劃方案// 在這里繪制沿途運(yùn)輸位置})}})}).catch((e) => {console.error(e) // 加載錯(cuò)誤提示})

使用插件 AMap.Driving-自定義繪制路徑，也就是把路途的途徑點(diǎn)告知地圖讓其渲染路徑

?參考官方文檔 途經(jīng)點(diǎn)參數(shù)?路線規(guī)劃-途經(jīng)點(diǎn)

?

// 途經(jīng)點(diǎn) opts 是一個(gè)對(duì)象，屬性waypoints就是繪制途經(jīng)點(diǎn)參數(shù)
const opts = {// 途經(jīng)點(diǎn)參數(shù)，最多支持傳入16個(gè)途經(jīng)點(diǎn)waypoints: list.map((item) => [item.longitude, item.latitude])
}
driving.search([start?.longitude, start?.latitude],[end?.longitude, end?.latitude],opts,function () {}
)

實(shí)現(xiàn)業(yè)務(wù)：關(guān)閉途徑標(biāo)記（?hideMarkers: true）并且實(shí)現(xiàn)自定義繪制起點(diǎn)-終點(diǎn)-和當(dāng)前運(yùn)輸位置 ，其實(shí)就是繪制一個(gè)標(biāo)記，參考官方實(shí)例?自定義圖標(biāo)-點(diǎn)標(biāo)記

讓當(dāng)前的運(yùn)輸位置顯示在地圖的正中間并且設(shè)置縮放比例，參考官方文檔 setFitView-setZoom方法

參考手冊(cè)-地圖 JS API

// 創(chuàng)建一個(gè)標(biāo)記點(diǎn)函數(shù)
const getMarker = (point: Location, image: string, width = 25, height = 30) => {// 創(chuàng)建一個(gè) Icon,這種方式可以設(shè)置圖標(biāo)的大小const Icon = new AMap.Icon({// 圖標(biāo)尺寸size: new AMap.Size(width, height),// 圖標(biāo)的取圖地址image: image,// 圖標(biāo)所用圖片大小imageSize: new AMap.Size(width, height)})// 將 icon 傳入 markerconst marker = new AMap.Marker({position: [point?.longitude, point?.latitude],// 將一張圖片的地址設(shè)置為 iconicon: Icon,// 設(shè)置了 icon 以后，設(shè)置 icon 的偏移量，以 icon 的 [center bottom] 為原點(diǎn)offset: new AMap.Pixel(-width / 2, -height)})return marker
}
const startMarker = getMarker(start!, startImg) // 起點(diǎn)icon標(biāo)記
const endMarker = getMarker(end!, endImg)  // 終點(diǎn)icon標(biāo)記// 往地圖上增加標(biāo)記
map.add([startMarker, endMarker])driving.search(function () {// 繪制當(dāng)前運(yùn)輸位置，后端返回 currentLocationInfo 就是當(dāng)前的運(yùn)輸位置 標(biāo)記const curr = logistics.value?.currentLocationInfo   // 當(dāng)前的運(yùn)輸位置經(jīng)緯度const currMarker = getMarker(curr!, carImg, 33, 20) // 當(dāng)前運(yùn)輸位置標(biāo)記map.add([currMarker]) // 往地圖上增加當(dāng)前運(yùn)輸位置標(biāo)記// 2s后定位當(dāng)中間進(jìn)行縮放setTimeout(() => {map.setFitView([currMarker]) // 定位到當(dāng)前運(yùn)輸?shù)奈恢胢ap.setZoom(10) // 一定比例的縮放}, 2000)}
)

---

?下面貼出完整繪制物流信息地圖的代碼

import startImg from '@/assets/start.png'
import endImg from '@/assets/end.png'
import carImg from '@/assets/car.png'const initMap = () => {AMapLoader.load({key: '', // 申請(qǐng)好的Web端開發(fā)者Key，首次調(diào)用 load 時(shí)必填version: '2.0' // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15}).then((AMap) => {// 地圖初始化const map = new AMap.Map('map', {// viewMode:"3D",    //是否為3D地圖模式mapStyle: 'amap://styles/whitesmoke', //設(shè)置地圖的顯示樣式zoom: 12 //設(shè)置地圖的縮放級(jí)別})AMap.plugin('AMap.Driving', function () {const driving = new AMap.Driving({map: map,//   panel: 'panel'showTraffic: false,hideMarkers: true})if (logistics.value?.logisticsInfo && logistics.value.logisticsInfo.length >= 2) {const list = [...logistics.value.logisticsInfo]//   創(chuàng)建標(biāo)記函數(shù)const getMarker = (point: Location, image: string, width = 25, height = 30) => {// 創(chuàng)建一個(gè) Icon,這種方式可以設(shè)置圖標(biāo)的大小const Icon = new AMap.Icon({// 圖標(biāo)尺寸size: new AMap.Size(width, height),// 圖標(biāo)的取圖地址image: image,// 圖標(biāo)所用圖片大小imageSize: new AMap.Size(width, height)})// 將 icon 傳入 markerconst marker = new AMap.Marker({position: [point?.longitude, point?.latitude],// 將一張圖片的地址設(shè)置為 iconicon: Icon,// 設(shè)置了 icon 以后，設(shè)置 icon 的偏移量，以 icon 的 [center bottom] 為原點(diǎn)offset: new AMap.Pixel(-width / 2, -height)})return marker}// 起點(diǎn) startconst start = list.shift()const startMarker = getMarker(start!, startImg)// 終點(diǎn) endconst end = list.pop()const endMarker = getMarker(end!, endImg)map.add([startMarker, endMarker])// 途經(jīng)點(diǎn) optsconst opts = {// 途經(jīng)點(diǎn)參數(shù)，最多支持傳入16個(gè)途經(jīng)點(diǎn)waypoints: list.map((item) => [item.longitude, item.latitude])}driving.search([start?.longitude, start?.latitude],[end?.longitude, end?.latitude],opts,function () {// 未出錯(cuò)時(shí)，result即是對(duì)應(yīng)的路線規(guī)劃方案// 繪制運(yùn)輸位置const curr = logistics.value?.currentLocationInfoconst currMarker = getMarker(curr!, carImg, 33, 20)map.add([currMarker])// 2s后定位當(dāng)中間進(jìn)行縮放setTimeout(() => {map.setFitView([currMarker])map.setZoom(10)}, 2000)})}})}).catch((e) => {console.error(e) //加載錯(cuò)誤提示})
}