| 第1行： | 第1行： | ||
{{jspopularGL-sidebar}} | {{jspopularGL-sidebar}} | ||
| − | <div class="h1-title">出行路线规划</div><div id="update-time1">更新时间：2021年7月23日 </div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></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="serve-explain-text"><div class="service-page-anchor"><span>驾车路线规划</span></div></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"); | + | <div class="h1-title">出行路线规划</div><div id="update-time1">更新时间：2021年7月23日 </div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></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="serve-explain-text"><div class="service-page-anchor"><span>驾车路线规划</span></div></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" style="overflow-y: scroll;">var map = new BMapGL.Map("container"); |
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); | map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); | ||
| 第9行： | 第9行： | ||
driving.search(p1, p2); | driving.search(p1, p2); | ||
</pre> | </pre> | ||
| − | </div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>公交路线规划</span></div></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'); | + | </div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>公交路线规划</span></div></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" style="overflow-y: scroll;">var map = new BMapGL.Map('container'); |
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); | map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); | ||
var output = '从上地到西单坐公交需要：'; | var output = '从上地到西单坐公交需要：'; | ||
| 第29行： | 第29行： | ||
transit.search(start, end); | transit.search(start, end); | ||
</pre> | </pre> | ||
| − | </div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>步行路线规划</span></div></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"); | + | </div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>步行路线规划</span></div></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" style="overflow-y: scroll;"> var map = new BMapGL.Map("allmap"); |
map.enableScrollWheelZoom(); | map.enableScrollWheelZoom(); | ||
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); | map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); | ||
2022年8月19日 (五) 15:47的最后版本
出行路线规划
更新时间：2021年7月23日
简介
百度地图JavaScript API GL提供了驾车、公交、步行三种出行方式的路线规划功能。开发者在使用线路规划的接口时，可以使用我们提供的默认展示效果。也可以通过监听事件回调，使用检索数据完成自己的需求。
驾车路线规划
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('西单', '慈云寺');