百度地图API之如何制作公交导航

开发 前端
公交导航功能是告诉使用者从A到B的公交出行方案,而不是某条具体的公交线路信息,这一点需要广大开发者注意。公交导航功能通过类TransitRoute来实现,这里需要说说为啥不是BusRoute,而是TransitRoute。

前面我们介绍过驾车导航了,今天来说说公交导航。

什么是公交导航

公交导航功能是告诉使用者从A到B的公交出行方案,而不是某条具体的公交线路信息,这一点需要广大开发者注意。

公交导航功能通过类TransitRoute来实现,这里需要说说为啥不是BusRoute,而是TransitRoute。百度提供的是公共交通导航,公共交通不仅仅涉及bus,可能还会有地铁、渡轮甚至以后的飞机火车,所以这里使用的是public transit中的transit进行描述。

一个简单的例子

我们还是从一个简单的例子开始:

  1. var transit = new BMap.TransitRoute('北京', {  
  2.     renderOptions: {  
  3.         map: map,  
  4.         panel: 'panel'  
  5.     }  
  6. });  
  7. transit.search('颐和园', '西单'); 

代码通过renderOptions设置渲染的地图实例和侧栏面板容器的id,其中map是已经实例化好的地图,panel为已经准备好的div元素的id。我们会看到如下结果:

 

地图上显示了一个方案,在面板中列出了所有方案的描述,点击不同的方案地图会予以展示。除了使用字符串类型以外,还可以提供坐标进行查询,这样可以得到更精确的结果。比如从“麦当劳”到“肯德基”这样的路线查询就不会得到结果,因为API不知道是从哪个麦当劳到哪个肯德基。下面的示例使用了坐标进行搜索。

  1. transit2.search(new BMap.Point(116.315157,39.987946),   
  2.                              new BMap.Point(116.371499,39.880394)); 

下面是使用坐标作为参数进行查询得到的结果:

注意,由于提供的是坐标,所以起点和终点没有具体的地点描述。

自定义覆盖物展示

如果你不满意API提供的默认线路的颜色和标注的样式,你也可以选择通过通过数据接口自行创建。注意,自己创建覆盖物时,点击列表中的方案将不会更新地图区域,因为此时地图区域的元素都是由开发者自行创建的。在使用数据接口之前,先通过一个结构图来了解一个完整的公交方案的各个组成部分,以方便理解:

 

 

一个不需要换乘的公交方案是由:起点、起点到上车站的步行线路、上车站到下车站的公交线路以及下车站到终点的步行线路构成。当然有可能起点和上车站是重合的,或者终点和下车站是重合的,此时步行线路长度就为0(起点或终点本身就为公交站的时候)。如果有换乘,那么每次换乘中的下车站到上车站也有步行线路(如上图的第二个方案所示)。

所以不论公交方案具体是什么样,在数据上的表示都是一致的:

◆ 直达方案:2条步行线路 + 1条公交线路

◆ 换乘一次方案:3条步行线路 + 2条公交线路

◆ 换乘两次方案:4条步行线路 + 3条公交线路

以此类推。

API中通过TransitRouteResult来描述公交导航结果,通过TransitRoutePlan来描述一条公交方案。那么怎么获取公交导航结果和具体的方案的信息呢?请看下面的示例:

  1. var transit = new BMap.TransitRoute('北京', {  
  2.     onSearchComplete: function(result) {  
  3.         if (transit.getStatus() == BMAP_STATUS_SUCCESS) {  
  4.             // 从结果对象中获取起点和终点信息  
  5.             var start = result.getStart();  
  6.             var end = result.getEnd();  
  7.             addStart(start.point, start.title);  
  8.             addEnd(end.point, end.title);  
  9.             // 直接获取***个方案  
  10.             var plan = result.getPlan(0);  
  11.             // 遍历所有步行线路  
  12.             for (var i = 0; i < plan.getNumRoutes(); i++) {  
  13.                 if (plan.getRoute(i).getDistance(false) > 0) {  
  14.                     // 判断只有大于0的步行线路才会绘制  
  15.                     addWalkRoute(plan.getRoute(i).getPath());  
  16.                 }  
  17.             }  
  18.             // 遍历所有公交线路  
  19.             var allLinePath = [];  
  20.             for (i = 0; i < plan.getNumLines(); i++) {  
  21.                 allLinePathallLinePath = allLinePath.concat(plan.getLine(i).getPath());  
  22.                 addLine(plan.getLine(i).getPath());  
  23.             }  
  24.             // ***根据公交线路的点设置地图视野  
  25.             map.setViewport(allLinePath);  
  26.         }  
  27.     }  
  28. });  
  29.  
  30. transit.search('清华大学', '北京交通大学');  
  31.  
  32. // 添加起点覆盖物  
  33. function addStart(point, title){  
  34.     map.addOverlay(new BMap.Marker(point, {  
  35.         title: title,  
  36.         icon: new BMap.Icon('http://images.cnblogs.com/cnblogs_com/jz1108/329471/o_blue.png', new BMap.Size(38, 41), {  
  37.             anchor: new BMap.Size(4, 36)  
  38.         })}));  
  39. }  
  40.  
  41. // 添加终点覆盖物  
  42. function addEnd(point, title){  
  43.     map.addOverlay(new BMap.Marker(point, {  
  44.         title: title,  
  45.         icon: new BMap.Icon('http://images.cnblogs.com/cnblogs_com/jz1108/329471/o_red.png', new BMap.Size(38, 41), {  
  46.             anchor: new BMap.Size(4, 36)  
  47.         })}));  
  48. }  
  49.  
  50. // 添加路线  
  51. function addWalkRoute(path){  
  52.     map.addOverlay(new BMap.Polyline(path, {  
  53.         strokeColor: 'black',  
  54.         strokeOpacity: 0.7,  
  55.         strokeWeight: 4,  
  56.         strokeStyle: 'dashed',  
  57.         enableClicking: false  
  58.     }));  
  59. }  
  60.  
  61. function addLine(path){  
  62.     map.addOverlay(new BMap.Polyline(path, {  
  63.         strokeColor: 'blue',  
  64.         strokeOpacity: 0.6,  
  65.         strokeWeight: 5,  
  66.         enableClicking: false  
  67.     }));  

在上面的代码中,通过TransitRouteOptions的onSearchComplete属性设置了回调函数,一旦检索完成这个回调函数就会被调用。在回调函数开始我们先判断检索是否成功,如果成功表示至少有一条公交方案返回,这里我们先通过结果对象获取起点和终点,接着直接获取***条方案,遍历方案中所有步行线路和公交线路并绘制在地图上,***我们根据公交线路的点来设置一个合适的地图视野。

你会在浏览器中得到如下效果:

 

 

在获取结果对象时,除了通过回调函数参数获取以外,还可以通过TransitRoute的getResults方法获得,需要注意的是,由于搜索过程是异步的,以下代码的写法将不会得到结果:

  1. transit.search('西单', '颐和园');  
  2. var res = transit.getResults();  // undefined 

因为search方法调用结束后搜索结果并没有立即返回。开发者可以在回调函数中调用此方法立即获得结果,也可以等回调函数执行完若干时间后再想获取结果数据时调用。

自定义方案描述

通过TransitRoutePlan的getDescription可以获得完整的方案描述,但是如果开发者想自行定义描述的形式则可通过数据接口进行。例如:

  1. var transit = new BMap.TransitRoute('北京', {  
  2.     onSearchComplete: function(result) {  
  3.         if (transit.getStatus() == BMAP_STATUS_SUCCESS) {  
  4.             // 从结果对象中获取起点和终点信息  
  5.             var start = result.getStart().title;  
  6.             var end = result.getEnd().title;  
  7.               
  8.             // 直接获取***个方案  
  9.             var plan = result.getPlan(0);  
  10.             // 获取步行线路与公交线路个数总和,用于遍历  
  11.             var total = plan.getNumRoutes() + plan.getNumLines();  
  12.               
  13.             var description = ['从' + start];  
  14.             var addEndTitle = true;  
  15.             for (var i = 0; i < total; i++) {  
  16.                 if (i % 2 == 0) {  
  17.                     // i为偶数  
  18.                     // 处理***个步行描述逻辑  
  19.                     if (i / 2 == 0) {  
  20.                         if (plan.getRoute(i / 2).getDistance(false) == 0) {  
  21.                             description = ['从'];  
  22.                         }  
  23.                     }  
  24.                     // 处理***一个步行描述逻辑  
  25.                     if (i / 2 == plan.getNumRoutes() - 1) {  
  26.                         if (plan.getRoute(i / 2).getDistance(false) == 0) {  
  27.                             addEndTitle = false;  
  28.                         }  
  29.                     }  
  30.                     if (plan.getRoute(i / 2).getDistance(false) > 0) {  
  31.                         description.push('步行约' + plan.getRoute(i / 2).getDistance(true) + '至');  
  32.                     }  
  33.                 } else {  
  34.                     // i为奇数  
  35.                     var line = plan.getLine((i - 1) / 2);  
  36.                     description.push(line.getGetOnStop().title + ', ');  
  37.                     description.push('乘坐' + line.title + ', ');  
  38.                     description.push('经过' + line.getNumViaStops() + '站');  
  39.                     description.push('在' + line.getGetOffStop().title + '站下车,');  
  40.                 }  
  41.             }  
  42.             if (addEndTitle) {  
  43.                 description.push(end + '。');  
  44.             }  
  45.             // 替换可能出现的末尾位置的逗号  
  46.             var descriptiondescriptionStr = description.join('').replace(/\uff0c$/, '。');  
  47.         }  
  48.     }  
  49. });  
  50.  
  51. transit.search('清华大学', '北京交通大学'); 

变量descriptionStr的内容为:“从清华大学步行约830米至五道口, 乘坐地铁13号线(东直门-西直门), 经过3站在西直门站下车,步行约310米至城铁西直门站, 乘坐运通105(上地环岛东-中苑宾馆), 经过2站在北京交通大学站下车。”

回调函数详解

前面的几个例子我们使用了onSearchComplete回调函数,在API中还提供了如下几个回调函数,它们的含义和触发时机如下:

◆ onMarkersSet:如果设置了渲染的地图,则API自动添加标注后会触发此函数。

◆ onPolylinesSet:如果设置了渲染的地图,则API自动添加线路覆盖物后会触发此函数。

◆ onInfoHtmlSet:如果设置了渲染地图,当用户点击标注弹出信息窗口时会触发此函数。

◆ onResultsHtmlSet:如果设置了渲染侧栏,则API填充完HTML后会触发此函数。

原文:http://www.cnblogs.com/jz1108/archive/2011/10/21/2220574.html

【编辑推荐】

  1. 百度地图API如何批量转换为百度经纬度
  2. 百度地图API如何给自定义覆盖物添加事件
  3. 详解百度地图API之自定义地图类型
  4. 详解百度地图API之地图操作
  5. 百度地图API之如何制作驾车导航
  6. 详解百度地图API之地图标注
责任编辑:陈贻新 来源: jz1108的博客
相关推荐

2011-09-16 14:39:02

百度地图API

2011-09-26 10:05:19

百度地图API

2011-10-21 09:28:25

百度地图API

2011-10-09 11:07:40

百度地图API

2011-09-29 11:00:54

百度地图API

2011-10-21 10:16:25

百度地图API

2011-09-16 10:37:42

地图API

2012-02-01 09:33:36

百度地图API

2013-04-08 14:59:54

Android学习笔记百度地图Overlay

2011-10-21 09:11:41

百度地图API

2021-06-15 14:33:00

高德百度腾讯

2022-03-27 10:04:23

Angular8项目vue

2011-12-29 16:18:14

API

2014-10-29 17:53:00

高德地图

2013-04-08 14:46:42

Android学习笔记百度地图

2011-05-25 14:36:17

2012-02-03 14:01:15

地图

2023-12-20 17:38:44

APIhttp鸿蒙

2014-11-13 10:46:30

高德地图APEC出行

2020-12-11 22:02:00

百度地图Apollo
点赞
收藏

51CTO技术栈公众号