原文:【百度地图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. 导致Asp.Net站点重启的10个原因

    原文:导致Asp.Net站点重启的10个原因 Asp.Net站点有时候会莫名其妙的重启,什么原因导致的却不得而知,经过一番折腾后,我总结了导致Asp.Net站点重启的10个原因 1. 回收应用程序池会 ...

  2. C++输出数据到txt

    平时总遇到将数据写到txt中的情况,尤其是在调试程序看中间结果时,所以将代码保存下来,方便以后应用: ofstream outfile; string InitialFileName("In ...

  3. 设计Kafka的High Level Consumer

    原文:https://cwiki.apache.org/confluence/display/KAFKA/Consumer+Group+Example 为什么使用High Level Consumer ...

  4. 【转】Android 收集已发布程序的崩溃信息

    我们写程序的时候都希望能写出一个没有任何Bug的程序,期望在任何情况下都不会发生程序崩溃.不过理想是丰满的,现实是骨感的.没有一个程序员能保证自己写的程序绝对不会出现异常崩溃.特别是针对用户数达到几十 ...

  5. codeforces 260 div2 A,B,C

    A:水的问题.排序结构.看看是否相同两个数组序列. B:他们写出来1,2,3,4,的n钍对5余.你会发现和5环节. 假设%4 = 0,输出4,否则输出0. 写一个大数取余就过了. B. Fedya a ...

  6. Total Command help

  7. C#依据word模版动态生成文档

    新生开学,各院系辅导员代领校园卡.需要打印一份领取卡的协议,协议模版固定,但各院系卡的数量不同.需要从excel表格中抽取数据往word文件中填,同事咨询是否可以用word中的邮件合并功能,心想有这功 ...

  8. Qt Mac 在软件 icns图标制作

    1.首先,下载一个电话Icon Composer软件 之前Xcode像这个东西,现在,我不知道有或无,迷茫,一世Xcode很少. Icon Composer是苹果出的. 下载地址: http://ww ...

  9. crm使用soap插入下拉框选项

    //C# 代码: //InsertOptionValueRequest request = new InsertOptionValueRequest(); //request.OptionSetNam ...

  10. Rust这个新的语言

    Rust这个新的语言 Rust初步(七):格式化 摘要: 在Rust中,如果要进行屏幕输出,或者写入到文件中,需要对数据进行格式化.这一篇总结一下它所支持的几种格式化方式. 这篇文章参考了以下官方文档 ...