yiliangyiyun-app/pages/task/playMap.vue

<template>
	<view class="content">
		<map ref="myMap" id="myMap" :markers="markers" :polyline="polyline" :latitude="polyline[0].points[0].latitude"
			:longitude="polyline[0].points[0].longitude" style="width: 100%; height: 2000rpx" @updated="test" />

		<button v-if="startMove" @click="handleStopMove()">暂停移动</button>
		<button v-else @click="handleStartMove()">开始移动</button>
		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>
	// const img = '/static/logo.png';
	const img = '/static/live-camera/shutter.png';
	import * as config from '@/config'
	let baseUrl = config.def().baseUrlNew
	export default {
		data() {
			return {
				scaleNum: 10,
				mapContext: null, //地图对象
				startMove: false, //是否开始回放
				nextPointIndex: 1, //下一个坐标点的索引
				durationTime: 1000, //相邻两点动画持续时长默认1秒
				//路线信息
				polyline: [{
					width: 20,
					points: [],
					arrowLine: true,
					color: '#3591FC',
				}],
				//标记点(即移动标记物)
				markers: [{
					id: 1,
					width: 40,
					height: 40,
					latitude: 0,
					longitude: 0,
					iconPath: img,
					anchor: {
						x: 0.5,
						y: 1
					}
				}],
				infoData: {},
				content: "",
				show: false,
				obj: {}
			}
		},
		onLoad(option) {


			this.getTrack(option.startDate, option.endDate) //获取轨迹信息(只做演示，未进行远程请求)
		},
		methods: {
			//模拟获取远程数据
			getTrack(startDate, endDate) {
				uni.request({
					url: baseUrl + '/CarPostionController/api/gettrack',
					data: {
						startDate: startDate,
						endDate: endDate
					},
					method: 'post',
					header: {
						'content-type': 'application/json' //'application/x-www-form-urlencoded; charset=UTF-8',
					},
					success: (res) => {
						console.log("res", res)
						if (res.data.code == 200) {
							let _list = JSON.parse(res.data.data)
							this.latitude = _list[0].lat
							this.longitude = _list[0].lng
							this.markers[0].latitude = this.latitude;
							this.markers[0].longitude = this.longitude;
							console.log("_list", _list)
							this.polyline[0].points = []
							for (let i = 0; i < _list.length; i++) {
								this.polyline[0].points.push({
									latitude: _list[i].lat,
									longitude: _list[i].lng
								})

							}
							console.log(this.polyline)
							var that = this
							setTimeout(() => {
								that.durationTime = Math.ceil(30000 / that.polyline[0].points
									.length) //默认播放全程使用30秒，计算相连两点动画时长
								that.initMapData()
							}, 1000)
						}
					}
				})
			},
			//设置地图
			initMapData() {
				this.initMarkers()
				this.mapContext = uni.createMapContext('myMap', this)
			},
			test() {
				this.mapContext.includePoints({
					points: this.polyline[0].points,
					padding: [100, 100, 1000, 100]
				})
			},
			//设置位置（从起点开始）
			initMarkers() {
				this.markers[0].latitude = this.polyline[0].points[0].latitude
				this.markers[0].longitude = this.polyline[0].points[0].longitude
			},
			//开始移动
			handleStartMove() {
				this.startMove = true
				this.movePoint()
			},
			//停止移动
			handleStopMove() {
				this.startMove = false
			},
			//移动坐标
			movePoint() {
				/*
				//也可以用这个方法
				this.mapContext.moveAlong({
					duration: 30000,
					markerId: this.markers[0].id,
					path: this.polyline[0].points
				})
				return
				*/
				this.mapContext.moveAlong({
					duration: 10000,
					markerId: this.markers[0].id,
					path: this.polyline[0].points
				})
				console.log("this.nextPointIndex1 ", this.nextPointIndex, this.polyline[0].points.length - 1)
				console.log("this.startMove1", this.startMove)
				// this.mapContext.translateMarker({
				// 	duration: this.durationTime,
				// 	markerId: this.markers[0].id,
				// 	destination: {
				// 		latitude: this.polyline[0].points[this.nextPointIndex].latitude,
				// 		longitude: this.polyline[0].points[this.nextPointIndex].longitude
				// 	},
				// 	animationEnd: res => {

				// 		console.log("this.nextPointIndex ",this.nextPointIndex ,this.polyline[0].points.length - 1)
				// 		console.log("this.startMove",this.startMove)
				// 		//播放结束，继续移动到下一个点，最后一个点时结束移动
				// 		if (this.nextPointIndex < this.polyline[0].points.length - 1) {
				// 			this.nextPointIndex++
				// 			if (this.startMove) {
				// 				this.movePoint()
				// 			}
				// 		} else {
				// 			this.nextPointIndex = 1
				// 			this.startMove = false
				// 		}
				// 	}
				// })
			}
		}
	};
</script>

<style lang="scss" scoped>
	.hcp-bottom {
		left: 0;
		bottom: 0;
		width: 750rpx;
		// position: fixed;
	}

	.content {
		.top_btn {
			// background-color: red;
			position: fixed;
			top: 30rpx;
			left: 10px;
			right: 30rpx;
			flex-direction: row;
			display: flex;
			margin-top: 30px;
			justify-content: space-between;

			.returnPage {
				flex-direction: row;
				display: flex;

				.return-icon {
					width: 90rpx;
					height: 90rpx;
				}

			}

			.qiehuan {
				flex-direction: row;
				display: flex;
				// width: 240rpx;
				height: 90rpx;
				background-color: #ffffff;
				border-radius: 50rpx;
				padding: 0 30rpx;

				.tips {
					line-height: 90rpx;
				}

				.qiehuan-icon {
					width: 30rpx;
					height: 30rpx;
					margin-top: 30rpx;
					margin-right: 10rpx;
				}
			}
		}

		.infoBox {
			// width: 90%;
			height: 260rpx;
			background-color: #FFFFFF;
			position: fixed;
			top: 30rpx;
			left: 10px;
			right: 30rpx;
			border-radius: 40rpx;
			// padding:50rpx;
			display: flex;
			flex-direction: row;
			margin-top: 100px;

			.infoBox_left {
				padding-top: 50rpx;
				width: 250rpx;
				padding-top: 80rpx;
				// background-color: #18BC37;
			}

			.infoBox_right {
				background-image: linear-gradient(to right, #f9f7f7, #ffffff);
				display: flex;
				flex-direction: row;
				border-bottom-right-radius: 40rpx;
				border-top-right-radius: 40rpx;

				.jt-icon {
					position: relative;
					top: 75rpx;
					width: 60rpx;
					margin: auto 10rpx;
				}

				.send {
					padding-top: 80rpx;
					width: 180rpx;
					// background-color: #0077AA;
				}

				.end {
					padding-top: 80rpx;
					width: 180rpx;
				}
			}

			.title {
				font-size: 44rpx;
				font-weight: 600;
				text-align: center;
			}

			.address {
				text-align: center;
				color: #8F8F8F;
				font-size: 30rpx;
				margin-top: 15rpx;
			}

			.estimate {
				width: 120px;
				text-align: center;
			}
		}
	}
</style>