wangluohuoyun-huozhuapp/pages/order/map.nvue

<template>
	<view>
		<map v-if="polyline[0].points.length > 0" 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" />
		<!-- <view v-if="polyline[0].points.length > 0" 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';
	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
					}
				}]
			}
		},
		onLoad(option) {
			this.id = option.id
			console.log(this.id)
			this.getTrack() //获取轨迹信息(只做演示，未进行远程请求)

		},
		methods: {
			//模拟获取远程数据
			getTrack() {
				uni.request({
					url: baseUrl + '/hyOrderTravelPath/getInfo',
					data: {
						orderId: this.id,
						currentPage: 1,
						pageSize: 9999
					},
					method: 'get',
					header: {
						'content-type': 'application/json' //'application/x-www-form-urlencoded; charset=UTF-8',
					},
					success: (res) => {
						if (res.data.code == 200) {
							if (res.data.data) {
								var patharr = []
								for (let num = 0; num < res.data.data.records.length; num++) {
									if(res.data.data.records[num].longitudeLatitude){
										patharr.push(JSON.parse(res.data.data.records[num].longitudeLatitude));
									}
									// for (let i = 0; i < patharr.length; i++) {
									//   that.path2.push([patharr[i].longitude, patharr[i].latitude]);
									// }
								}
								this.polyline[0].points = patharr
								// if (res.data.data.longitudeLatitude) {
								// 	// console.log(JSON.parse(res.data.data.longitudeLatitude));
								// 	this.polyline[0].points = JSON.parse(res.data.data.longitudeLatitude)
								// }
							} else {
								uni.showToast({
									title: '暂无运输轨迹',
									icon: 'none',
									duration: 2000
								})
							}
						}
					}
				})
				// this.$request.baseRequest('post', '/hyOrderTravelPath/getInfo', {
				// 		orderId: this.id,
				// 	}).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}
				// 	// ]
				// 	// for(var i =0 ;i<7200;i++){
				// 	// 	var latitude = this.polyline[0].points[this.polyline[0].points.length -1].latitude + 0.0001
				// 	// 	var longitude = this.polyline[0].points[this.polyline[0].points.length -1].longitude + 0.0001
				// 	// 	this.polyline[0].points.push({latitude,longitude})
				// 	// }
				var that = this
				setTimeout(() => {
					that.durationTime = Math.ceil(30000 / that.polyline[0].points.length) //默认播放全程使用30秒，计算相连两点动画时长
					that.initMapData()
				}, 1000)

				// 	})
				// 	.catch(res => {
				// 		uni.hideLoading()
				// 		uni.showToast({
				// 			title: res.message,
				// 			icon: 'none',
				// 			duration: 2000
				// 		})
				// 	});
			},
			//设置地图
			initMapData() {
				this.initMarkers()
				this.mapContext = uni.createMapContext('myMap', this)
			},
			test() {
				this.mapContext.includePoints({
					points: this.polyline[0].points,
					padding: [100, 100, 1000, 100]
				})
			},
			//设置位置（从起点开始）
			initMarkers() {
				console.log(this.polyline[0])
				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>