高德地图实现具体功能如图
具体实现思路如下:
<div class="playAnimation">
<table width="100%" style="" border="0">
<tr class="info_play">
<td>{{ currentMileage / 10 }} KM / {{ totalMileage / 10 }} KM</td>
<td>{{ currentTime }} </td>
</tr>
<tr style="padding: 10px 10px;">
<td align="center" valign="middle" colspan="2" style="padding-bottom:5px;">
<div style="width:100%;text-align: center">
<ul class="nav navbar-nav flex" style="width:100%;">
<li class="btn"><a id="btn1" class="btn noChoice btn-xs"
@click.prevent="setSpeed(2000)">慢速</a>
</li>
<li class="btn"><a id="btn2" class="btn noChoice choice btn-xs"
@click.prevent="setSpeed(4000)">正常</a></li>
<li @click="handlerRetreat"><i class="el-icon-d-arrow-left play_icon"></i> </li>
<li v-if="!runFlag" @click="runFlagChange"><i class="el-icon-video-play play_icon"></i>
</li>
<li v-if="runFlag" @click="runFlagChange"><i class="el-icon-video-pause play_icon"></i>
</li>
<li @click="handlerForward"><i class="el-icon-d-arrow-right play_icon"></i> </li>
<li class="btn">
<a id="btn3" class="btn noChoice btn-xs" @click.prevent="setSpeed(10000)">快速</a>
</li>
<li class="btn">
<a id="btn4" class="btn noChoice btn-xs" @click.prevent="setSpeed(100000)">极快</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
data() {
return {
firstArr: [116.397428, 39.90923], // 中心点/初始坐标
// map: null,
marker: [],
infoWindow: [],
showCardInfo: true,
travelInfo: false,
deviceInfo: true,
waybillDetailsList: {},
runFlag: false, // 播放/暂停控制
start: 1,
playSpeed: 1000,
travelArr: [],
len: null, //marker移动中路径数组
// passline: [], //通过路径的数组
passline1: [], //未通过路径数组
currentTime: '',// mark点移动到的当前时间
totalMileage: 0,// 轨迹总里程
currentMileage: 0, // 轨迹当前mark点移动里程
lineArr: [],
currentSpot: 0,
isEnd: false,// 标记到达了终点
}
},
methods: {
/**
* 后退
*/
handlerRetreat() {
this.currentSpot -= 100;
if (this.currentSpot > 0) {
this.marker[0].setPosition([this.passline1[this.currentSpot].lng, this.passline1[this.currentSpot].lat]);
const data = this.passline1.slice(this.currentSpot, this.passline1.length - 1);
this.marker[0].moveAlong(data, this.playSpeed);
} else {
this.currentSpot = 0;
this.marker[0].setPosition([this.passline1[0].lng, this.passline1[0].lat]);
const data = this.passline1.slice(0, this.passline1.length - 1);
this.marker[0].moveAlong(data, this.playSpeed);
}
setTimeout(() => {
this.runFlag = true;
}, 10);
},
/**
* 前进
*/
handlerForward() {
this.isEnd = false;
this.currentSpot += 100;
if (this.currentSpot < this.passline1.length - 1) {
this.marker[0].setPosition([this.passline1[this.currentSpot].lng, this.passline1[this.currentSpot].lat]);
const data = this.passline1.slice(this.currentSpot, this.passline1.length - 1);
this.marker[0].moveAlong(data, this.playSpeed);
} else {
this.currentSpot = this.passline1.length - 1;
this.marker[0].setPosition([this.passline1[this.passline1.length - 1].lng, this.passline1[this.passline1.length - 1].lat]);
const data = this.passline1.slice(this.passline1.length - 3, this.passline1.length - 1);
this.marker[0].moveAlong(data, this.playSpeed);
this.isEnd = true;
}
setTimeout(() => {
this.runFlag = true;
}, 10);
},
/**
* 播放速度设置
*/
setSpeed(num) {
this.runFlag = true;
this.playSpeed = num;
this.currentSpot = (this.len - 1);
this.passline1 = this.passline1.slice(this.currentSpot, this.passline1.length - 1);
this.marker[0].moveAlong(this.passline1, this.playSpeed);
},
/**
* 播放
*/
runFlagChange() {
this.runFlag = !this.runFlag;
if(this.isEnd){
this.currentSpot = 0;
}
if (this.runFlag) {
if (this.start === 1) {
this.movePrevious();
this.start++;
} else {
this.resumeAnimation();
}
} else {
this.pauseAnimation();
}
},
/**
* 开始动画
*/
movePrevious() {
this.travelArr = []
this.dataInfo.track24s.forEach((ele, index) => {
this.travelArr.push([ele.longitude, ele.latitude])
})
this.passline1 = this.travelArr;
this.marker[0].moveAlong(this.travelArr, this.playSpeed);
},
/**
* 暂停动画
*/
pauseAnimation() {
this.marker[0].pauseMove();
},
/**
* 继续动画
*/
resumeAnimation() {
this.marker[0].resumeMove();
},
/**
* 停止动画
*/
stopAnimation() {
this.marker[0].stopMove();
},
}
标签：播放,marker,length,vue,currentSpot,进快,passline1,data,playSpeed From： https://www.cnblogs.com/web-aqin/p/17514360.html