美文网首页
百度地图出行规划 js 添加途经点

百度地图出行规划 js 添加途经点

作者: Asuler | 来源:发表于2022-08-12 15:46 被阅读0次

百度地图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]);  //绘制两个点之间的路线
      }
    }

相关文章

  • 百度地图出行规划 js 添加途经点

    百度地图3.0有一个出行规划的功能,给定两个点,可以画出两个点之间的路线https://lbsyun.baidu....

  • 【功能优化】百度地图-添加途经点

    产品与对应产品功能 百度地图—“添加途经点”功能 产品功能页面截图 产品功能的现状和逻辑 考虑用户:使用百度地图规...

  • 百度地图途经点

  • iOS 跳转 百度地图 高德地图 自带地图

    在做地图跳转操作之前请先在plist文件添加相应的配置参数 App跳转百度地图应用 百度地图文档路线规划 2.2....

  • 旅行游记|凤凰湖公园

    凤凰湖位于青白江,路过此地,添加途经点时被百度地图带到了这里。欣喜之余就近游玩了一趟。 临湖而行,感受着阳光沐浴之...

  • 地图开发相关总结

    目录 1.打开第三方地图应用App2.路径规划3.途经点 1.地图途经点开发(bbx司机端智能调度按顺序接送乘客)

  • iOS 百度地图的高级用法

    本文主要介绍百度地图的自定义用法,比如创建地图、添加标注点、添加路径轨迹等问题不在本文讨论范围,请点击百度地图开放...

  • 百度地铁图JS API使用

    调用百度地铁图JS API示例 1使用之前也要申请百度地图JavaScript AP ak 2 添加一个div容器...

  • 2022-01-24 iOS sm2国密算法

    使用pod添加国密算法,注意会和百度地图产生冲突,删除百度地图或者更新百度地图版本,或者手动集成GMObjC;添加...

  • Vue中使用百度地图

    1、申请百度地图ak ak会在引入百度js的时候用到 2、引入百度地图js 在public/index.html里...

网友评论

      本文标题:百度地图出行规划 js 添加途经点

      本文链接:https://www.haomeiwen.com/subject/bmaxgrtx.html