使用百度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

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

使用百度API实现实时公交站点查询及列表显示
需求:当外部输入公交站点名称,点击查询按钮的时候,会在div上显示所有包含此公交站点的公交线路号的列表,点击列表中的项,会绘制出其线路列表. 实现: 第一步:生成经过此公交站点的所有线路列表第二步: ...
使用百度API实现实时公交线路查询及地图显示
需求:当外部输入公交线路号,点击查询按钮的时候,会在div上显示所有包含此公交线路号的列表,点击列表中的项,会在百度地图上绘制出其线路. 实现: 第一步:生成线路列表使用的百度API:服务类中Bus ...
使用百度API实现实时公交线路查询及列表显示
当外部输入公交线路号,点击查询按钮的时候,会在div上显示所有包含此公交线路号的列表,点击列表中的项,绘制其站点列表. 实现: 第一步:生成线路列表第二步:列表项点击事件与公交地图_按线路查询相同 ...
高德地图公交站点查询
AMap.StationSearch 公交站点查询服务,提供途经公交线路.站点经纬度等信息高德api接口 AMap.StationSearch这个插件主要用于公交站点的查询,根据我们输入的城市以及站 ...
PHP学习笔记：利用百度api实现手机归属地查询
从来没有用过api,都不知道怎么获得api的数据,跟着demo,然后修改,终于实现了手机号码查询的功能,代码和说明很全,大家试试. <?php /*** Created by jianqingw ...
利用百度API Store接口进行火车票查询
火车票查询项目源码下载链接: Github:https://github.com/VincentWYJ/TrainTicketQuery 博客文件:http://files.cnblogs.com/ ...
python 爬取百度地图的南京市公交站点
输入公交路线,获取路线上下行的公交站点名称 import json import math import random import refrom lxml import etree import r ...
高德地图地铁公交站点...查询
高德地图的查询(地铁-) 引入的是高德的搜索插件(AMap.PlaceSearch) 具体使用: (记得注册高德地图的key) , 效果图在最后哦. 引入高德sdk,记得注册key 将sdk放在vue ...
北京实时公交查询微信小程序
目录实现效果源代码实践报告摘要概述题目的背景及研究意义本系统主要研究内容系统需求分析公交路线查询模块需求分析附近公交站点信息查看模块需求分析公交实时信息查看模块需求分析实时公交 ...

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

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

最新文章

热门文章