<template>
<view class="page">
<map v-if="polyline[0].points.length > 0" id="mymap" style="width: 100%;height: 80vh;"
:longitude="polyline[0].points[0].longitude"
:latitude="polyline[0].points[0].latitude"
:markers="makers"
:polyline="polyline"
show-location
show-compass
enable-3D
:include-points="polyline[0].points"></map>
<view class="">
<button type="default" v-if="startMove" @click="handleStopMove()">暫停移動(dòng)</button>
<button type="default" v-else @click="handleStartMove()">開(kāi)始移動(dòng)</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
id: 0, // 使用 marker點(diǎn)擊事件 需要填寫(xiě)id
mapContext: null,
nextPointIndex: 1, //下一個(gè)坐標(biāo)點(diǎn)的索引
duratioinTime: 1000, ////相鄰兩點(diǎn)動(dòng)畫(huà)持續(xù)時(shí)長(zhǎng)默認(rèn)1秒
makers: [{
id: 1,
width: 40,
height: 40,
latitude: 0,
longitude: 0,
iconPath: 'xxxxxxx,
anchor: {
x: 0.5,
y: 1
}
}],
polyline: [{
width: 8,
points: [],
arrowLine: true,
color: '#3591FC',
}],
startMove: false,//是否開(kāi)啟回放
}
},
onLoad() {
this.getTrack()
console.log(this.polyline[0].points)
uni.getLocation({
type: 'wgs84',
success: function(res) {
console.log(res,'r')
},
fail: function(res) {
console.log(res,'fail')
}
})
},
methods: {
//模擬獲取遠(yuǎn)程數(shù)據(jù)
getTrack() {
this.polyline[0].points = [{
latitude: 39.997761,
longitude: 116.478935
},
{
latitude: 39.997825,
longitude: 116.478939
},
{
latitude: 39.998549,
longitude: 116.478912
},
{
latitude: 39.998555,
longitude: 116.478998
},
{
latitude: 39.998566,
longitude: 116.479282
},
{
latitude: 39.998528,
longitude: 116.479658
},
{
latitude: 39.998453,
longitude: 116.480151
},
{
latitude: 39.998302,
longitude: 116.480784
},
{
latitude: 39.998184,
longitude: 116.481149
},
{
latitude: 39.997997,
longitude: 116.481573
},
{
latitude: 39.997846,
longitude: 116.481863
},
{
latitude: 39.997718,
longitude: 116.482072
},
{
latitude: 39.997718,
longitude: 116.482362
},
{
latitude: 39.998935,
longitude: 116.483633
},
{
latitude: 39.998968,
longitude: 116.48367
},
{
latitude: 39.999861,
longitude: 116.484648
}
]
this.duratioinTime = Math.ceil(3000 / this.polyline[0].points.length) //默認(rèn)播放全程使用30秒，計(jì)算相連兩點(diǎn)動(dòng)畫(huà)時(shí)長(zhǎng)
this.initMapData()
},
//設(shè)置位置（從起點(diǎn)開(kāi)始）
initMakers() {
this.makers[0].latitude = this.polyline[0].points[0].latitude;
this.makers[0].longitude = this.polyline[0].points[0].longitude;
},
//設(shè)置地圖
initMapData() {
this.initMakers()
this.mapContext = uni.createMapContext('mymap', this)
},
//移動(dòng)坐標(biāo)
movePoint() {
this.mapContext.translateMarker({
duration: this.duratioinTime,
markerId:this.makers[0].id,
destination: {
latitude: this.polyline[0].points[this.nextPointIndex].latitude,
longitude: this.polyline[0].points[this.nextPointIndex].longitude
},
animationEnd: res => {
//播放結(jié)束，繼續(xù)移動(dòng)到下一個(gè)點(diǎn)，最后一個(gè)點(diǎn)時(shí)結(jié)束移動(dòng)
if(this.nextPointIndex<this.polyline[0].points.length-1) {
this.nextPointIndex ++
if(this.startMove) {
this.movePoint()
}
}else {
this.nextPointIndex = 1
this.startMove = false
}
}
})
},
//開(kāi)始移動(dòng)
handleStartMove() {
this.startMove = true
this.movePoint()
},
//暫停移動(dòng)
handleStopMove() {
this.startMove = false
}
},
mounted() {
}
}
</script>
<style>
</style>
image.png
