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 = falsethis.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.polylinethis.mapupdata = itemthis.mapshow = truethis.currentIndex = 0this.$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>
车辆图片，可自定义