【百度地图API】如何制作公交线路的搜索?如331路
2011-09-16 12:05
429 查看
摘要:
从A点到B点的公交导航大家都知道怎么做了,那么单独查询331路公交车的公交路线,如何制作呢?我们一起来学习一下~
-----------------------------------------------------------------------------------------------------------------
一、创建地图和网页样式
两句话建立地图:
然后把网页结构搭建好。有一张图片,一个文本框,一个按钮。还有一张地图。
CSS样式我就直接给出了,这里就不多说了。大家可以去W3Cschool学习~~这是我最爱的网站:http://www.w3school.com.cn/css/index.asp
效果图:
二、公交线路接口
先来看看百度地图API给出的接口类参考:
使用构造函数,创建一个公交线路的查询。并在renderOptions里设置查询成功后,结果的展示。
创建一个函数,获取到文本框中输入的“331”路公交车,(还可以输入104,或者987,注意,只能支持数字)然后,执行查询。
效果图:
全部源代码:
从A点到B点的公交导航大家都知道怎么做了,那么单独查询331路公交车的公交路线,如何制作呢?我们一起来学习一下~
-----------------------------------------------------------------------------------------------------------------
一、创建地图和网页样式
两句话建立地图:
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.322, 40.003), 12);
然后把网页结构搭建好。有一张图片,一个文本框,一个按钮。还有一张地图。
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(0);//获取第一个公交列表显示到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】如何制作公交线路的搜索?如331路
- 【百度地图API】如何制作商圈地图?行政地图?
- 如何利用【百度地图API】,制作房产酒店地图?
- 【百度地图API】如何制作商圈地图?行政地图?
- 【百度地图API】如何进行地址解析与反地址解析?——模糊地址能搜索到精确地理信息!
- 【百度地图API】交你如何用百度地图搜索自己的数据!不需数据库!
- 【百度地图API】如何区分地址解析和智能搜索?
- 【百度地图API】如何使用suggestion--下拉列表方式的搜索建议
- 百度地图,如何实现公交线路搜索后跳转回主Activity中用MapView显示出来
- 【百度地图API】如何制作多途经点的线路导航——驾车篇
- 【百度地图API】如何制作泡泡放大镜?
- 百度地图高级实例1-如何利用【百度地图API】,制作房产酒店地图?(下)
- 【百度地图API】如何使用suggestion--下拉列表方式的搜索建议
- 【百度地图API】如何制作班级地理通讯录?LBS通讯录
- 酸奶小妹 奔波于七层楼隔三差五送酸奶的小姑娘正在努力学习百度地图API 如何利用【百度地图API】,制作房产酒店地图?(上)——制作自定义标注和自定义信息窗口
- 【百度地图API】如何利用地图API制作汽车沿道路行驶的动画?——如何获得道路层数据
- 【百度地图API】如何制作孪生姐妹地图?
- 【百度地图API】如何制作泡泡放大镜?
- 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注