<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, //下一个坐标点的索引
duratioinTime: 1000, ////相邻两点动画持续时长默认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: {
//模拟获取远程数据
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) //默认播放全程使用30秒，计算相连两点动画时长
this.initMapData()
},
//设置位置（从起点开始）
initMakers() {
this.makers[0].latitude = this.polyline[0].points[0].latitude;
this.makers[0].longitude = this.polyline[0].points[0].longitude;
},
//设置地图
initMapData() {
this.initMakers()
this.mapContext = uni.createMapContext('mymap', this)
},
//移动坐标
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 => {
//播放结束，继续移动到下一个点，最后一个点时结束移动
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
