浏览器版本低！无法浏览完整内容，建议升级或更换浏览器。

文档全面上新

更科技的视觉体验，更高效的页面结构，快前往体验吧！

体验新版
第1行： 第1行：
 
{{jspopularGL-sidebar}}
 
{{jspopularGL-sidebar}}
 +
<div class="h1-title">出行路线规划</div>
 +
<div id="update-time">更新时间：2021年7月23日&nbsp;</div>
 +
<div class="bluetitle">
 +
    <div class="services-title-text">简介</div>
 +
</div>
 +
<div class="serve-explain-text">百度地图JavaScript API GL提供了驾车、公交、步行三种出行方式的路线规划功能。开发者在使用线路规划的接口时，可以使用我们提供的默认展示效果。也可以通过监听事件回调，使用检索数据完成自己的需求。</div>
 +
<div class="jsapidemo_template">
 +
    <div class="aloneDemo">
 +
        <div dir="https://lbs.baidu.com/jsdemo/demo/sLngLatSearchPath.htm"></div>
 +
        <div class="jsapi-demo-link">[https://lbsyun.baidu.com/jsdemo.htm#sLngLatSearchPath DEMO详情]</div>
 +
    </div>
 +
</div>
 +
<div class="bluetitle">
 +
    <div class="services-title-text">驾车路线规划</div>
 +
</div>
 +
<div class="devguide">
 +
    <div class="leftborderbg" style="height:1160px;"></div>
 +
    <div class="devguideorder"><span>1</span>基础驾车路线规划服务示例：</div>
 +
    <div class="devguidecenter">代码如下：
 +
        <pre class="prettyprint codestyle">var map = new BMapGL.Map("container");
 +
            map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
 +
 +
            var p1 = new BMapGL.Point(116.301934,39.977552);
 +
            var p2 = new BMapGL.Point(116.508328,39.919141);
 +
 +
            var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
 +
            driving.search(p1, p2);
 +
</pre>
 +
    </div>
 +
</div>
 +
<div class="bluetitle">
 +
    <div class="services-title-text">公交路线规划</div>
 +
</div>
 +
<div class="serve-explain-text">BMapGL.TransitRoute类提供公交线路规划服务。</div>
 +
<div class="devguide">
 +
    <div class="leftborderbg" style="height:1015px;"></div>
 +
    <div class="devguideorder"><span>1</span>使用服务示例</div>
 +
    <div class="devguidecenter">代码如下：
 +
        <pre class="prettyprint codestyle">var map = new BMapGL.Map('container');
 +
                map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
 +
                var output = '从上地到西单坐公交需要：';
 +
                var transit = new BMapGL.TransitRoute(map,{
 +
                    renderOptions: {map: map},
 +
                    onSearchComplete: function(results){
 +
                        if (transit.getStatus()&nbsp;!= BMAP_STATUS_SUCCESS){
 +
                            return&nbsp;;
 +
                        }
 +
                        var plan = results.getPlan(0);
 +
                        output += '总时长：' + plan.getDuration(true);  //获取时间
 +
                        output += '总路程：' + plan.getDistance(true);  //获取距离
 +
                        $('#result').css('display','block');
 +
                        $('#result').html(output);
 +
                    },
 +
                });
 +
                var start=new BMapGL.Point(116.404844,39.911836);
 +
                var end=new BMapGL.Point(116.308102,40.056057);
 +
                transit.search(start, end);
 +
</pre>
 +
    </div>
 +
</div>
 +
<div class="bluetitle">
 +
    <div class="services-title-text">步行路线规划</div>
 +
</div>
 +
<div class="serve-explain-text">BMapGL.WalkingRoute提供步行线路规划服务。基本用法和驾车线路规划类似。</div>
 +
<div class="devguide">
 +
    <div class="leftborderbg" style="height:220px;"></div>
 +
    <div class="devguideorder"><span>1</span>使用服务示例</div>
 +
    <div class="devguidecenter">代码如下：
 +
        <pre class="prettyprint codestyle">
 +
            var map = new BMapGL.Map("allmap");
 +
            map.enableScrollWheelZoom();
 +
            map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
 +
            var walking = new BMapGL.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
 +
            walking.search('西单', '慈云寺');
 +
</pre>
 +
    </div>
 +
</div>
 +
 +
 +
 +
<!-- {{jspopularGL-sidebar}}
 
<div class="h1-title">地面叠加层覆盖物</div><div id="update-time">更新时间：2020年12月14日&nbsp;</div><div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text">
 
<div class="h1-title">地面叠加层覆盖物</div><div id="update-time">更新时间：2020年12月14日&nbsp;</div><div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text">
 
JSAPI GL提供的GroundOverlay类支持在地图底面上叠加覆盖物，覆盖物可以是图片、自定义Canvas、视频。<br/>GroundOverlay类继承Overlay类，基于Bounds确定在地面上的显示范围和大小，通过options来配置覆盖物的类型、源、透明度等。
 
JSAPI GL提供的GroundOverlay类支持在地图底面上叠加覆盖物，覆盖物可以是图片、自定义Canvas、视频。<br/>GroundOverlay类继承Overlay类，基于Bounds确定在地面上的显示范围和大小，通过options来配置覆盖物的类型、源、透明度等。
第37行： 第118行：
 
walking.search('西单', '慈云寺');
 
walking.search('西单', '慈云寺');
 
</pre>
 
</pre>
−
</div></div>
+
</div></div> -->

2021年7月23日 (五) 11:04的版本

出行路线规划
更新时间：2021年7月23日 
简介
百度地图JavaScript API GL提供了驾车、公交、步行三种出行方式的路线规划功能。开发者在使用线路规划的接口时，可以使用我们提供的默认展示效果。也可以通过监听事件回调，使用检索数据完成自己的需求。
DEMO详情
驾车路线规划
1基础驾车路线规划服务示例：
代码如下： 
var map = new BMapGL.Map("container");
            map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);

            var p1 = new BMapGL.Point(116.301934,39.977552);
            var p2 = new BMapGL.Point(116.508328,39.919141);

            var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
            driving.search(p1, p2);
公交路线规划
BMapGL.TransitRoute类提供公交线路规划服务。
1使用服务示例
代码如下： 
var map = new BMapGL.Map('container');
                map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
                var output = '从上地到西单坐公交需要：';
                var transit = new BMapGL.TransitRoute(map,{
                    renderOptions: {map: map},
                    onSearchComplete: function(results){
                        if (transit.getStatus() != BMAP_STATUS_SUCCESS){
                            return ;
                        }
                        var plan = results.getPlan(0);
                        output += '总时长：' + plan.getDuration(true);  //获取时间
                        output += '总路程：' + plan.getDistance(true);  //获取距离
                        $('#result').css('display','block');
                        $('#result').html(output);
                    },
                });
                var start=new BMapGL.Point(116.404844,39.911836);
                var end=new BMapGL.Point(116.308102,40.056057);
                transit.search(start, end);
步行路线规划
BMapGL.WalkingRoute提供步行线路规划服务。基本用法和驾车线路规划类似。
1使用服务示例
代码如下： 
            var map = new BMapGL.Map("allmap");
            map.enableScrollWheelZoom();
            map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
            var walking = new BMapGL.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
            walking.search('西单', '慈云寺');



取自“http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/routeplan&oldid=16553”

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误，或对此文档有更好的建议，请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消