JSAPI 支持驾车、步行、骑行、公交四种路线规划,分别通过 BMap.DrivingRoute、BMap.WalkingRoute、BMap.RidingRoute、BMap.TransitRoute 实现。
通过 BMap.DrivingRoute 规划两点之间的驾车路线,支持多种驾车策略和途经点设置:
var drivingRoute = new BMap.DrivingRoute(map, {policy: BMAP_DRIVING_POLICY_AVOID_CONGESTION,renderOptions: {map: map,autoViewport: true},});var start = new BMap.Point(116.33, 39.90);var end = new BMap.Point(116.61, 40.08);drivingRoute.search(start, end);
如果需要途经某些中间地点,可以在 search 的第三个参数中通过 waypoints 传入,最多支持 10 个途经点:
drivingRoute.search(start, end, {waypoints: [new BMap.Point(116.42, 39.92), new BMap.Point(116.45, 39.91)],});
BMap.WalkingRoute 用于规划两点之间的步行路线。与驾车不同,步行路线的起终点不仅支持传入Point位置,还支持直接传入地址字符串。
var walkingRoute = new BMap.WalkingRoute(map, {renderOptions: { map: map, autoViewport: true },onSearchComplete: function (result) {if (walkingRoute.getStatus() === BMAP_STATUS_SUCCESS) {var plan = result.getPlan(0);console.log(plan.getDistance(), plan.getDuration());}},});walkingRoute.search('王府井', '天安门');
用于规划两点之间的骑行路线,适合规划共享单车等出行场景。用法与步行路线类似,同样支持直接传入地址字符串作为起终点。
var ridingRoute = new BMap.RidingRoute(map, {renderOptions: { map: map, autoViewport: true },onSearchComplete: function (result) {if (ridingRoute.getStatus() === BMAP_STATUS_SUCCESS) {var plan = result.getPlan(0);console.log(plan.getDistance(), plan.getDuration());}},});ridingRoute.search('朝阳公园', '奥林匹克公园');
BMap.TransitRoute 用于规划公交出行路线,通过 policy 参数可以指定偏好策略,例如最少换乘或最少步行。
var transitRoute = new BMap.TransitRoute(map, {policy: BMAP_TRANSIT_POLICY_LEAST_TRANSFER, // 市内策略:最少换乘intercityPolicy: BMAP_INTERCITY_POLICY_CHEAP_PRICE, // 跨城策略:价格最低transitTypePolicy: BMAP_TRANSIT_TYPE_POLICY_TRAIN, // 跨城方式:火车优先renderOptions: {map: map,autoViewport: true},onSearchComplete: function (result) {if (transitRoute.getStatus() === BMAP_STATUS_SUCCESS) {var plan = result.getPlan(0);console.log(plan.getLinesTitle());console.log(plan.getDistance(true), plan.getDuration(true));}},});transitRoute.search(new BMap.Point(116.374, 39.913), new BMap.Point(116.308, 40.056));
在 renderOptions 中传入 panel 参数,可以将路线规划的结果列表渲染到页面指定的 DOM 容器中,规划完成后 JSAPI 会自动向该容器写入带有起终点、路线步骤、距离耗时等信息的结果列表。
首先在页面中准备好容器元素:
<div id="result"></div>
然后在创建路线规划实例时,将容器元素传入 renderOptions.panel:
var walkingRoute = new BMap.WalkingRoute(map, {renderOptions: {map: map,panel: document.getElementById('result'), // 结果列表渲染到此容器autoViewport: true,},});walkingRoute.search('王府井', '天安门');
规划完成后,panel 容器内会自动填充结果列表,panel 用法对驾车、步行、骑行、公交四种路线规划均适用。
只有步行和骑行路线规划支持传入字符串地址,驾车和公交不支持。
途经点(waypoints)仅驾车路线支持,步行、骑行、公交均不支持
BMap.DrivingRoute
BMap.WalkingRoute
BMap.RidingRoute
BMap.TransitRoute
上一篇
下一篇