yiliangyiyun-app/pages/task/playMap.nvue

<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:3000rpx" />
		<view class="place">
			<!-- <text v-if="startMove" @click="handleStopMove()" class="play-text">暂停播放</text> -->
			<text @click="handleStartMove()" class="play-text">播放轨迹</text>
		</view>

		<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: [{
					points: [], // 点集合
					color: '#3591fc', // 线的颜色
					arrowLine: true, //带箭头的线
					width: 6 // 线的宽度
				}],
				//标记点(即移动标记物)
				markers: [{
					id: 1,
					width: 40,
					height: 40,
					latitude: 0,
					longitude: 0,
					// iconPath: "../static/greenCar.png",
					iconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/car.png",
					anchor: {
						x: 0.5,
						y: 1
					}
				}],
				infoData: {},
				content: "",
				show: false,
				obj: {}
			}
		},
		onLoad(option) {


			this.getTrack(option.startDate, option.endDate) //获取轨迹信息(只做演示，未进行远程请求)
		},
		methods: {
			//模拟获取远程数据
			getTrack(startDate, endDate) {
				let that = this
				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)
							that.latitude = _list[0].lat
							that.longitude = _list[0].lng
							that.markers[0].latitude = that.latitude;
							that.markers[0].longitude = that.longitude;
							console.log("_list", _list)
							that.polyline[0].points = []
							for (let i = 0; i < _list.length; i++) {
								that.polyline[0].points.push({
									latitude: _list[i].lat,
									longitude: _list[i].lng
								})

							}
							console.log(that.polyline)
							that.durationTime = Math.ceil(30000 / that.polyline[0].points
								.length) //默认播放全程使用30秒，计算相连两点动画时长
							that.initMapData()
						}
					}
				})
			},
			//设置地图
			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.includePoints({
					points: this.polyline[0].points,
				})
				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)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.play-text {
		font-size: 36px;
		background-color: #91B4F4;
		color: #fff;
		padding: 20rpx 50rpx;
		border-radius: 50rpx;
		width: 400rpx;
		text-align: center;
	}

	.place {
		position: absolute;
		z-index: 999;
		bottom: 100rpx;
		left: 180rpx;
	}
</style>