第2行: | 第2行: | ||
<div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text"> | <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 v3.0提供了驾车、公交、步行和骑行四种出行方式的路线规划功能。开发者在使用线路规划的接口时,可以使用我们提供的默认展示效果。也可以通过监听事件回调,使用检索数据完成自己的需求。v3.0的线路规划服务和v2.0的相比,在功能上有所差异。详细请参考本文档和[https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference_3_0.html JavaScript API v3.0类参考]。 | 百度地图JavaScript API v3.0提供了驾车、公交、步行和骑行四种出行方式的路线规划功能。开发者在使用线路规划的接口时,可以使用我们提供的默认展示效果。也可以通过监听事件回调,使用检索数据完成自己的需求。v3.0的线路规划服务和v2.0的相比,在功能上有所差异。详细请参考本文档和[https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference_3_0.html JavaScript API v3.0类参考]。 | ||
− | </div><!--jsapi-demo模板--><div class="jsapidemo_template"><!--展示地图区域--><div class="demo_area"><!--注释:默认展示效果(填写第一个按钮连接),避免延时--><div dir="http://mapopen-pub-jsapi.bj.bcebos.com/jsapi/demo/jsapi3/walkingroute.html"></div></div><!--按钮区域--><div class="demo_control"><div class="demo_btn">[//lbsyun.baidu.com/cms/jsapi/demo/jsapi3/drivingroute.html 驾车]</div><div class="demo_btn">[//lbsyun.baidu.com/cms/jsapi/demo/jsapi3/transitroute.html 公交]</div><div class="demo_btn">[//lbsyun.baidu.com/cms/jsapi/demo/jsapi3/walkingroute.html 步行]</div><div class="demo_btn">[//lbsyun.baidu.com/cms/jsapi/demo/jsapi3/ridingroute.html 骑行]</div></div><!--右上角蓝色标签--可选--><div class="jsapi-demo-link">[https://lbsyun.baidu.com/ | + | </div><!--jsapi-demo模板--><div class="jsapidemo_template"><!--展示地图区域--><div class="demo_area"><!--注释:默认展示效果(填写第一个按钮连接),避免延时--><div dir="http://mapopen-pub-jsapi.bj.bcebos.com/jsapi/demo/jsapi3/walkingroute.html"></div></div><!--按钮区域--><div class="demo_control"><div class="demo_btn">[//lbsyun.baidu.com/cms/jsapi/demo/jsapi3/drivingroute.html 驾车]</div><div class="demo_btn">[//lbsyun.baidu.com/cms/jsapi/demo/jsapi3/transitroute.html 公交]</div><div class="demo_btn">[//lbsyun.baidu.com/cms/jsapi/demo/jsapi3/walkingroute.html 步行]</div><div class="demo_btn">[//lbsyun.baidu.com/cms/jsapi/demo/jsapi3/ridingroute.html 骑行]</div></div><!--右上角蓝色标签--可选--><div class="jsapi-demo-link">[https://lbsyun.baidu.com/jsdemo3.0.htm#drivingroute DEMO详情]</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"></div><div class="tablecenter"> |
{| width="507" border="1" | {| width="507" border="1" | ||
|- | |- |
2022年10月21日 (五) 16:49的最后版本
简介
百度地图JavaScript API v3.0提供了驾车、公交、步行和骑行四种出行方式的路线规划功能。开发者在使用线路规划的接口时,可以使用我们提供的默认展示效果。也可以通过监听事件回调,使用检索数据完成自己的需求。v3.0的线路规划服务和v2.0的相比,在功能上有所差异。详细请参考本文档和JavaScript API v3.0类参考。
提供的路线规划方式
路线规划方式 | 类名 | 简介 |
---|---|---|
驾车 |
DrivingRoute | 提供驾车路线规划服务 |
公交 | TransitRoute | 提供市内公交和跨城交通方式(飞机、火车、大巴)的路线规划服务 |
步行 | WalkingRoute | 提供步行路线规划服务 |
骑行 |
RidingRoute |
提供骑行线路规划服务 |
驾车路线规划
1基础驾车路线规划服务示例:
代码如下:
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } }); var start = new BMap.Point(116.310791, 40.003419); var end = new BMap.Point(116.486419, 39.877282); driving.search(start, end);
2数据接口
驾车导航服务也提供了丰富的数据接口,通过onSearchComplete回调函数可以得到BMap.DrivingRouteResult对象,它包含了驾车导航结果数据信息。 结果会包含若干驾车方案,每条方案中包含了若干驾车线路。 每条驾车线路又会包含一系列的关键步骤(BMap.Step),关键步骤描述了具体驾车行驶方案。
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var options = { onSearchComplete: function(results){ if (driving.getStatus() == BMAP_STATUS_SUCCESS){ // 获取第一条方案 var plan = results.getPlan(0); // 获取方案的驾车线路 var route = plan.getRoute(0); // 获取每个关键步骤,并输出到页面 var s = []; for (var i = 0; i < route.getNumSteps(); i ++) { var step = route.getStep(i); console.log(step); } } } }; var driving = new BMap.DrivingRoute(map, options); var start = new BMap.Point(116.310791, 40.003419); var end = new BMap.Point(116.486419, 39.877282); driving.search(start, end);
公交路线规划
BMap.TransitRoute类提供公交线路规划服务。
注意:v3.0中,新增了TransitRoutePlan.getTotal 和 TransitRoutePlan.getTotalType方法,可以获取一条公交换乘方案中总路段数(步行+公交),和指定路段的交通方式类型(步行或公交)。
1使用服务示例
代码如下:
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var transit = new BMap.TransitRoute(map, { renderOptions: { map: map, autoViewport: true } }); var start = new BMap.Point(116.310791, 40.003419); var end = new BMap.Point(116.486419, 39.877282); transit.search(start, end);
2进行跨城路线规划
代码如下:
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var transit = new BMap.TransitRoute(map, { renderOptions: { map: map, autoViewport: true }, // 配置跨城公交的换成策略为优先出发早 intercityPolicy: BMAP_INTERCITY_POLICY_EARLY_START, // 配置跨城公交的交通方式策略为飞机优先 transitTypePolicy: BMAP_TRANSIT_TYPE_POLICY_AIRPLANE }); var start = new BMap.Point(116.310791, 40.003419); var end = new BMap.Point(121.490546, 31.233585); transit.search(start, end);
3结果面板
您可以提供用于展示文字结果的容器元素,方案结果会自动在页面中展现。
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var transit = new BMap.TransitRoute(map, { renderOptions: {map: map, panel: "results"} }); var start = new BMap.Point(116.310791, 40.003419); var end = new BMap.Point(121.490546, 31.233585); transit.search(start, end);
4数据接口
您可通过数据接口获取详细的公交方案信息。公交导航搜索结果用BMap.TransitRouteResult来表示,其中包含了若干公交出行方案(BMap.TransitRoutePlan)。每条出行方案由步行线路和公交线路组成。 在起点到上车点之间、下车点到终点之间以及每个换乘站之间都会存在步行线路,如果上述的某两点位置重合,那么其间的步行路线长度为0。 如下示例,通过数据接口将第一条方案的路线添加到地图上。
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); var transit = new BMap.TransitRoute(); transit.setSearchCompleteCallback(function(results) { if (transit.getStatus() == BMAP_STATUS_SUCCESS) { var firstPlan = results.getPlan(0); // 绘制步行线路 for (var i = 0; i < firstPlan.getNumRoutes(); i++) { var walk = firstPlan.getRoute(i); if (walk.getDistance(false) > 0){ // 步行线路有可能为0 map.addOverlay(new BMap.Polyline(walk.getPoints(), {lineColor: "green"})); } } // 绘制公交线路 for (i = 0; i < firstPlan.getNumLines(); i++) { var line = firstPlan.getLine(i); map.addOverlay(new BMap.Polyline(line.getPoints())); } } }); var start = new BMap.Point(116.310791, 40.003419); var end = new BMap.Point(121.490546, 31.233585); transit.search(start, end);
步行路线规划
BMap.WalkingRoute提供步行线路规划服务。基本用法和驾车线路规划类似。
1使用服务示例
代码如下:
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var walk = new BMap.WalkingRoute(map, { renderOptions: {map: map} }); var start = new BMap.Point(116.310791, 40.003419); var end = new BMap.Point(116.486419, 39.877282); walk.search(start, end);
骑行路线规划
BMap.RidingRoute提供骑行线路规划服务,基本用法和步行线路规划基本相同。
1使用服务示例
代码如下:
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var riding = new BMap.RidingRoute(map, { renderOptions: {map: map} }); var start = new BMap.Point(116.310791, 40.003419); var end = new BMap.Point(116.486419, 39.877282); riding.search(start, end);