全国200+城市实时精准

接口功能： 1、公交线路查询 2、公交实时位置获取 3、获取附近的公交数据 4、获取附近的地铁数据

立即申请

需求：当外部输入公交线路号，点击查询按钮的时候，会在div上显示所有包含此公交线路号的列表，点击列表中的项，会在百度地图上绘制出其线路。

实现： 第一步：生成线路列表 使用的百度API：服务类中BusLineSearch类是公交线路搜索类。 构造其对象，调用其getBusList方法，在此方法的回调函数OnGetBusListComplete中返回BusListResult类型的公交列表结果

查询 $(“#query”).click(function () { map.clearOverlays(); busNo = $(‘#keyword’).val(); busutil.getBusList(busNo); window.localStorage.setItem(“busNo”, busNo); //设置curItemNo=0，查询后会显示div中第一条线路 curItemNo = 0; $(“#keyword”).val(“”); }) 回调函数

第二步：列表项点击事件

使用的百度API：服务类中BusLineSearch类是公交线路搜索类，设置curItemNo，再次调用其getBusList方法。

点击 function subgo(itemNo) { curItemNo = itemNo; window.localStorage.setItem(“curItemNo”, curItemNo); busutil.getBusList(busNo); }

第三步：列表项点击显示具体的线路信息

使用的百度API：服务类中BusLineSearch类是公交线路搜索类，调用其getBusLine方法，其参数为busListItem类型，，在方法的回调函数onGetBusLineComplete中返回类型为BusLine的公交信息。

这个地方比较关键，我们前面获得了BusListResult类型的公交列表结果，其有一个getBusListItem的方法，返回BusListItem类型的结果，表示获取某一个具体的公交列表中的对象。将这个对象传给getBusLine方法，在其回调函数onGetBusLineComplete中画具体线路。 onGetBusLineComplete回调函数 busutil = new BMap.BusLineSearch(“杭州”, {

第四步：画具体线路

使用的百度API：覆盖物类中的Polyline，使用浏览器的矢量制图工具（如果可用）在地图上绘制折线的地图叠加层。 通过调用getBusLine方法，返回busLine类型的对象，其有getPath()方法，返回Array的公交线地理坐标点数组（注意：其array.length要比站点数.length多很多）。

第五步：在polyline上画站点，循环获取其站点信息，并添加Marker到polyline上

使用的百度API：BusLine对象有两个方法，getNumBusStations()获取公交站点个数以及getBusStation(i)，返回值为BusStation，表示获取一个具体的公交站对象。 以及用覆盖物类中的Marker类

第六步：为Marker添加click事件，使其可以显示站点公交的实时信息

百度地图API：使用覆盖物类中的InfoWindow类 最后，要考虑以下几点内容

div中busList选中项与未选项颜色的切换

在百度地图中添加一个反向的按钮控件，参照百度官方API可以实现

地图中选中站点与未选站点的icon切换

立即申请