使用百度API实现实时公交站点查询及地图显示

需求：当外部输入公交站点名称，点击查询按钮的时候，会在div上显示所有包含此公交站点的公交线路号的列表，点击列表中的项，会在百度地图上绘制出其线路。

实现：

 

第一步：生成经过此公交站点的所有线路列表

使用的百度API：服务类中LocalSearch类，用于进行位置搜索、周边搜索和范围搜索。其提供search方法，返回LocalResult给回调函数onSearchComplete。

查询

 

document.getElementById('query').onclick = function () {
        map.clearOverlays();
        keyword01 = document.getElementById('keyword01').value + "公交车站";
        window.localStorage.setItem('keyword01', keyword01);
        new BMap.LocalSearch("杭州", {
            onSearchComplete: searchComplete
        }).search(keyword01);

        $("#keyword01").val("");
    };

 

LocalResult提供getCurrentNumPois()方法，返回当前页的结果数，由于我们添加了公交车站keyword，所以应该（？）在第一页就能找到此公交车站。getPoi(i)方法，返回LocalResultPoi对象，表示位置检索的一个结果点。

LocalResultPoi对象的属性type为枚举类型poiType，表示地点的类型，限制其为公交车站

function searchComplete(result) {
    var html = [];
    for (var i = 0; i < result.getCurrentNumPois(); i++) {
        var poi = result.getPoi(i);
        if (poi.type == BMAP_POI_TYPE_BUSSTOP) {
            var busNames = poi.address.split(';');
            for (i = 0; i < busNames.length; i++) {
                //获得了所有的busName 把它写到div中
                html.push('<li><a href="javascript:void(0)" onclick="subgo(\'' + busNames[i] + '\')">' +
                    busNames[i] +
                    '</a></li>');
            }
        } else {

        }
    }
    var l_result = document.getElementById("l-result");
    l_result.innerHTML = '<ul>' + html.join('') + '</ul>';
}

第二步：列表项点击事件

点击

function subgo(itemNo) {
    busNo01 = itemNo;
    window.localStorage.setItem("busNo01", busNo01);
    busutil.getBusList(busNo01);
}

 

第三步：列表项点击显示具体的线路信息

 

服务类中BusLineSearch类是公交线路搜索类。构造其对象，调用其getBusList方法，由于busName已经是很详细的线路名，所以在其回调函数onGetBusListComplete中使用getBusLine(buslist.getBusListItem(curItemNo)只需要0和1

busutil = new BMap.BusLineSearch(map, {
        renderOptions: {panel: "itemResult"},
        onGetBusListComplete: function (buslist) {
            //考虑环线
            if (buslist.getBusListItem(curItemNo01) == undefined) {
                curItemNo01 = 0;
                window.localStorage.setItem('curItemNo01', curItemNo01);
            }
            busutil.getBusLine(buslist.getBusListItem(curItemNo01));
        }
    });

 

后面与公交地图按线路查询的步骤相同。参考：

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

 

 

 

实现效果：

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