uniapp 地圖行車軌跡

官網地圖組件：https://uniapp.dcloud.net.cn/component/map.html
官網地圖組件控制：https://uniapp.dcloud.net.cn/api/location/map.html#createmapcontext

1、畫地圖

<map class="positioning-map"id="largeScreenMap":latitude="中心緯度":longitude="中心經度":scale="5":include-points="polyline[0].points":markers="標記點":polyline="路線"@markertap="點擊標記點時觸發"
></map>

// 地圖實例
onReady() {this._mapContext = uni.createMapContext("largeScreenMap", this);
}

2、切換地圖中心點

// 獲取當前位置uni.getLocation({type: 'wgs84',success: function (res) {let { longitude, latitude } = res// 將地圖中心移動到當前定位點，需要配合map組件的show-location使用_this._mapContext.moveToLocation({ longitude: +longitude, latitude: +latitude }) _this.mapCenter = { lat: latitude, lng: longitude }}
});

3、畫路線

// 路線
let polyline = [{width: 8,points: [], // 經緯度數組 [{latitude: 0, longitude: 0}]arrowLine: true, //帶箭頭的線color: '#3591FC', // 線的顏色
}]

4、軌跡移動

// nextPoint 下一個點,moving 是否繼續行駛-用于暫停行駛
movePoint(){if(!this.polyline[0] return;let durationTime = Math.ceil(30000 / polyline[0].points.length)	//默認播放全程使用30秒，計算相連兩點動畫時長this._mapContext.translateMarker({ // 平移marker，帶動畫duration: durationTime,markerId: '當前標記點的id', destination: { // 指定 marker 移動到的目標點latitude: this.polyline[0].points[this.nextPointIndex].latitude,longitude: this.polyline[0].points[this.nextPointIndex].longitude},animationEnd: res => { // 動畫結束回調函數//播放結束，繼續移動到下一個點，最后一個點時結束移動if (this.nextPoint < polyline[0].points.length - 1) {this.nextPoint++if (this.moving) {this.movePoint()}} else {this.nextPoint = 1}}
})
}

5、標記點及自定義內容

let marker=[{id: number-必填,latitude: '緯度',longitude: '經度',width: 18, height: 25,callout:{ content: '結束',// 開始bgColor: '#ffffff',padding: 4,borderRadius: 3,display: 'ALWAYS'},// '自定義標記點上方的氣泡窗口'- 純文本內容 - content 顯示標記內容，二選一customCallout:{name:'需要的數據',display: 'BYCLICK'},// '自定義氣泡窗口' - 自定義窗口內容 - 使用cover-view覆蓋 ，二選一}
]

自定義氣泡窗口參考：uniapp map自定義氣泡窗