需求：当外部输入公交线路号，点击查询按钮的时候，会在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('<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>';
},
});
第二步：列表项点击事件
使用的百度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<Point>的公交线地理坐标点数组（注意：其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切换
上一张效果图
