使用百度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获取实时信息

最终效果图

源代码参考：https://gitee.com/constfafa/baidumap_demo