百度地图3.0有一个出行规划的功能,给定两个点,可以画出两个点之间的路线
https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/routeplan
遇到的问题:
需要在起点后终点添加途经点,规划多个点,但是目前没有找到增加途经点的功能,只能搜起点和终点;
解决:
据说有个非官方的参数waypoints
加进去可以解决,但是试了一下没生效。
思路: 可以把路线拆分一下,每两个点之间搜一次路线,添加polyline上去,这样子循环后就连成了一条完整的线
先生成一个riding的实例,传入初始化时候的map地图实例
const riding = new BMap.RidingRoute(this.map)
然后写个search函数,参数points 是途经点,包括起点和终点,
循环这个points,挨个search
// 每两个点之间搜一次路线
for (let i = 0; i < points.length - 1; i++) {
if (i != points.length - 1) {
riding.search(points[i], points[i + 1]); //绘制两个点之间的路线
}
}
search并不是调用后马上就能得到结果的,所以要在初始化的时候传入回调函数
const riding = new BMap.RidingRoute(this.map, {
onSearchComplete: (results: any) =>{
const pts = results.getPlan(0).getRoute(0).getPath();
// 生成两个点之间的线,填充到地图上
const polyline = new BMap.Polyline(pts,{enableMassClear: true});
// 记录下这条线,方便后续清除这条线
this.customPolylines.push(polyline)
this.map.addOverlay(polyline);
// 必须把这次的搜索结果清空,否则永远都无法连起来
riding.clearResults();
}
})
每两个点之间的搜索,都会触发一次onSearchComplete,results可以通过results.getPlan(0).getRoute(0).getPath()
得到路径,这个路径是那两个点之间的路径,不是整个路线的。
然后用这个路线去生成折线polyline,polyline也算一种overlay,所以要调用addOverlay方法将折线添加到地图上,并且必须将这一次的搜索结果清空(两个点之间的),否则下一段路径的添加会remove掉这一段的路径。所以调riding.clearResults();
清空结果
这样子路线能出来了,但是我们会发现,选了几个中途点后,再取消,会重新画出新的线,但是原来的线没清楚掉
所以在循环之前,先清除掉所有的记录的线,在循环之前加上清除的代码
// 每一次搜路线前,都清除掉线
this.customPolylines.forEach(polyline=>{
this.map.removeOverlay(polyline)
});
this.customPolylines = [];
// 每两个点之间搜一次路线
for (let i = 0; i < points.length - 1; i++) {
if (i != points.length - 1) {
this.riding.search(points[i], points[i + 1]); //绘制两个点之间的路线
}
}
网友评论