map组件使用translateMarker移动图标实现车辆轨迹回放效果,基础库2.11.0。我一开始使用map的markers设置始点、终点和车辆(车辆初始位置包含了角度rotate
)的初始位置。
toPlay() {//进行播放----------------------
let that = this;
if (that.data.progress < that.data.dataList.length-1 && that.data.playStatus) {
let index = ++that.data.progress;
that.setData({
progress: index,
currentPlayCar: that.data.dataList[index]
})
let direction = that.data.dataList[index].direction - that.data.initDirection;//旋转角度要以初始化设置marker时的角度为基础
console.log(that.data.markerId);
console.log(that.data.dataList[index].direction, that.data.initDirection,direction);
that.mapCtx.translateMarker({
markerId: that.data.markerId,
rotate: direction,
duration: that.data.currentSpeed.value,
autoRotate: true,
destination: {
latitude: that.data.dataList[index].blat,
longitude: that.data.dataList[index].blng
},
complete: function (res) {
if (that.data.playStatus){
that.toPlay();
}
}
});
} else {
that.toStop();
}
},
shortcutPlay(e) {//快速切换到某个播放点------------------
let that = this;
if (that.data.dataList.length) {
if (that.data.playStatus){
that.setData({
progress: e.detail.value-1
});
}else{
let index = e.detail.value;
// that.data.initDirection = that.data.dataList[index].direction;
that.data.markerId = new Date().getTime();
let cars = {
iconPath: "/resource/map-car5.png",
id: that.data.markerId,
latitude: that.data.dataList[index].blat,
longitude: that.data.dataList[index].blng,
rotate: that.data.dataList[index].direction,
width: 20,
height: 42,
anchor: { x: .5, y: .5 }
};
that.data.markers.splice(2, 1, cars);
that.setData({
progress: index,
markers: that.data.markers,
currentPlayCar: that.data.dataList[index]
});
}
}
},
主逻辑是这样的。但是现在遇到了问题先调用shortcutPlay切换到某个点再调用toPlay的时候移动的方向就会出现偏差