高德地图行程轨迹图生成自定义（高德地图实时轨迹mark平滑实时移动）
实时获取位置坐标，根据坐标的移动变化在页面中进行轨迹回放，以达到实时轨迹移动的效果，借鉴轨迹回放插件原理，每次获取位置上一次点和最新的点坐标，将其进行轨迹回放即可，我来为大家科普一下关于高德地图行程轨迹图生成自定义?以下内容希望对你有帮助!
高德地图行程轨迹图生成自定义
实时获取位置坐标，根据坐标的移动变化在页面中进行轨迹回放，以达到实时轨迹移动的效果，借鉴轨迹回放插件原理，每次获取位置上一次点和最新的点坐标，将其进行轨迹回放即可。
模拟三组位置坐标数据
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,
});
});
},
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
