wangluohuoyun-huozhuapp/components/xbd-maptrack/xbd-maptrack.vue

<template>
	<view class="content">
		<map
			style="width: 100%; height: 100%;position: fixed;"
			:markers="covers"
			:polyline="polyline"
			:include-points="covers"
			@markertap="showRoute"
			id="myMap"
			show-location
		></map>
		<slider :value="progress" @change="sliderChange" @changing="trackState = 2" activeColor="#FFD090" block-color="#D65600" />
		<view class="fn">
			<button @tap="trackState = trackState == 1 ? 2 : 1">{{ ['开始', '暂停', '继续'][trackState] }}</button>
			<button @tap="trackState = 0">终止</button>
		</view>
	</view>
</template>

<script>
export default {
	name: 'xbdMaptrack',
	props: ['isauto', 'covers', 'polyline'], //是否自动播放和轨迹数据
	data() {
		return {
			trackLength: 0, //轨迹长度
			trackkey: 0, //轨迹点
			progress: 0, // 进度条
			mapContext: '',
			terval: false, //计时器
			trackState: 0 //轨迹播放状态 0未开始 1播放 2暂停
		};
	},
	watch: {
		trackState(k) {
			//监听播放状态改变
			if (k == 1 && !this.terval) return this.trackplay();
			clearInterval(this.terval);
			this.terval = false;
			//进度停止时返回当前轨迹的key值与坐标值
			this.$emit('getStopTrack',{key:this.trackkey,track:this.polyline[0].points[this.trackkey]})
			if (k !== 0) return;
			this.trackkey = 0;
			this.progress = 0;
			this.trackMove();
		},
	},
	created() {
		this.mapContext = uni.createMapContext('myMap', this);
		setTimeout(() => {
			//mapContext 创建后延时设置定位
			this.trackLength = this.polyline[0].points.length - 1;
			this.mapContext.moveToLocation(this.covers[0]);
			if (this.isauto) this.trackState = 1;
		}, 888);
	},
	methods: {
		/**
		 * 轨迹播放方法
		 * @param {number} s = 10 控制移动速度
		 *
		 * */
		trackplay(s = 10) {
			this.terval = setInterval(() => {
				this.trackkey++;
				if (this.trackkey >= this.trackLength) {
					clearInterval(this.terval);
					this.trackState = 0;
					this.trackkey = 0;
					this.terval = false;
				}
				this.progress = ((this.trackkey * 100) / this.trackLength).toFixed(1);
				this.trackMove();
			}, s);
		},
		/**
		 * 轨迹移动方法
		 * @param {number} markerId = 2  指定 marker的id
		 * @param {object} destination ={latitude,longitude} 指定 marker 移动到的目标点
		 * @param {number} duration = 100 动画持续时长
		 * @param {void} animationEnd = ()=>{} 轨迹动画完成后回调
		 * @param {void} fail 轨迹回放失败回调
		 *
		 * */
		trackMove(markerId = 2, destination = this.polyline[0].points[this.trackkey], duration = 100, animationEnd = () => {}, fail = e => console.log('轨迹回放失败', e)) {
			this.mapContext.translateMarker({
				markerId,
				destination,
				duration,
				animationEnd,
				fail
			});
		},
		//进度条改变了调用方法
		sliderChange(e) {
			this.trackkey = ((e.detail.value / 100) * this.trackLength).toFixed(0);
			//进度条改变时返回当前轨迹的key值与坐标值
			this.$emit('getStopTrack',{key:this.trackkey,track:this.polyline[0].points[this.trackkey]})
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}
.fn {
	position: fixed;
	bottom: 22%;
	text-align: center;
	z-index: 100;
}
.title {
	font-size: 36rpx;
	color: #8f8f94;
}
slider {
	width: 88%;
	height: 12px;
	margin-left: 2.5%;
}
</style>