原文:【百度地图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. phonegap+emberjs+python手机店发展，html5实现本地车类别~

    商城开发项目,现在需要做出APP,无奈出场前android但不是很精通.最后选择phonegap实现app. 由于之前办理购物车分为登陆和登陆后两种情况,登录前必须充分利用本地存储.而基于phoneg ...

  2. ios 多线程开发（三）Run Loops

    Run loops是线程相关的一些基本东西.一个run loop是一个处理消息的循环.用来处理计划任务或者收到的事件.run loop的作用是在有事做的时候保持线程繁忙,没事的时候让线程挂起. Run ...

  3. Linux lspci查看硬件设备

    Linux 主机的硬件配备 lspci 找到的是眼下主机上面的硬件配备 [root@www ~]# lspci [-vvn] 选项与參数: -v     :显示很多其它的 PCI 接口装置的具体信息 ...

  4. Tuple

    Tuple(组元)是C# 4.0引入的一个新特性,编写的时候需要基于.NET Framework 4.0或者更高版本. 在以前编程中,当需要返回多个值得方法中,常常需要将这些值放置到一个结构体或者对象 ...

  5. C#使用xpath找到一个节点

    Xpath这是非常强大.但对比是一个更复杂的技术,希望上面去博客园特别想看看一些专业职位.下面是一些简单Xpath的语法和示例,给你参考 <?xml version="1.0" ...

  6. MVC5个人用户账户身份验证集成google和facebook的OAuth2登陆

    最终效果 官方文档:MVC 5 App with Facebook, Twitter, LinkedIn and Google OAuth2 Sign-on 内容简介:上面传送门的博客中讲解了如何在M ...

  7. Repeater在无数据记录时显示暂无数据

    原文:Repeater在无数据记录时显示暂无数据 方法就是在FooterTemplate加个Label并根据repeater.Items.Count判断是否有记录.关键代码如下: <Footer ...

  8. linux网络编程投票

    投票系统 1.说明: 写了一个投票系统.过程是先配置好server,在写一个网上投票功能.要实现网上投票功能. 事实上功能实现还是非常easy的,麻烦一点的在于过程比較繁杂,要做的东西还是挺多的. 2 ...

  9. （大数据工程师学习路径）第三步 Git Community Book----Git基本用法（上）

    一.git的初始化 1.Git 配置 使用Git的第一件事就是设置你的名字和email,这些就是你在提交commit时的签名. $ git config --global user.name &quo ...

  10. ZOJ3605-Find the Marble(可能性DP)

    Find the Marble Time Limit: 2 Seconds      Memory Limit: 65536 KB Alice and Bob are playing a game. ...