wangluohuoyun-huozhuapp/components/cuixinyu-trajectory/cuixinyu-trajectory.nvue

<template>
	<view>
		<!-- <web-view allow="fullscreen" src="/hybrid/html/style3.html"></web-view> -->
		<map :show-compass="true" id='map' :style="{ width: '750rpx', height: windowHeight + 'px' }"  :latitude="latitude" :longitude="longitude" :markers="covers" :scale="15.5" :polyline="polyline">
		</map>
		
		<!-- <view class="container">
			<map id='map' :latitude="latitude" :longitude="longitude" :markers="covers" :style="{ width: '100%', height: mapHeight + 'px' }"
			 :scale="13" :polyline="polyline">
			</map>

			
		</view> -->
		<view style="
					display: flex;
					justify-content: center;
					align-items: center;
					width: 750rpx;
					position: absolute;
					bottom: 60rpx;
					z-index: 99;">
			<button @click="start" style="
			width: 200rpx;
			border-radius: 50%;
			background-color: #3282FF;
			height: 80rpx;"><text style="color: #FFFFFF;font-size: 15px">轨迹回放</text></button>
			
		</view>
	</view>
</template>

<script>
	const app = getApp();
	var cxy = 0;
	export default {
		data() {
			return {
				windowHeight: 0,
				latitude: '',
				longitude: '',
				covers: [{
					id: 1,
					width: 20,
					height: 20,
					// rotate: 270,
					latitude: 41.1059556749132,
					longitude: 123.0674815538194,
					iconPath: '/static/img/location/point.png',
					callout: {
						content: "辽C·6L650", // 车牌信息
						display: "ALWAYS",
						fontWeight: "bold",
						color: "#5A7BEE", //文本颜色
						fontSize: "12px",
						bgColor: "#ffffff", //背景色
						padding: 5, //文本边缘留白
						textAlign: "center",
					},
					anchor: {
						x: 0.5,
						y: 0.5,
					},
				}], 
				
				map:null,
				
				
				timer: null,
				
				isStart: false,
				playIndex:1,
				
				id: 0, // 使用 marker点击事件 需要填写id
				
				// 标记点
				// covers: [{
				// 	id: 1,
				// 	width: 42,
				// 	height: 47,
				// 	rotate: 270,
				// 	latitude: 34.259428,
				// 	longitude: 108.947040,
				// 	iconPath: 'http://cdn.zhoukaiwen.com/car.png',
				// 	callout: {
				// 		content: "陕A·88888", // 车牌信息
				// 		display: "ALWAYS",
				// 		fontWeight: "bold",
				// 		color: "#5A7BEE", //文本颜色
				// 		fontSize: "12px",
				// 		bgColor: "#ffffff", //背景色
				// 		padding: 5, //文本边缘留白
				// 		textAlign: "center",
				// 	},
				// 	anchor: {
				// 		x: 0.5,
				// 		y: 0.5,
				// 	},
				// }],

				// 线
				polyline: [],

				// 坐标数据
				coordinate: [],
			}
		},
		onLoad(options) {
			var that = this
			var systemInfo = uni.getSystemInfoSync()
			that.map = uni.createMapContext('map');
			console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
			console.log(systemInfo)
			that.windowHeight = systemInfo.windowHeight;
			//别的页面跳转传入
			// if(!!options.index) {
			// 	console.log('有轨迹索引：' + options.index)
			// 	that.jg(options.index)
			// } else {
			// 	console.log('无轨迹索引') 
			// }
			
			//假数据
				that.jg()
		},
		onShow() {
			
			
		},
		methods: {
			jg(index) {
				var that = this
				// var list  = app.globalData.trajectorylist[index]
				//假数据
				var list = [[104.11262817072013,30.58785571038842],[104.11267016098672,30.58788768673709],[104.11268815623596,30.58788066891832],[104.11272314665139,30.587855630019803],[104.11279812588855,30.587800545961333],[104.11281311969452,30.58771450139777],[104.11258617640551,30.587675679257952],[104.11212028996098,30.58776109839399],[104.11163339873552,30.587873534907622],[104.11121648332397,30.587970900871422],[104.11088654434462,30.58803718111346],[104.11057359625593,30.5880494237874],[104.11035163167045,30.588107611602812],[104.11024364743112,30.58811169322907],[104.11003067627313,30.58809484349796],[104.10992868974834,30.588101920349402],[104.1096837213051,30.58816211904157],[104.1092867680256,30.58831545600633],[104.10867082122292,30.588373898597393],[104.10795585967642,30.58840137615305],[104.10718087301872,30.58838485075459],[104.10645885948344,30.58835226218315],[104.1058518289909,30.58832559008871],[104.10535179085741,30.58830984992133],[104.10490874746588,30.58831007585494],[104.10462871486894,30.5882982095888],[104.1042916703609,30.58827336187798],[104.10382859953164,30.5882105520039],[104.10323649353396,30.58811677576343],[104.10263336885944,30.58804899732469],[104.10219126619663,30.58799714824715],[104.10202022179054,30.5878971746662],[104.10200521168947,30.587659092186442],[104.10202320865245,30.58737898215278],[104.10210022255824,30.587190884351102],[104.1021852414007,30.58712582869989],[104.10237128095089,30.58696669958113],[104.1025383137222,30.58677556451472],[104.10263332902122,30.58656544976139],[104.10267033436695,30.586465398255452],[104.10267133425926,30.586453393436912],[104.10269133817472,30.58643837996155],[104.1026753353411,30.58646139479639],[104.10268033642215,30.58646139281006],[104.10264032757779,30.58645540645753],[104.1026453295588,30.586488416639042],[104.10262632662739,30.586533440733213],[104.10257831950132,30.586660506445092],[104.10249530538262,30.58682359897764],[104.10233827394386,30.58699072105156],[104.10216523674897,30.5871318383939],[104.10206321458746,30.58723191316259],[104.10201320871903,30.58747402090636],[104.10201321630461,30.58775712547563],[104.10213625111113,30.58792914363932],[104.10245632762741,30.587981041400113],[104.10302645079821,30.58804383658719],[104.10349554035973,30.58809665724075],[104.1037615865323,30.5881305524741],[104.10387060438723,30.588141507517992],[104.10396661964624,30.588151467586552],[104.10430166906984,30.5881733201544],[104.10483873662507,30.588193067436162],[104.10550880171273,30.58822473624297],[104.10622084728116,30.58825436039147],[104.10694886915907,30.5882919550277],[104.10767086576674,30.58831652467279],[104.10836183865004,30.58830607829725],[104.10890580085373,30.588270701811272],[104.10925077027441,30.58826846368635],[104.1093437605644,30.58824839138817],[104.10946074788933,30.58822730142722],[104.10966872267439,30.58814812458102],[104.10995368602772,30.58808289516164],[104.11038862441845,30.58804155961188],[104.11092653467065,30.587934112263753],[104.11156041124947,30.58778355996879],[104.11223026082467,30.58762095597985],[104.11291008746153,30.58745932433694],[104.11357289826498,30.58729668743599],[104.11419770193609,30.58714407005203],[104.11475451240712,30.58701050671756],[104.11518035811253,30.5869050657829],[104.11539027910668,30.586852845511082],[104.11546025213438,30.58682776884644],[104.11560519757073,30.586849636598252],[104.11539927835331,30.586949872632832],[104.11493744974922,30.58706335444194],[104.11444462235875,30.58718785987891],[104.11398477357619,30.587299320430862],[104.1134929250277,30.58742380497047],[104.11306804788724,30.58755922547424],[104.11288010276677,30.58773545198354],[104.11278513005412,30.58783056811525],[104.11271514909583,30.587870642348832],[104.11259118025207,30.58786574528161],[104.11251819885757,30.5878848136816],[104.11249120591842,30.58790084223964],[104.11253619441777,30.58788479856955],[104.11254819134263,30.58788078700801],[104.11254819134263,30.58788078700801],[104.11255019044545,30.58786577978076],[104.11255019044545,30.58786577978076]]
				 
				var coordinate = []
				var latitude_list = []
				var longitude_list = []
				console.log(list)
				for(var i = 0; i < list.length; i++) {
					var item = {
						latitude: list[i][1],
						longitude: list[i][0],
					}
					
					coordinate.push(item)
					latitude_list.push(list[i][1])
					longitude_list.push(list[i][0])
				}
				console.log(coordinate)
				that.coordinate = coordinate
				if(list.length > 1) {
					var px_latitude = latitude_list.sort(function(a, b){
						 return a-b;
					})
					var px_longitude = longitude_list.sort(function(a, b){
						 return a-b;
					})
					that.latitude = (px_latitude[px_latitude.length - 1] + px_latitude[0]) / 2
					that.longitude = (px_longitude[px_longitude.length - 1] + px_longitude[0]) / 2
					console.log(that.latitude)
					console.log(that.longitude)
				} else {
					that.latitude = that.coordinate[0].latitude
					that.longitude = that.coordinate[0].longitude
				}
				
				

				that.covers = [{
					id: 1,
					width: 20,
					height: 20,
					// rotate: 270,
					latitude: that.coordinate[0].latitude,
					longitude: that.coordinate[0].longitude,
					iconPath: '/static/img/location/point.png',
					callout: {
						content: "辽C·6L650", // 车牌信息
						display: "ALWAYS",
						fontWeight: "bold",
						color: "#5A7BEE", //文本颜色
						fontSize: "12px",
						bgColor: "#ffffff", //背景色
						padding: 5, //文本边缘留白
						textAlign: "center",
					},
					anchor: {
						x: 0.5,
						y: 0.5,
					},
				}]
				that.polyline = [{
					points: that.coordinate,
					color: 'red',
					width: 4,
					dottedLine: false,
				}];
				
			},

			
			start() {
				var that = this
				that.isStart = true;
				let data = that.coordinate;
				let len = data.length;
				// var list = []
				cxy = setInterval(() => {
					console.log(that.playIndex + '/' + len)
					if(that.playIndex ==  len) {
						clearInterval(cxy);
						console.log('okokok');
						// uni.showToast({
						// 	title: '播放完成',
						// 	duration: 1500,
						// 	icon: 'none',
						// 	mask: false
						// });
						that.playIndex = 0;
						that.isStart = false;
					} else {
						let datai = data[that.playIndex];
						that.map.translateMarker({
							markerId: 1,
							autoRotate:true,
							// rotate: 90,
							destination: {
								longitude: datai.longitude, // 车辆即将移动到的下一个点的经度
								latitude: datai.latitude, // 车辆即将移动到的下一个点的纬度
							},
							duration: 250,
							complete: function(){
								that.playIndex++;
								
								
							},
							animationEnd: function() {
								
								// 轨迹回放完成
								// list.push({
								// 	longitude: data[that.playIndex - 1].longitude,
								// 	latitude: data[that.playIndex - 1].latitude
								// })
								// that.polyline = [{
								// 	points: that.coordinate,
								// 	color: 'red',
								// 	width: 4,
								// 	dottedLine: false,
								// },
								// {
								// 	points: list,
								// 	color: 'green',
								// 	width: 4,
								// 	dottedLine: false,
								// },
								// ];
							},
							fail(e) {
								// 轨迹回放失败
								uni.showToast({
									title: '播放失败',
									duration: 1500,
									icon: 'none',
									mask: false
								});
							},
						});
					}
					
					
				}, 250)
				
				
				
			},
		}
	}
</script>

<style>
/* page {
	background-color: #25263A;
} */
	
</style>