高德地圖行程軌迹圖生成自定義?實時獲取位置坐标，根據坐标的移動變化在頁面中進行軌迹回放，以達到實時軌迹移動的效果，借鑒軌迹回放插件原理，每次獲取位置上一次點和最新的點坐标，将其進行軌迹回放即可，我來為大家科普一下關于高德地圖行程軌迹圖生成自定義?以下内容希望對你有幫助!

高德地圖行程軌迹圖生成自定義

實時獲取位置坐标，根據坐标的移動變化在頁面中進行軌迹回放，以達到實時軌迹移動的效果，借鑒軌迹回放插件原理，每次獲取位置上一次點和最新的點坐标，将其進行軌迹回放即可。

模拟三組位置坐标數據

lineArr1: [ [[125.282105,43.831389],[125.274981,43.831266]], [[125.244175,43.80368],[125.258251,43.80368]] ], lineArr2: [ [[125.274981,43.831266],[125.271634,43.828851]], [[125.258251,43.80368],[125.283657,43.80368]] ], lineArr3: [ [[125.271634,43.828851],[125.267771,43.827179]], [[125.283657,43.80368],[125.28709,43.80368]] ], lineArr: [[125.282105,43.831389],[125.244175,43.80368] ]

setTimeout(function (){ map.clearMap(); that.lineArr=that.lineArr1; for(var i=0;i<that.lineArr.length;i ){ that.startAnimation(map,that.lineArr[i]) } },2000) setTimeout(function (){ map.clearMap(); that.lineArr=that.lineArr2; for(var i=0;i<that.lineArr.length;i ){ that.startAnimation(map,that.lineArr[i]) } },5000) setTimeout(function (){ map.clearMap(); that.lineArr=that.lineArr3; for(var i=0;i<that.lineArr.length;i ){ that.startAnimation(map,that.lineArr[i]) } },8000)

通過定時器設置模拟獲取數據，畫最新的位置坐标，實現軌迹播放

async startAnimation (map,lineArrs) { var that= this; AMap.plugin('AMap.MoveAnimation', function(){ var marker; marker = new AMap.Marker({ map: map, position:map.getCenter(), selectedClassNames: 'selected', autoRotation:false, offset: new AMap.Pixel(-34, -68), content:`<div style="position: relative"><div style="width:68px;height:68px;background: url(${that.bgphoto});background-size: 100%;transform: rotate(0);"></div><img style="position: absolute;width: 60%;left:20%;top:20%;" src=${that.photo}></div>`, }).on("click",function(e){ }); that.markers.push(marker); //map.setFitView(); marker.moveAlong(lineArrs, { // 每一段的時長 duration: 1000,//可根據實際采集時間間隔設置 // JSAPI2.0 是否延道路自動設置角度在 moveAlong 裡設置 autoRotation: false, }); }); },