项目场景:
使用百度地图API绘制多点的驾驶路线
问题描述
BUG如上,各点之间出现直线,并没有按照驾驶路线划线
原因分析:
起初我以为是百度API的问题,以为driving.setSearchCompleteCallback
返回的起点终点反了,在我仔细观察返回经纬度后发现问题在于使用for循环同时进行多个driving.search(point1, point2)
的时候,由于网络延迟或者种种原因driving.setSearchCompleteCallback
返回的路径并不是按照我发送的顺序,比如我search
1->2,2->3,3->4的路线,而driving.setSearchCompleteCallback
返回点是2->3,1->2,3->4
,所以就会出现上图的BUG
for (let i = 0; i < route.length - 1; i++) {
const {
lat: lat1, lng: lng1 } = route[i]
const {
lat: lat2, lng: lng2 } = route[i + 1]
let point1 = new BMap.Point(lng1, lat1)
let point2 = new BMap.Point(lng2, lat2)
driving.search(point1, point2)
}
driving.setSearchCompleteCallback(function () {
const pts = driving.getResults().getPlan(0).getRoute(