使用百度API实现实时公交站点查询及地图显示 |
您所在的位置：网站首页 › 公交站到站查询 › 使用百度API实现实时公交站点查询及地图显示 |
使用百度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('' + busNames[i] + ''); } } else { } } var l_result = document.getElementById("l-result"); l_result.innerHTML = '' + html.join('') + ''; }第二步：列表项点击事件 点击 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
|
【本文地址】