小程序(物流、快递)，接入GPS北斗获取路线以及当前车辆位置

1、前端目前的路线是在数据中定义模拟的。

2、实际使用中，需要后端接入定位系统，以及车辆硬件支持，拿到车辆的定位信息，以及后台录入的车辆号码及驾驶人信息或需要的信息。

3、当前代码复制即可使用，只需要把绑定数据切换为接口返回数据。

<template>
	<view class="content">
		<map style="width:100%;height:100%;" :latitude="latitude" :longitude="longitude" :scale="scale"
			:markers="markers" @markertap="onMarkerTap" :polyline='polyline'>
		</map>

		<view class="content-up" v-if="mapshow">
			<view>
				<text>路程信息</text>
				<view @click="Outmapshow">
					<image src="/static/out.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			<view>
				<view v-for="(img, index) in images" :key="index" class="icon">
					<image src="/static/right.png" style="width: 100%; height: 100%" v-if="index<currentIndex"></image>
				</view>
			</view>
			<view>路程: {{mapupdata.km}}km</view>
			<view>预计: {{mapupdata.date}} 到达</view>
			<view>车牌号: {{mapupdata.number}}</view>
			<view>车辆状态: <view :style="{background:mapupdata.type=='暂停'?'#FF0000':'#55aa7f'}">{{mapupdata.type}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 34.79977,
				longitude: 113.663221,
				scale: 14,
				polyline: [],
				markers: [],
				images: Array(10).fill('/static/right.png'),
				currentIndex: 0, // 当前图片索引
				mapshow: false,
				mapupdata: ''
			}
		},
		mounted() {
			this.showImages();
			setInterval(this.showImages, 1000);
		},
		created() {
			this.markers = require('../../static/markers.json');
		},
		methods: {
			Outmapshow() {
				this.mapshow = false
				this.polyline = [] //初始化
			},
			showImages() {
				this.currentIndex = (this.currentIndex + 2) % 12; // 每次增加2并对12取模  
				if (this.currentIndex === 0) {
					this.currentIndex = 2; // 如果结果为0，则设置为2  
				}
			},
			onMarkerTap(e) {
				const markerId = e.markerId;
				this.markers.forEach((item) => {
					if (item.id == markerId) {
						this.polyline = item.polyline
						this.mapupdata = item
						this.mapshow = true
						this.currentIndex = 0
						this.$forceUpdate()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;

		.content-up {
			width: 100%;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			background: #FFFFFF;
			float: left;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99999;
			padding-bottom: 80rpx;
		}

		.content-up>view:nth-child(1) {
			width: 90%;
			height: 40rpx;
			margin: 30rpx auto 0;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.content-up>view:nth-child(1)>view {
			width: 40rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 9;
		}

		.content-up>view:nth-child(2) {
			width: 630rpx;
			height: 70rpx;
			border-radius: 5rpx;
			margin: 65rpx auto 0;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f3f3f3;
		}

		.icon {
			width: 60rpx;
			height: 60rpx;
		}


		.content-up>view:nth-child(3),
		.content-up>view:nth-child(4),
		.content-up>view:nth-child(5),
		.content-up>view:nth-child(6) {
			width: 630rpx;
			height: 70rpx;
			margin: 10rpx auto 0;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;
		}

		.content-up>view:nth-child(6)>view {
			width: 70rpx;
			height: 50rpx;
			background: #FF0000;
			border-radius: 5rpx;
			text-align: center;
			line-height: 50rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>

车辆图片，可自定义