<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()">暫停移動</button>
<button type="default" v-else @click="handleStartMove()">開始移動</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
id: 0, // 使用 marker點擊事件 需要填寫id
mapContext: null,
nextPointIndex: 1, //下一個坐標(biāo)點的索引
duratioinTime: 1000, ////相鄰兩點動畫持續(xù)時長默認(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,//是否開啟回放
}
},
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秒雹食，計算相連兩點動畫時長
this.initMapData()
},
//設(shè)置位置（從起點開始）
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)
},
//移動坐標(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ù)移動到下一個點保檐，最后一個點時結(jié)束移動
if(this.nextPointIndex<this.polyline[0].points.length-1) {
this.nextPointIndex ++
if(this.startMove) {
this.movePoint()
}
}else {
this.nextPointIndex = 1
this.startMove = false
}
}
})
},
//開始移動
handleStartMove() {
this.startMove = true
this.movePoint()
},
//暫停移動
handleStopMove() {
this.startMove = false
}
},
mounted() {
}
}
</script>
<style>
</style>
image.png
