uniapp map实现APP 车辆轨迹回放

要实现车辆轨迹回放，可以使用uniapp的map组件。以下是步骤: 1.引入map组件: 在页面的vue文件里，先引入map组件。如下： ``` <template> <view> <map :show-location="true" :markers="markers"></map> </view> </template> <script> import {uniMap} from '@dcloudio/uni-ui'; export default { components: { uniMap }, data(){ return { markers: [] } } } </script> ``` 2.设置地图样式: 在页面的style里，设置map组件的高度和宽度 ``` <style> map { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; } </style> ``` 3.加载地图: 在mounted钩子函数里调用uniMap的createMap方法，创建地图 ``` mounted(){ this.createMap(); }, methods: { createMap(){ let mapCtx = uniMap.createMapContext('myMap', { showLocation: true }) mapCtx.moveToLocation(); } } ``` 4.显示轨迹: 使用setMarkers方法，将要显示的轨迹点添加到地图上 ``` let markers = [ { id: 1, longitude: 113.324520, latitude: 23.10229, iconPath: '/static/img/car.png', width: 50, height: 50, callout: { content: '起点' } }, { id: 2, longitude: 113.35938, latitude: 23.09211, iconPath: '/static/img/car.png', width: 50, height: 50, callout: { content: '终点' } }, { id: 3, longitude: 113.331441, latitude: 23.117706, iconPath: '/static/img/car.png', width: 50, height: 50, callout: { content: '中间点' } } ] this.markers = markers; ``` 5.轨迹回放: 使用定时器和moveToLocation方法，按照轨迹点顺序将地图移动到对应的位置 ``` play(){ let mapCtx = uniMap.createMapContext('myMap', { showLocation: true }) let i = 0; let len = markers.length; let timer = setInterval(() => { if(i >= len - 1){ clearInterval(timer); return; } i++; mapCtx.moveToLocation({ longitude: markers[i].longitude, latitude: markers[i].latitude }) }, 1000) } ``` 以上就是实现车辆轨迹回放的步骤。需要注意的是，地图的显示需要设置高度和宽度，因为地图是一个fixed定位的元素。另外，回放轨迹时需要使用定时器来控制地图移动的速度。