原文:【百度地图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. 经验19--C#大事

    以前学过C#大事.但我还没有搞懂怎么弄. 这一次,他们下进行了研究. 1.定义参数类,对于参数的传递活动.(可以省略) public class UserEventArgs     {         ...

  2. ASP.NET跨平台

    ASP.NET跨平台最佳实践 前言 八年的坚持敌不过领导的固执,最终还是不得不阔别已经成为我第二语言的C#,转战Java阵营.有过短暂的失落和迷茫,但技术转型真的没有想象中那么难.回头审视,其实单从语 ...

  3. LeetCode——Climbing Stairs

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  4. Codeforces 442B Andrey and Problem(贪婪)

    题目链接:Codeforces 442B Andrey and Problem 题目大意:Andrey有一个问题,想要朋友们为自己出一道题,如今他有n个朋友.每一个朋友想出题目的概率为pi,可是他能够 ...

  5. OSChina 的URL类的源代码重写过程

    此代码是 oschina 到手柄形状像 http://www.oschina.net/p/tomcat 这种URL 此类已经废弃,改用 http://www.oschina.net/code/snip ...

  6. C语言文件操作函数大全

    http://blog.csdn.net/mu0206mu/article/details/18980913 clearerr(清除文件流的错误旗标) 相关函数 feof表头文件 #include&l ...

  7. atittit.表单验证性质的原则和实施，以及选择和定义自己的兼容easyui dsl窗体身份验证规则

    atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl规则的表单验证 1. 需求,表单验证须要弹框式,但眼下easyui ms绑定死了tooltip式样 1 2. 表单 ...

  8. NSIS：在线下载并安装程序

    原文 NSIS:在线下载并安装程序 看到有同学留言说需要这方面的代码,所以贴出以下代码供参考(非完整脚本).需要用NSISdl插件. Section -.NET Framework    NSISdl ...

  9. 《R实战》读书笔记三

    第二章  创建数据集 本章概要 1探索R数据结构 2使用数据编辑器 3数据导入 4数据集标注 本章所介绍内容概括例如以下. 两个方面的内容. 方面一:R数据结构 方面二:进入数据或者导入数据到数据结构 ...

  10. Ruby 一些经常使用的细节

    1.try 永远不会抛出异常 在 没有的时候 返回 nil province_id = Province.find_by_name(prov).try(:id) 2.find(:first, :con ...