使用百度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

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

使用百度API实现实时公交站点查询及列表显示
需求:当外部输入公交站点名称,点击查询按钮的时候,会在div上显示所有包含此公交站点的公交线路号的列表,点击列表中的项,会绘制出其线路列表. 实现: 第一步:生成经过此公交站点的所有线路列表第二步: ...
使用百度API实现实时公交线路查询及地图显示
需求:当外部输入公交线路号,点击查询按钮的时候,会在div上显示所有包含此公交线路号的列表,点击列表中的项,会在百度地图上绘制出其线路. 实现: 第一步:生成线路列表使用的百度API:服务类中Bus ...
使用百度API实现实时公交站点查询及地图显示
需求:当外部输入公交站点名称,点击查询按钮的时候,会在div上显示所有包含此公交站点的公交线路号的列表,点击列表中的项,会在百度地图上绘制出其线路. 实现: 第一步:生成经过此公交站点的所有线路列表 ...
苏州公交线路查询api-苏州公交状态实时跟踪
苏州公交线路查询api-苏州公交状态实时跟踪,查询公交详细信息. 接口名称:苏州公交线路查询api 接口平台:api接口接口地址:http://apis.juhe.cn/szbusline/info ...
地图API公交线路查询
地图API公交线路查询详见 http://www.hjlib.org/cd/tiles/zoom/index.html
公交APP评测：谁是最好用的公交线路查询软件？
近日,北京公共交通价格调整听证方案引发广泛关注.公交.地铁作为大部分居民首选出行方式,此番调价势必影响百姓出行的选择.帮助市民快速.准确的找到最佳省钱的出行路线,公交线路查询软件应势而生.小编挑选了爱 ...
微信公众号开发（公交线路查询-JAVA
一.Dom4j的使用在介绍公交线路开发之前,先简单介绍下Dom4j的使用,因为公交线路查询引用的是爱帮公交api,调用结果为xml格式文件,故用到了Dom4j这个包,当然还有其他的包来读取xm ...
C#窗体调用地图（高德地图）-实现公交线路查询
C#窗体调用地图(高德地图)-实现公交线路查询新建C#工程–创建Windows窗体应用程序添加WebBrowser控件(用来显示网地图页)可以把滚动条(ScrollBarsEnabled)设置成f ...
公交线路查询接口文档
公交路线查询公交路线查询有很多网站都作了接口api,我使用的是haoservice的接口,需要您申请key值(http://www.haoservice.com/docs/23) haoservic ...

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

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

最新文章

热门文章