原文:【百度地图API】如何制作公交线路的搜索？如331路

摘要：

　　从A点到B点的公交导航大家都知道怎么做了，那么单独查询331路公交车的公交路线，如何制作呢？我们一起来学习一下~

-----------------------------------------------------------------------------------------------------------------

一、创建地图和网页样式

两句话建立地图：

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.322, 40.003), );

　　

然后把网页结构搭建好。有一张图片，一个文本框，一个按钮。还有一张地图。

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;">&nbsp;</span><input type="text" value="331" id="busId" />路公交&nbsp;<input type="button" value="查询" onclick="busSearch();" /></p>
<div style="clear:both">&nbsp;</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();//获取第一个公交列表显示到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;">&nbsp;</span><input type="text" value="331" id="busId" />路公交&nbsp;<input type="button" value="查询" onclick="busSearch();" /></p>
<div style="clear:both">&nbsp;</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>

　　

【百度地图API】如何制作公交线路的搜索？如331路的更多相关文章

  1. 【百度地图API】制作多途经点的线路导航——路线坐标规划

    一.创建地图 首先要告诉大家的是,API1.2版本取消密钥,取消服务设置,大家可以采用更加简短的方式引用API的JS啦~ <script type="text/javascript&q ...

  2. 使用百度地图api接口获取公交地图路线和车站

    需要在页面文件中引用百度的js @*<script type="text/javascript" src="http://api.map.baidu.com/api ...

  3. 【百度地图API】如何制作自定义样式的公交导航结果面板？

    原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...

  4. 百度地图API和高德地图API资料集锦

    [高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行   [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...

  5. 【百度地图API】JS版本的常见问题

    1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...

  6. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

  7. 【百度地图API】如何制作“从这里出发”“到这里去”——公交篇

    原文:[百度地图API]如何制作"从这里出发""到这里去"--公交篇 摘要: 百度地图首页上的“从这里出发”“到这里去”,一直是开发者们很热衷的一个功能.那么, ...

  8. 【百度地图API】如何制作多途经点的线路导航——驾车篇

    原文:[百度地图API]如何制作多途经点的线路导航--驾车篇 摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ----- ...

  9. 百度地图API —— 制作多途经点的线路导航

    [百度地图API]如何制作多途经点的线路导航——驾车篇   摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ------ ...

随机推荐

  1. linux内核数据包转发流程（三）网卡帧接收分析

    [版权声明:转载请保留出处:blog.csdn.net/gentleliu.邮箱:shallnew*163.com] 每一个cpu都有队列来处理接收到的帧,都有其数据结构来处理入口和出口流量,因此,不 ...

  2. 【浅墨著作】《OpenCV3编程入门》内容简单介绍&amp;勘误&amp;配套源码下载

    经过近一年的沉淀和总结,<OpenCV3编程入门>一书最终和大家见面了. 近期有为数不少的小伙伴们发邮件给浅墨建议最好在博客里面贴出这本书的文件夹,方便大家更好的了解这本书的内容.事实上近 ...

  3. jquery之ajax中国乱码的解决方案

    $.ajax({ dataType : 'json',type : 'POST',url : 'http://localhost/test/test.do',data : {id: 1, type: ...

  4. java--照片和BYTE这些东西阵列

    使用java,图像被变换成BYTE排列.和该阵列为图象,远程传输的图片进行 参考:http://blog.csdn.net/huang9012/article/details/18241539 代码例 ...

  5. WPF学习（9）样式和行为

    在asp.net世界中,我们的美工人员会为我们准备好静态页面,它注意包括三个部分:html.css和js.而在WPF世界里,也同样有着类似这三个部分的静态页面:Xaml.Style和Behaviors ...

  6. UI设计规范

    iphone\ipad.android UI设计规范对比 http://blog.163.com/leenell@yeah/blog/static/95840991201302210451710/ A ...

  7. arcgis,mapinfo(mapxtreme),openlayers专业GIS系统开发

    专业从事基于C#,WinForm ,WPF,Silverlight,WCF以及MS Sql Server 2000/2005/2008/2012 Oracle 9i/10g/11g数据库系统的ERP, ...

  8. js 性能优化整理之 缓存变量

    简单的常见的操作:假设每个便签添加一个  属性   -webkit-animation-delay:0.1s 递增操作::通过for循环添加 <ul id="uls"> ...

  9. NSIS：禁止多次安装实例

    原文 NSIS:禁止多次安装实例 为了防止用户重复安装软件,我们可以加入以下的判断来进行限制. 第一步:在安装脚本中,将是否已安装的标记Installed写入注册表中: 1 Section -Post ...

  10. git checkout 命令详解(转)

    在日常的git操作中,git checkout——检出,是我们的常用命令.最为常用的两种情形是创建分支和切换分支. 在下面的命令中,使用了一些简写,在这里说明一下: git st # git stat ...