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

来源：互联网发布：线程同步 linux 编辑：程序博客网时间：2024/05/01 07:45

需求：当外部输入公交站点名称，点击查询按钮的时候，会在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实现实时公交线路查询及地图显示

实现效果：

阅读全文

0 0