https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.moveAlong.html
- moveAlong不持支同时发起多个动画,当有多个marker同时移动时,只有最后一个会动起来。
- 尽管第一个动画已经停止了,但是当最后一个动画结束时,多个complete函数回调会同时调用。
- complete函数应该是动画播放完成的回调,而文档说的是接口调用成功的回调,这个说法应该是不准确的,一般开发人员理解为只要动画开始播放了就表示接口调用成功了,而非动画结束播放才算接口成功。(success和fail应该也是这样的,没有测试)。
- autoRotate属性设为true后,并没有根据路径方向自动调整icon角度。
测试代码:
// 画多条路径和marker
drawPolylines (traffic) {
let marker = {id:car.id, latitude:car.latitude, longitude: car.longitude}
traffic.map(car => {
polylines.push({
points: car.points,
marker:marker // 关联路径和初始位置marker
});
})
// ……
}
// ……
// 动起来
/* this.state.traffic.map((p,i) => {
console.log("Moving %d", p.marker.id);
this.mapCtx.moveAlong({
markerId: p.marker.id,
path: p.points,
duration: 20 * 1000,
})
})
*/
// 测试:先播放第一个marker,总计20秒
let p = this.state.polylines[0];
this.mapCtx.moveAlong({
markerId: p.marker.id,
path: p.points,
autoRotate: true,
duration: 20 * 1000,
complete: (res) => {
console.debug("move result 1: %o", res);
}
})
// 3s后,播放第二个marker,总计20秒
setTimeout(() => {
p = this.state.polylines[1];
this.mapCtx.moveAlong({
markerId: p.marker.id,
path: p.points,
autoRotate: true,
duration: 20 * 1000,
complete: (res) => {
console.debug("move result 2: %o", res);
}
})
}, 3000);
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
// 3s后,播放第二个marker,总计20秒
补充:三秒以后第一个动画就停了, 23秒以后,两个complete回调同时输出。