wangluohuoyun-huozhuapp/pages/order/map.vue

<template>
	<view>
		<map v-if="polyline[0].points.length > 0" id="myMap" :markers="markers" :polyline="polyline"
			:include-points="polyline[0].points" :latitude="polyline[0].points[0].latitude"
			:longitude="polyline[0].points[0].longitude" style="width: 100%; height: calc(100vh - 90px)" />
		<view class="hcp-bottom">
			<button v-if="startMove" @click="handleStopMove()">暂停移动</button>
			<button v-else @click="handleStartMove()">开始移动</button>
		</view>
	</view>
</template>

<script>
	const img = '/static/logo.png';
	export default {
		data() {
			return {
				id: '',
				mapContext: null, //地图对象
				startMove: false, //是否开始回放
				nextPointIndex: 1, //下一个坐标点的索引
				durationTime: 1000, //相邻两点动画持续时长默认1秒
				//路线信息
				polyline: [{
					width: 28,
					points: [],
					arrowLine: true,
					color: '#3591FC',
				}],
				//标记点(即移动标记物)
				markers: [{
					id: 1,
					width: 140,
					height: 140,
					latitude: 0,
					longitude: 0,
					iconPath: img,
					anchor: {
						x: 0.5,
						y: 1
					}
				}]
			}
		},
		onLoad(option) {
			this.id = option.id
			console.log(option.id)
			this.getTrack() //获取轨迹信息(只做演示，未进行远程请求)
		},
		methods: {
			//模拟获取远程数据
			getTrack() {
				this.$request.baseRequest('get', '/hyOrderTravelPath/getInfo', {
						orderId: this.id,
						currentPage: 1,
						pageSize: 9999
					}).then(res => {
						console.log("res", res)
						// 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.durationTime = Math.ceil(30000 / this.polyline[0].points.length)	//默认播放全程使用30秒，计算相连两点动画时长
						// this.initMapData()
					})
					.catch(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});

			},
			//设置地图
			initMapData() {
				this.initMarkers()
				this.mapContext = uni.createMapContext('myMap', this)
			},
			//设置位置（从起点开始）
			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;
	}
</style>