使用百度API实现实时公交线路查询及列表显示

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

实现：

 

第一步：生成线路列表

第二步：列表项点击事件

与公交地图_按线路查询相同

参考：使用百度API实现实时公交线路查询及地图显示

第三步：列表项点击显示具体的线路列表的信息，包括车次，起始终点站名称，首末车事件，票价等。

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

这个地方比较关键，我们前面获得了BusListResult类型的公交列表结果，其有一个getBusListItem的方法，返回BusListItem类型的结果，表示获取某一个具体的公交列表中的对象。将这个对象传给getBusLine方法，在其回调函数onGetBusLineComplete中画地图列表。

在onGetBusLineComplete回调函数中参数为BusLine类型，其属性包括name，startTime，endTime，（缺少票价信息）

           对于BusLine，应该能够获取其公交线路-站点表 中的StopLine_ID，即线路中的站点ID，这个ID是唯一的，通过其访问后台，获取实时信息。

onGetBusLineComplete: function (busline) {
//写线路的基本信息
var index = busline.name.indexOf('(');
var htmlTitle = busline.name.substring(0, index);

$("#title").html(htmlTitle);

var htmlPoints =
'<div ><img >' + busline.name.substring(index + 1, busline.name.length - 1) + '</div>';

var htmlTimes =
'<div ">●</span><span>首班：' + busline.startTime
+ '</span><span>●</span><span>末班：' + busline.endTime +
'</span><span>票价：2元</span></div>';

$.ajax({
url: 'http://xx.xxx.xxx.xxx/busStationInfo',
//                data: {"SL_id":sl_id},
type: 'get',
datatype: 'json',
async: 'false',
success: function (json) {
//获取实时信息
}
});
//画线路列表
}

第四步：列表项点击显示具体的线路列表的信息，使用idangerous.swiper.js

//需要来画地图列表了
var stations = busline.AB;
var html = [];
for (var i in stations) {
stationArr[i] = stations[i].name;
if (stationName==null) {
if (i == 0) {
html.push('<div class="swiper-slide"><img src="img/icons-pic-select.png"' +
' onclick="divClick(this)" alt=""><div class="app-title" style="color:#ff8d30">' +
stations[i].name + '</div></div>');
} else {
html.push('<div class="swiper-slide"><img src="img/icons-pic.png"  onclick="divClick(this)" alt=""><div class="app-title">' +
stations[i].name + '</div></div>');
}
} else {
//之后stationName要换成line_stop_id 需要保证其唯一性
if (stations[i].name == stationName) {
html.push('<div class="swiper-slide"><img src="img/icons-pic-select.png"' +
' onclick="divClick(this)" alt=""><div class="app-title" style="color:#ff8d30">' +
stations[i].name + '</div></div>');
} else {
html.push('<div class="swiper-slide"><img src="img/icons-pic.png"  onclick="divClick(this)" alt=""><div class="app-title">' +
stations[i].name + '</div></div>');
}
}
}

$('.swiper-wrapper').html(html);
$('.thumbs-cotnainer').each(function () {
mySwiper = $(this).swiper({
slidesPerView: 'auto',
offsetPxBefore: 25,
offsetPxAfter: 10,
calculateHeight: true,
setWrapperSize: true,
freeMode: true
})
});
getStopCount();
mySwiper.swipeTo(stopCount, 500, false);

其点击事件divClick通过ajax获取实时信息

最终效果图