siyu_app/pages_watch/index/equipment/sportsTrajectory.nvue

<template>
	<view>
		<view class="datebox">
			<picker :value="date" mode="date" fields="day" @change="changeday">
				<view class="datebox-item u-f u-f-ac u-f-ajc">
					日期：{{date}}
					<uni-icons type="down" size="18"></uni-icons>
				</view>
			</picker>
		</view>
		<!--轨迹地图-->
		<view class="mapbox">
			<map class="mapstyle" id='map' :latitude="latitude" :longitude="longitude" :markers="covers"
				:style="{width: windowWidth+'px', height: height}" :scale="13" :polyline="polyline">	
				<!-- <cover-view class="btnBox">
					<button :disabled="isDisabled" @click="start" class="btnBox_btn btnBox_one">开始回放</button>
					<button @click="pause" class="btnBox_btn btnBox_two">暂停</button>
				</cover-view> -->
			</map>
		</view>
	</view>
</template>

<script>
	import timeFormat from '@/utils/timeFormat.js'
	import { queryGnssByDateAndDeviceId,getInfoByDeviceIds } from "@/api/pages_watch/index.js"

	export default {
		data() {
			return {
				show: true,
				windowWidth: uni.getSystemInfoSync().windowWidth,
				windowHeight: uni.getSystemInfoSync().windowHeight,
				height: 0,
				date: "",
				map: null,
				movementInterval: null, // 用于存储定时器的引用
				mapHeight: 0,
				timer: null,

				isDisabled: false,
				isStart: false,
				playIndex: 1,

				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				// 标记点
				covers: [{
					id: 1,
					width: 42,
					height: 42,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '/static/images/pages_watch/icons/location.png',
					callout: {
						content: "", // 
						display: "ALWAYS",
						fontWeight: "bold",
						color: "#ffffff", //文本颜色
						fontSize: "12px",
						bgColor: "#282c34", //背景色
						padding: 5, //文本边缘留白
						textAlign: "center",
					},
					anchor: {
						x: 0.5,
						y: 0.5,
					},
				}],

				// 线
				polyline: [],

				// 坐标数据
				coordinate: [],
				isFamily: false
			}
		},
		onLoad(option) {
			this.isFamily = option.selectUser != '0'  
			const height = this.windowHeight - uni.upx2px(90)
			this.height = height + 'px'
			this.date = timeFormat(new Date())
			this.getGnss()
			this.getUser()
		},
		onReady() {
			// 创建map对象
			this.map = uni.createMapContext('map');
		},
		methods: {
			getGnss(){
				const param = {
					date: this.date,
					deviceId: uni.getStorageSync("deviceId")
				}
				queryGnssByDateAndDeviceId(param).then(res=>{			
					if(res.code == 200) {
						this.coordinate = res.data.map(item=>({
							...item,
							latitude: item.lat,
							longitude: item.lng,
						}))
						this.polyline = [{
							points: this.coordinate,
							color: '#025ADD',
							width: 4,
							dottedLine: false,
						}];
						this.latitude =  this.coordinate[this.coordinate.length - 1].latitude || 39.909
						this.longitude =  this.coordinate[this.coordinate.length - 1].longitude || 116.39742
						this.covers[0].latitude = this.latitude
						this.covers[0].longitude = this.longitude
						this.$nextTick(()=>{
							this.map.moveToLocation({
								latitude:this.latitude,
								longitude:this.longitude,
							})
							this.map.addMarkers({
								markers: this.covers,
								clear: false
							})
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
				})
			},
			changeday(e) {
				this.date = e.detail.value
				this.getGnss()
			},
			getUser() {
				const deviceId = uni.getStorageSync('deviceId') || ''
				const param = {
					deviceIds: deviceId,
					isFamily: this.isFamily
				}
				getInfoByDeviceIds(param).then(res => {
					if (res.code == 200) {
						this.covers[0].callout.content = res.data[0].ble
						this.$nextTick(()=>{
							this.map.addMarkers({
								markers: this.covers,
								clear: false
							})
						})
					}
				})
			},
			start() {
				if (this.movementInterval) {
					clearInterval(this.movementInterval);
				}
				this.isStart = true;
				this.moveMarker();
			},
			moveMarker() {
				if (!this.isStart) return;
				if (this.playIndex >= this.coordinate.length) {
					this.playIndex = 0;
					uni.showToast({
						title: "播放完成",
						duration: 1400,
						icon: "none",
					});
					this.isStart = false;
					this.isDisabled = false;
					return;
				}

				let datai = this.coordinate[this.playIndex];
				this.map.translateMarker({
					markerId: 1,
					autoRotate: true,
					destination: {
						longitude: datai.longitude,
						latitude: datai.latitude,
					},
					duration: 700,
					complete: () => {
						this.playIndex++;
						this.moveMarker();
					},
				});
			},
			pause() {
				this.isStart = false;
				this.isDisabled = false;
				if (this.movementInterval) {
					clearInterval(this.movementInterval);
					this.movementInterval = null;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.datebox {
		background-color: #fff;
		padding: 24rpx;
		.datebox-item {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}
	.mapstyle {
		position: relative;
	}

	.btnBox {
		width: 750rpx;
		position: absolute;
		bottom: 60rpx;
		z-index: 99;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		.btnBox_btn {
			margin: 0;
			background-color: #1e80ff;
			color: #fff;
			border: none;
			width: 90px;
			font-size: 10px;
			&::after {
				border: none;
			}
		}
		.btnBox_one {
			background-color: #1e80ff;
		}
		.btnBox_two {
			background-color: #e0433e;
		}
	}
</style>