使用百度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实现实时公交线路查询及地图显示

实现效果:


展开阅读全文

没有更多推荐了,返回首页