原文:【百度地图API】如何制作公交线路的搜索？如331路
摘要：
从A点到B点的公交导航大家都知道怎么做了，那么单独查询331路公交车的公交路线，如何制作呢？我们一起来学习一下~
-----------------------------------------------------------------------------------------------------------------
一、创建地图和网页样式
两句话建立地图：
var map = new BMap.Map("container");map.centerAndZoom(new BMap.Point(116.322, 40.003), 12);
然后把网页结构搭建好。有一张图片，一个文本框，一个按钮。还有一张地图。
CSS样式我就直接给出了，这里就不多说了。大家可以去W3Cschool学习~~这是我最爱的网站：http://www.w3school.com.cn/css/index.asp
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>搜索331路公交</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script></head><body><p><img src="http://map.baidu.com/img/logo-map.gif" /><span style="display:inline-block;width:200px;"> </span><input type="text" value="331" id="busId" />路公交 <input type="button" value="查询" onclick="busSearch();" /></p><div style="clear:both"> </div><div style="float:left;width:600px;height:500px;border:1px solid gray" id="container"></div><div id="results" style="float:left;width:300px;height:500px;font-size:13px;"></div></body></html><script type="text/javascript">var map = new BMap.Map("container");map.centerAndZoom(new BMap.Point(116.322, 40.003), 12);</script>
效果图：
二、公交线路接口
先来看看百度地图API给出的接口类参考：
使用构造函数，创建一个公交线路的查询。并在renderOptions里设置查询成功后，结果的展示。
var busline = new BMap.BusLineSearch(map,{ renderOptions:{map:map,panel:"results"}, onGetBusListComplete: function(result){if(result) {var fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上 busline.getBusLine(fstLine); } }});
创建一个函数，获取到文本框中输入的“331”路公交车，（还可以输入104，或者987，注意，只能支持数字）然后，执行查询。
function busSearch(){var busName = document.getElementById("busId").value; busline.getBusList(busName);}
效果图：
全部源代码：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>搜索331路公交</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script></head><body><p><img src="http://map.baidu.com/img/logo-map.gif" /><span style="display:inline-block;width:200px;"> </span><input type="text" value="331" id="busId" />路公交 <input type="button" value="查询" onclick="busSearch();" /></p><div style="clear:both"> </div><div style="float:left;width:600px;height:500px;border:1px solid gray" id="container"></div><div id="results" style="float:left;width:300px;height:500px;font-size:13px;"></div></body></html><script type="text/javascript">var map = new BMap.Map("container");map.centerAndZoom(new BMap.Point(116.322, 40.003), 12);
var busline = new BMap.BusLineSearch(map,{ renderOptions:{map:map,panel:"results"}, onGetBusListComplete: function(result){if(result) {var fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上 busline.getBusLine(fstLine); } }});function busSearch(){var busName = document.getElementById("busId").value; busline.getBusList(busName);}</script>
时间： 2024-09-27 20:11:45