先看效果图

html

<map id='map' :latitude="addressInfo.latitude" :longitude="addressInfo.longitude" :markers="covers"style="height:100vh" :showLocation="showLocation" :includePoints="true":polyline="polyline"></map>

js

<script>//我这里用的高德import amapFile from '@/common/map/amap-wx.130.js'var myAmapFun = new amapFile.AMapWX({key: '你自己申请的高德key'});export default {data() {return {showLocation: true,userInfo: {},addressInfo: {},covers: [{id: 1,width: 42,height: 42,rotate: 0,latitude: 34.74821,longitude: 113.61332,iconPath: '/static/image/tram.png',anchor: {x: 0.5,y: 0.5,},}],polyline: [{"points": [{"longitude": 113.619996,"latitude": 34.74989}, {"longitude": 113.62002,"latitude": 34.749889}, {"longitude": 113.66,"latitude": 34.749889}, {"longitude": 113.620605,"latitude": 34.749889}, {"longitude": 113.620782,"latitude": 34.749889}, {"longitude": 113.620782,"latitude": 34.749889}, {"longitude": 113.620782,"latitude": 34.750442}, {"longitude": 113.620782,"latitude": 34.750919}, {"longitude": 113.620782,"latitude": 34.751241}, {"longitude": 113.620787,"latitude": 34.75152}, {"longitude": 113.620787,"latitude": 34.75188}, {"longitude": 113.620782,"latitude": 34.752464}, {"longitude": 113.620787,"latitude": 34.753419}, {"longitude": 113.620782,"latitude": 34.753854}, {"longitude": 113.620782,"latitude": 34.755163}, {"longitude": 113.620803,"latitude": 34.755377}, {"longitude": 113.620605,"latitude": 34.755388}, {"longitude": 113.619865,"latitude": 34.755436}, {"longitude": 113.61737,"latitude": 34.755613}, {"longitude": 113.61686,"latitude": 34.755651}, {"longitude": 113.616485,"latitude": 34.755683}, {"longitude": 113.615959,"latitude": 34.75572}, {"longitude": 113.61546,"latitude": 34.755758}, {"longitude": 113.614559,"latitude": 34.755822}, {"longitude": 113.614463,"latitude": 34.755828}, {"longitude": 113.613653,"latitude": 34.755892}, {"longitude": 113.613486,"latitude": 34.755898}, {"longitude": 113.613079,"latitude": 34.75593}, {"longitude": 113.61259,"latitude": 34.755967}, {"longitude": 113.611689,"latitude": 34.756032}, {"longitude": 113.611083,"latitude": 34.756075}, {"longitude": 113.610584,"latitude": 34.756107}, {"longitude": 113.610128,"latitude": 34.756133}, {"longitude": 113.609393,"latitude": 34.756203}, {"longitude": 113.60831,"latitude": 34.756278}, {"longitude": 113.607044,"latitude": 34.756375}, {"longitude": 113.606175,"latitude": 34.756541}, {"longitude": 113.605397,"latitude": 34.756675}, {"longitude": 113.60463,"latitude": 34.756756}, {"longitude": 113.603439,"latitude": 34.756852}, {"longitude": 113.60331,"latitude": 34.756863}, {"longitude": 113.602478,"latitude": 34.756954}, {"longitude": 113.602183,"latitude": 34.757003}, {"longitude": 113.601926,"latitude": 34.75704}, {"longitude": 113.600885,"latitude": 34.757233}, {"longitude": 113.599839,"latitude": 34.757426}, {"longitude": 113.599753,"latitude": 34.757448}, {"longitude": 113.599169,"latitude": 34.75755}, {"longitude": 113.598632,"latitude": 34.757652}, {"longitude": 113.59831,"latitude": 34.757711}, {"longitude": 113.597613,"latitude": 34.757845}, {"longitude": 113.596749,"latitude": 34.758006}, {"longitude": 113.595988,"latitude": 34.758151}, {"longitude": 113.595097,"latitude": 34.758317}, {"longitude": 113.593488,"latitude": 34.758606}, {"longitude": 113.592914,"latitude": 34.758708}, {"longitude": 113.591251,"latitude": 34.758982}, {"longitude": 113.589395,"latitude": 34.759341}, {"longitude": 113.588987,"latitude": 34.759427}, {"longitude": 113.588579,"latitude": 34.759513}, {"longitude": 113.588579,"latitude": 34.759513}, {"longitude": 113.588359,"latitude": 34.759631}, {"longitude": 113.588091,"latitude": 34.759733}, {"longitude": 113.587812,"latitude": 34.759862}, {"longitude": 113.587458,"latitude": 34.760093}, {"longitude": 113.587308,"latitude": 34.76021}, {"longitude": 113.587088,"latitude": 34.76042}, {"longitude": 113.586943,"latitude": 34.760575}, {"longitude": 113.586814,"latitude": 34.760741}, {"longitude": 113.586793,"latitude": 34.760768}, {"longitude": 113.586621,"latitude": 34.761042}, {"longitude": 113.586519,"latitude": 34.761267}, {"longitude": 113.58645,"latitude": 34.76146}, {"longitude": 113.586385,"latitude": 34.761675}, {"longitude": 113.586353,"latitude": 34.761841}, {"longitude": 113.586337,"latitude": 34.76197}, {"longitude": 113.58631,"latitude": 34.762539}, {"longitude": 113.586337,"latitude": 34.762716}, {"longitude": 113.586439,"latitude": 34.763172}, {"longitude": 113.586509,"latitude": 34.763381}, {"longitude": 113.586659,"latitude": 34.763719}, {"longitude": 113.586782,"latitude": 34.764035}, {"longitude": 113.586804,"latitude": 34.764105}, {"longitude": 113.586804,"latitude": 34.764196}, {"longitude": 113.587458,"latitude": 34.765323}, {"longitude": 113.58756,"latitude": 34.7655}, {"longitude": 113.587785,"latitude": 34.765881}, {"longitude": 113.589175,"latitude": 34.7683}, {"longitude": 113.589658,"latitude": 34.769126}, {"longitude": 113.590103,"latitude": 34.769829}, {"longitude": 113.590296,"latitude": 34.770124}, {"longitude": 113.591363,"latitude": 34.771728}, {"longitude": 113.591734,"latitude": 34.77228}, {"longitude": 113.591996,"latitude": 34.772763}, {"longitude": 113.592265,"latitude": 34.77337}, {"longitude": 113.59249,"latitude": 34.774029}, {"longitude": 113.592517,"latitude": 34.774136}, {"longitude": 113.592538,"latitude": 34.774222}, {"longitude": 113.592871,"latitude": 34.775623}, {"longitude": 113.592919,"latitude": 34.775842}, {"longitude": 113.593016,"latitude": 34.776234}, {"longitude": 113.59337,"latitude": 34.777747}, {"longitude": 113.593735,"latitude": 34.779265}, {"longitude": 113.593858,"latitude": 34.779753}, {"longitude": 113.594153,"latitude": 34.781035}, {"longitude": 113.594528,"latitude": 34.782596}, {"longitude": 113.594561,"latitude": 34.782714}, {"longitude": 113.594571,"latitude": 34.782763}, {"longitude": 113.594663,"latitude": 34.783181}, {"longitude": 113.594748,"latitude": 34.78354}, {"longitude": 113.594931,"latitude": 34.784265}, {"longitude": 113.594931,"latitude": 34.784265}, {"longitude": 113.595236,"latitude": 34.785547}, {"longitude": 113.595531,"latitude": 34.786807}, {"longitude": 113.595816,"latitude": 34.787971}, {"longitude": 113.595945,"latitude": 34.788422}, {"longitude": 113.596122,"latitude": 34.788975}, {"longitude": 113.596368,"latitude": 34.789581}, {"longitude": 113.596572,"latitude": 34.790042}, {"longitude": 113.597329,"latitude": 34.79148}, {"longitude": 113.598096,"latitude": 34.792966}, {"longitude": 113.598241,"latitude": 34.793282}, {"longitude": 113.598359,"latitude": 34.793588}, {"longitude": 113.598396,"latitude": 34.793701}, {"longitude": 113.598434,"latitude": 34.793824}, {"longitude": 113.59852,"latitude": 34.794178}, {"longitude": 113.5986,"latitude": 34.794602}, {"longitude": 113.598632,"latitude": 34.794838}, {"longitude": 113.598638,"latitude": 34.794913}, {"longitude": 113.598675,"latitude": 34.79531}, {"longitude": 113.59867,"latitude": 34.795605}, {"longitude": 113.598664,"latitude": 34.795701}, {"longitude": 113.598664,"latitude": 34.795701}, {"longitude": 113.598632,"latitude": 34.795932}, {"longitude": 113.598579,"latitude": 34.796318}, {"longitude": 113.598466,"latitude": 34.796844}, {"longitude": 113.598326,"latitude": 34.797381}, {"longitude": 113.598214,"latitude": 34.797815}, {"longitude": 113.598026,"latitude": 34.798684}, {"longitude": 113.598069,"latitude": 34.798947}, {"longitude": 113.598031,"latitude": 34.799215}, {"longitude": 113.598031,"latitude": 34.799215}, {"longitude": 113.597946,"latitude": 34.79988}, {"longitude": 113.597913,"latitude": 34.800277}, {"longitude": 113.597886,"latitude": 34.801216}, {"longitude": 113.597881,"latitude": 34.802273}, {"longitude": 113.597865,"latitude": 34.803158}, {"longitude": 113.597865,"latitude": 34.803158}, {"longitude": 113.597924,"latitude": 34.80326}, {"longitude": 113.597946,"latitude": 34.80334}, {"longitude": 113.597956,"latitude": 34.803523}, {"longitude": 113.597983,"latitude": 34.803984}, {"longitude": 113.597983,"latitude": 34.804242}, {"longitude": 113.597962,"latitude": 34.804478}, {"longitude": 113.59793,"latitude": 34.804687}, {"longitude": 113.59793,"latitude": 34.804692}, {"longitude": 113.597886,"latitude": 34.80488}, {"longitude": 113.597817,"latitude": 34.805089}, {"longitude": 113.597693,"latitude": 34.805363}, {"longitude": 113.597586,"latitude": 34.805556}, {"longitude": 113.597415,"latitude": 34.805824}, {"longitude": 113.597232,"latitude": 34.806066}, {"longitude": 113.596942,"latitude": 34.80643}, {"longitude": 113.596588,"latitude": 34.806897}, {"longitude": 113.596379,"latitude": 34.807208}, {"longitude": 113.596213,"latitude": 34.807514}, {"longitude": 113.596122,"latitude": 34.807745}, {"longitude": 113.595891,"latitude": 34.808201}, {"longitude": 113.595682,"latitude": 34.808667}, {"longitude": 113.595612,"latitude": 34.808903}, {"longitude": 113.595569,"latitude": 34.809075}, {"longitude": 113.595473,"latitude": 34.809499}, {"longitude": 113.595398,"latitude": 34.80989}, {"longitude": 113.59528,"latitude": 34.810572}, {"longitude": 113.594534,"latitude": 34.814793}, {"longitude": 113.594389,"latitude": 34.815673}, {"longitude": 113.594185,"latitude": 34.816891}, {"longitude": 113.593783,"latitude": 34.816998}, {"longitude": 113.588054,"latitude": 34.817079}, {"longitude": 113.584824,"latitude": 34.817143}, {"longitude": 113.583687,"latitude": 34.817111}, {"longitude": 113.581391,"latitude": 34.817106}, {"longitude": 113.57909,"latitude": 34.817106}, {"longitude": 113.578575,"latitude": 34.817121}, {"longitude": 113.5785,"latitude": 34.817095}, {"longitude": 113.578038,"latitude": 34.817293}, {"longitude": 113.576788,"latitude": 34.817964}, {"longitude": 113.57666,"latitude": 34.818034}, {"longitude": 113.569439,"latitude": 34.821853}, {"longitude": 113.568656,"latitude": 34.822266}, {"longitude": 113.568291,"latitude": 34.822459}, {"longitude": 113.568221,"latitude": 34.822497}, {"longitude": 113.566575,"latitude": 34.822143}, {"longitude": 113.566381,"latitude": 34.822025}, {"longitude": 113.566494,"latitude": 34.821719}, {"longitude": 113.566703,"latitude": 34.821156}, {"longitude": 113.566725,"latitude": 34.821086}, {"longitude": 113.567325,"latitude": 34.819423}, {"longitude": 113.567159,"latitude": 34.819418}, {"longitude": 113.566392,"latitude": 34.819423}, {"longitude": 113.565636,"latitude": 34.819418}, {"longitude": 113.565636,"latitude": 34.819418}, {"longitude": 113.565609,"latitude": 34.819562}, {"longitude": 113.565561,"latitude": 34.81975}, {"longitude": 113.565561,"latitude": 34.81975}, {"longitude": 113.56629,"latitude": 34.819761}, {"longitude": 113.566322,"latitude": 34.819772}, {"longitude": 113.566344,"latitude": 34.819798}, {"longitude": 113.566344,"latitude": 34.819852}, {"longitude": 113.565813,"latitude": 34.821295}, {"longitude": 113.565714,"latitude": 34.821566}],"color": "#0091ff","width": 6,"arrowLine": true}],map: '',};},onReady() {this.map = uni.createMapContext('map', this);//必不可少},methods:{//此方法就是轨迹运动rewindTracks() {console.log("正在飙车中......")this.map.moveAlong({markerId: 1,path: this.polyline[0].points,autoRotate: true,duration: 10000,success: (e) => {console.log('成功', e)uni.showToast({title: '播放完成',duration: 2000,icon: 'none'});},fail: (e) => {console.log('失败', e)},complete: (e) => {console.log('ok', e)},})},}}</script>

主要使用的就是moveAlong方法

如果觉得《小程序 历史轨迹回放 地图播放历史轨迹》对你有帮助，请点赞、收藏，并留下你的观点哦！