【百度地图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;"> </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();//获取第一个公交列表显示到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>
【百度地图API】如何制作公交线路的搜索？如331路的更多相关文章
- 【百度地图API】制作多途经点的线路导航——路线坐标规划
一.创建地图 首先要告诉大家的是,API1.2版本取消密钥,取消服务设置,大家可以采用更加简短的方式引用API的JS啦~ <script type="text/javascript&q ...
- 使用百度地图api接口获取公交地图路线和车站
需要在页面文件中引用百度的js @*<script type="text/javascript" src="http://api.map.baidu.com/api ...
- 【百度地图API】如何制作自定义样式的公交导航结果面板？
原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...
- 百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...
- 【百度地图API】JS版本的常见问题
1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...
- 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明
前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...
- 【百度地图API】如何制作“从这里出发”“到这里去”——公交篇
原文:[百度地图API]如何制作"从这里出发""到这里去"--公交篇 摘要: 百度地图首页上的“从这里出发”“到这里去”,一直是开发者们很热衷的一个功能.那么, ...
- 【百度地图API】如何制作多途经点的线路导航——驾车篇
原文:[百度地图API]如何制作多途经点的线路导航--驾车篇 摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ----- ...
- 百度地图API —— 制作多途经点的线路导航
[百度地图API]如何制作多途经点的线路导航——驾车篇 摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ------ ...
随机推荐
- 【C语言探索之旅】 第一部分第七课：循环语句
内容简介 1.课程大纲 2.第一部分第七课: 循环语句 3.第一部分第八课预告: 第一个C语言小游戏 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编 ...
- ListView 实现多选/无线电
ListView本身与无线电.多选模式.由listview.setChoiceMode设置: listview.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE) ...
- IOS开发——手动设置屏幕旋转
在移动开发过程.您可能需要跨越看看你的手机.有可能是所有的接口必须跨越,有可能是一个交叉通过电话,当用户当,你的接口也希望他能跨越.还有可能的是,界面的一部分需要被侧向显示.视情况而定,有不同的方法来 ...
- 【IPC第二个进程间通信】管道Pipe
IPC进程间通信+管道Pipe IPC(Inter-Process Communication,进程间通信). 管道用于进程间共享数据,事实上质是共享内存 ...
- Android技术——切换视图（两）随着ViewPage达到Tab幻灯片浏览
Android技术--切换视图(一)~(四)在资源项目:https://github.com/YongYuIT/MeiNv_Liulanqi 一.早期android(android.support.v ...
- Android应用公布的准备——生成渠道包
我们须要使用一个变量标明该app的渠道.通常我们能够在manifest中的application节点下声明.例如以下. <meta-data android:name="CHANNEL ...
- hdu 5106 Bits Problem(数位dp)
题目链接:hdu 5106 Bits Problem 题目大意:给定n和r,要求算出[0,r)之间全部n-onebit数的和. 解题思路:数位dp,一个ct表示个数,dp表示和,然后就剩下普通的数位d ...
- Android 中字体的处理
//得到TextView控件对象 TextView textView = (TextView)findViewById(R.id.custom); //将字体文件保存在assets/fonts/文件夹 ...
- Docker contanier comunication with route
2台宿主机,hslave1 192.168.1.153, hslave2 192.168.1.154 修改网段 docker0默认网段是172.17.0.0/16,修改154机器的docker0的网段 ...
- 公布一个基于 Reactor 模式的 C++ 网络库
公布一个基于 Reactor 模式的 C++ 网络库 陈硕 (giantchen_AT_gmail) Blog.csdn.net/Solstice 2010 Aug 30 本文主要介绍 muduo 网 ...