yiliangyiyun-app/components/xbdMaptrack/xbdMaptrack.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: {
			showRoute() {},
			/**
			 * 轨迹播放方法
			 * @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>