实时公交api的实现，全国200+城市实时精准API

全国实时公交查询API接口，查询车来了实时公交接口，公交车到哪

实时公交： 城市列表 公交路线 实时位置 发车时刻表
换乘规划： 地点搜索 路线规划
附近查询： 附近公交 附近地铁 附近公厕
需求：当外部输入公交线路号，点击查询按钮的时候，会在div上显示所有包含此公交线路号的列表，点击列表中的项，会在百度地图上绘制出其线路。

功能申请入口

实现：

第一步：生成线路列表

使用的百度API：服务类中BusLineSearch类是公交线路搜索类。

构造其对象，调用其getBusList方法，在此方法的回调函数OnGetBusListComplete中返回BusListResult类型的公交列表结果

查询

$(“#query”).click(function () {
map.clearOverlays();
busNo = $(‘#keyword’).val();
busutil.getBusList(busNo);
window.localStorage.setItem(“busNo”, busNo);
//设置curItemNo=0，查询后会显示div中第一条线路
curItemNo = 0;
$(“#keyword”).val(“”);
})
回调函数

busutil = new BMap.BusLineSearch(“杭州”, {
renderOptions: {panel: “itemResult”},
onGetBusListComplete: function (buslist) {
var lineNameList = buslist.KA;
var html = [];
for (var i in lineNameList) {
//为每一项添加点击事件
html.push(‘

• ’ + lineNameList[i].name +
  ‘
• ’);
  }
  var l_result = document.getElementById(“l-result”);
  l_result.innerHTML = ‘
  • ’ + html.join(‘’) + ‘
  ’;
  },
  });

  功能申请入口
  

  第二步：列表项点击事件

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

          var lineNameList = buslist.KA;
          var html = [];
          for (var i in lineNameList) {
              html.push('<li><a href="javascript:void(0)" onclick="subgo(' + i + ' )">' + lineNameList[i].name +
                  '</a></li>');
          }
          var l_result = document.getElementById("l-result");
          l_result.innerHTML = '<ul>' + html.join('') + '</ul>';
  		//调用getBusLine方法，获取一个具体的公交列表中的对象
          busutil.getBusLine(buslist.getBusListItem(curItemNo));
      },
      onGetBusLineComplete: function (busline) {
  		//画具体线路            
      }
  });
  

  第四步：画具体线路

  使用的百度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事件，使其可以显示站点公交的实时信息

    百度地图API：使用覆盖物类中的InfoWindow类
  

  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;

              }
      });
  });
  map.addOverlay(marker);
  

  }

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

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

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

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

  功能申请入口