先看效果图
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.620186,
"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方法