小程序 历史轨迹回放 地图播放历史轨迹

先看效果图

 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方法

 

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值