uniapp 地图轨迹回放
插件下载地址:https://ext.dcloud.net.cn/plugin?id=7622#detail

<view class="marker"> <map id="map" style="width: 100vw; height: 100vh;" :scale="scale" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline"></map> </view>
const mapData = [{ latitude: 34.259428, longitude: 108.947040, problem: false, }, { latitude: 34.252918, longitude: 108.946963, problem: false, }, { latitude: 34.252408, longitude: 108.946240, problem: false, }, { latitude: 34.249286, longitude: 108.946184, problem: false, }, { latitude: 34.248670, longitude: 108.946640, problem: false, }, { latitude: 34.248129, longitude: 108.946826, problem: false, }, { latitude: 34.243537, longitude: 108.946816, problem: true, }, { latitude: 34.243478, longitude: 108.939003, problem: true, }, { latitude: 34.241218, longitude: 108.939027, problem: true, }, { latitude: 34.241192, longitude: 108.934802, problem: true, }, { latitude: 34.241182, longitude: 108.932235, problem: true, }, { latitude: 34.247227, longitude: 108.932311, problem: true, }, { latitude: 34.250833, longitude: 108.932352, problem: true, }, { latitude: 34.250877, longitude: 108.931756, problem: true, }, { latitude: 34.250944, longitude: 108.931576, problem: true, }, { latitude: 34.250834, longitude: 108.929662, problem: true, }, { latitude: 34.250924, longitude: 108.926015, problem: true, }, { latitude: 34.250802, longitude: 108.910121, problem: true, }, { latitude: 34.269718, longitude: 108.909921, problem: true, }, { latitude: 34.269221, longitude: 108.922366, problem: false, }, { latitude: 34.274531, longitude: 108.922388, problem: false, }, { latitude: 34.276201, longitude: 108.923433, problem: false, } ] export default { data() { return { latitude: mapData[0].latitude, longitude: mapData[0].longitude, scale: 14, markers: [{ id: 1, width: '45px', height: '45px', iconPath: '/static/car.png', latitude: mapData[0].latitude, longitude: mapData[0].longitude, callout:{ content: "车辆10545", //文本 color: '#ffffff', //文字颜色 fontSize: 12, //文本大小 borderRadius: 15, //边框圆角 borderWidth: 2, padding: 6, bgColor: '#00A8FF', //背景颜色 display: 'ALWAYS', //常显 } }], timer: null, polyline: [{ points: mapData, width: 8, arrowLine: true, color: '#5cf60d' }], currentIndex: 0, } }, onLoad(options) { this.trackData(); }, onUnload() { clearInterval(this.timer); this.timer = null; }, methods: { trackData() { let mapContext = uni.createMapContext("map", this); this.timer = setInterval(() => { this.currentIndex++; this.latitude = Number(this.polyline[0].points[this.currentIndex].latitude); this.longitude = Number(this.polyline[0].points[this.currentIndex].longitude); this.scale = 13; mapContext.translateMarker({ markerId: 1, destination: { longitude: this.longitude, latitude: this.latitude, }, duration: 100 }) if (this.currentIndex === this.polyline[0].points.length - 1) { clearInterval(this.timer); this.timer = null; } }, 500) } } }

浙公网安备 33010602011771号