功能申请入口

第二步：列表项点击事件

使用的百度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(“杭州”, { renderOptions: {panel: “itemResult”}, onGetBusListComplete: function (buslist) {

第四步：画具体线路

使用的百度API：覆盖物类中的Polyline，使用浏览器的矢量制图工具（如果可用）在地图上绘制折线的地图叠加层。

通过调用getBusLine方法，返回busLine类型的对象，其有getPath()方法，返回Array的公交线地理坐标点数组（注意：其array.length要比站点数.length多很多）。 onGetBusLineComplete: function (busline) { var polyline = new BMap.Polyline(busline.getPath(), { strokeColor: “#3333FF”, strokeWeight: 5, strokeOpacity: 0.7 }); map.clearOverlays(); map.addOverlay(polyline); //添加站点Marker showPolyline(busline); },

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

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

以及用覆盖物类中的Marker类

showPolyline方法

function showPolyline(busline) { for (var i = 0; i < busline.getNumBusStations(); i++) { var busStation = busline.getBusStation(i); pointsArr[i] = busStation.position; busStationArr[i] = busStation.name; if (i == 0) { addCircle(i,busline, busStation, startMarkerIcon); } else if (i == busline.getNumBusStations() - 1) { addCircle(i,busline, busStation, endMarkerIcon); } else { if(busStation.name == stationName){ addCircle(i, busline, busStation, busStationFocusIcon); }else{ addCircle(i, busline, busStation, busStationIcon); } } } //设置地图的视野 map.setViewport(pointsArr); }

addCircle方法

function addCircle(index,busline, busStation, icon) { var marker = new BMap.Marker(busStation.position, {icon: icon}); markerArr[index] = marker; marker.setTitle(busStation.name); map.addOverlay(marker); }

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

function addCircle(index,busline, busStation, icon) { var marker = new BMap.Marker(busStation.position, {icon: icon}); markerArr[index] = marker; marker.setTitle(busStation.name); marker.addEventListener(“click”, function () { infoWindow.setTitle(busStation.name + " (" + busline.name + “)”); //前台给后端SL_ID（StopLine 公交线路站点表的主键 //后台返回给前端两个信息 最近一辆公交正在开往–站，据此–分钟–米 //如果有第二辆公交的信息，那么也进行显示 $.ajax({ url: ‘http://xx.xxx.xxx.xxx/busStationInfo’, // data: {“SL_id”:sl_id}, type: ‘get’, datatype: ‘json’, async: ‘false’, success: function (json) { stationName = busStation.name; window.localStorage.setItem(‘stationName’, stationName); var busInfoList = json.station; var infoArr = []; for (var i in busInfoList) { infoArr[i] = “最近第” + (parseInt(i) + 1) + “辆公交车正在开往” + busInfoList[i].nextstop + “，距本站” + busInfoList[i].stopcount + “站，” + busInfoList[i].distance + “，需要” + busInfoList[i].time;

}

最后，要考虑以下几点内容

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

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

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

功能申请入口