使用百度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 =
                '
' + busline.name.substring(index + 1, busline.name.length - 1) + '
'; var htmlTimes = '
首班:' + busline.startTime + '末班:' + busline.endTime + '票价:2元
'; $.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('
' + stations[i].name + '
'); } else { html.push('
' + stations[i].name + '
'); } } else { //之后stationName要换成line_stop_id 需要保证其唯一性 if (stations[i].name == stationName) { html.push('
' + stations[i].name + '
'); } else { html.push('
' + stations[i].name + '
'); } } } $('.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获取实时信息

最终效果图

使用百度API实现实时公交线路查询及列表显示_第1张图片

你可能感兴趣的:(地图)