【百度地图API】小学生找哥哥——小学生没钱打车，所以此为公交查询功能
2010-12-22 16:04
246 查看
任务描述：
有位在魏公村附近上小学的小朋友，要去北京邮电大学找哥哥。他身上钱很少，只够坐公交的。所以，百度地图API快帮帮他吧！
如何实现：
把地图中心定在魏公村，在视野范围内搜索小学。
搜索完毕后，点击出现的红色标注，在输入框中输入北京邮电大学，然后查询，即可得到公交路线图。
图示：
运行代码，点击这里。
点击公交按钮需要做的查询工作。
在这里，请大家一定注意，所有公交查询，只创建一次对象。不然会有很大的内存消耗哦~
//公交线路查询
function tSearch()
{
//请不要在查询的时候创建公交对象
if(curTitle.length>0)
{
var dest=document.getElementById("txtDest").value;
ts.search(curTitle,dest);
}
}
创建公交对象，最好和地图初始化一起做。这样能保证只创建一次公交对象。
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.330599, 39.95536), 16);
var curTitle="";
//一定要先建立一个公交查询的对象，以后都只用这个对象，不要再次创建了。
var ts=new BMap.TransitRoute(map,{
renderOptions:{
map:map,
panel:"divResult"
}
});
全部代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>酸奶小妹——百度地图API学习</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="http://api.map.baidu.com/api?key=25f144bb4491f54b83a7a7b39198c11e&v=1.1&services=true" ></script>
<link rel="stylesheet" type="text/css" href="http://ui-love.com/baidumap/base.css" media="screen" />
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>公交查询</h1>
<p><span class="f-r">2011-01-14</span>任务描述:</p>
<p>首先，周边查询，比如“小学”；<br />
然后，点击任一个红色标注；<br />
弹出信息窗口中，输入需要前往的地址，比如“北京邮电大学”,点击“前往”;
即可出现公交乘坐路线。</p>
</div>
<div class="container clearfix">
<div class="clearfix"><input id="txtSearch" type="text" value="小学" /><input type="button" value="查询" onclick="search()" /></div>
<div class="myMap f-l" id="container"></div>
<div id="divResult" class="myMap myMap2 f-l"></div>
</div>
<div class="footer">
<span class="f-r">COPYRIGHT © 酸奶小妹</span>
<span>友情链接:
<a target="_blank" href="http://openapi.baidu.com/map/index.html">百度地图API</a>|
<a target="_blank" href="http://tieba.baidu.com/f?kw=%B0%D9%B6%C8%B5%D8%CD%BCapi&fr=tb0_search&ie=utf-8">百度地图API贴吧</a>|
<a target="_blank" href="http://map.baidu.com/">百度地图</a>|
<a target="_blank" href="http://www.cnblogs.com/milkmap/">酸奶小妹</a>
</span>
</div>
</div>
</body>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.330599, 39.95536), 16);
var curTitle="";
//一定要先建立一个公交查询的对象，以后都只用这个对象，不要再次创建了。
var ts=new BMap.TransitRoute(map,{
renderOptions:{
map:map,
panel:"divResult"
}
});
function search()
{
var s=document.getElementById("txtSearch");
var ls=new BMap.LocalSearch(map,{pageCapacity:20});
//设置回调函数
ls.setSearchCompleteCallback(function(result){
map.clearOverlays();//清除所有覆盖物
//自己添加对应的覆盖物
if(ls.getStatus()==BMAP_STATUS_SUCCESS)
{
//result为LocalResult类型
var curNum=result.getCurrentNumPois();
for(var i=0;i<curNum;i++)
{
//poi为LocalResultPoi类型
var poi=result.getPoi(i);
var lng=poi.point.lng;
var lat=poi.point.lat;
var title=poi.title;
var pt=new BMap.Point(lng,lat);
var marker=new BMap.Marker(pt);
marker.setTitle(title);
marker.addEventListener("click",fnClick(marker));
map.addOverlay(marker);
}
}
});
ls.searchInBounds(s.value,map.getBounds());
}
//为每个标注制定不同的回调函数
function fnClick(marker)
{
return function()
{
curTitle=marker.getTitle();
var html="从"+curTitle+"出发，坐<b>公交</b>到"+"<input id='txtDest' type='text' value='北京邮电大学' /><input type='button' value='查询' onclick='tSearch()' />";
var infoWin=new BMap.InfoWindow(html);
infoWin.addEventListener("open",function(){
//给输入框添加焦点
document.getElementById("txtDest").focus();
});
marker.openInfoWindow(infoWin);
}
}
//公交线路查询
function tSearch()
{
//请不要在查询的时候创建公交对象
if(curTitle.length>0)
{
var dest=document.getElementById("txtDest").value;
ts.search(curTitle,dest);
}
}
</script>
</html>
有位在魏公村附近上小学的小朋友，要去北京邮电大学找哥哥。他身上钱很少，只够坐公交的。所以，百度地图API快帮帮他吧！
如何实现：
把地图中心定在魏公村，在视野范围内搜索小学。
搜索完毕后，点击出现的红色标注，在输入框中输入北京邮电大学，然后查询，即可得到公交路线图。
图示：
运行代码，点击这里。
点击公交按钮需要做的查询工作。
在这里，请大家一定注意，所有公交查询，只创建一次对象。不然会有很大的内存消耗哦~
//公交线路查询
function tSearch()
{
//请不要在查询的时候创建公交对象
if(curTitle.length>0)
{
var dest=document.getElementById("txtDest").value;
ts.search(curTitle,dest);
}
}
创建公交对象，最好和地图初始化一起做。这样能保证只创建一次公交对象。
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.330599, 39.95536), 16);
var curTitle="";
//一定要先建立一个公交查询的对象，以后都只用这个对象，不要再次创建了。
var ts=new BMap.TransitRoute(map,{
renderOptions:{
map:map,
panel:"divResult"
}
});
全部代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>酸奶小妹——百度地图API学习</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="http://api.map.baidu.com/api?key=25f144bb4491f54b83a7a7b39198c11e&v=1.1&services=true" ></script>
<link rel="stylesheet" type="text/css" href="http://ui-love.com/baidumap/base.css" media="screen" />
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>公交查询</h1>
<p><span class="f-r">2011-01-14</span>任务描述:</p>
<p>首先，周边查询，比如“小学”；<br />
然后，点击任一个红色标注；<br />
弹出信息窗口中，输入需要前往的地址，比如“北京邮电大学”,点击“前往”;
即可出现公交乘坐路线。</p>
</div>
<div class="container clearfix">
<div class="clearfix"><input id="txtSearch" type="text" value="小学" /><input type="button" value="查询" onclick="search()" /></div>
<div class="myMap f-l" id="container"></div>
<div id="divResult" class="myMap myMap2 f-l"></div>
</div>
<div class="footer">
<span class="f-r">COPYRIGHT © 酸奶小妹</span>
<span>友情链接:
<a target="_blank" href="http://openapi.baidu.com/map/index.html">百度地图API</a>|
<a target="_blank" href="http://tieba.baidu.com/f?kw=%B0%D9%B6%C8%B5%D8%CD%BCapi&fr=tb0_search&ie=utf-8">百度地图API贴吧</a>|
<a target="_blank" href="http://map.baidu.com/">百度地图</a>|
<a target="_blank" href="http://www.cnblogs.com/milkmap/">酸奶小妹</a>
</span>
</div>
</div>
</body>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.330599, 39.95536), 16);
var curTitle="";
//一定要先建立一个公交查询的对象，以后都只用这个对象，不要再次创建了。
var ts=new BMap.TransitRoute(map,{
renderOptions:{
map:map,
panel:"divResult"
}
});
function search()
{
var s=document.getElementById("txtSearch");
var ls=new BMap.LocalSearch(map,{pageCapacity:20});
//设置回调函数
ls.setSearchCompleteCallback(function(result){
map.clearOverlays();//清除所有覆盖物
//自己添加对应的覆盖物
if(ls.getStatus()==BMAP_STATUS_SUCCESS)
{
//result为LocalResult类型
var curNum=result.getCurrentNumPois();
for(var i=0;i<curNum;i++)
{
//poi为LocalResultPoi类型
var poi=result.getPoi(i);
var lng=poi.point.lng;
var lat=poi.point.lat;
var title=poi.title;
var pt=new BMap.Point(lng,lat);
var marker=new BMap.Marker(pt);
marker.setTitle(title);
marker.addEventListener("click",fnClick(marker));
map.addOverlay(marker);
}
}
});
ls.searchInBounds(s.value,map.getBounds());
}
//为每个标注制定不同的回调函数
function fnClick(marker)
{
return function()
{
curTitle=marker.getTitle();
var html="从"+curTitle+"出发，坐<b>公交</b>到"+"<input id='txtDest' type='text' value='北京邮电大学' /><input type='button' value='查询' onclick='tSearch()' />";
var infoWin=new BMap.InfoWindow(html);
infoWin.addEventListener("open",function(){
//给输入框添加焦点
document.getElementById("txtDest").focus();
});
marker.openInfoWindow(infoWin);
}
}
//公交线路查询
function tSearch()
{
//请不要在查询的时候创建公交对象
if(curTitle.length>0)
{
var dest=document.getElementById("txtDest").value;
ts.search(curTitle,dest);
}
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【百度地图API】小学生找哥哥——小学生没钱打车，所以此为公交查询功能
- 【百度地图API】小学生找哥哥——小学生没钱打车，所以此为公交查询功能
- 百度地图API之定位当前和公交查询
- 百度地图API之定位当前和公交查询
- 百度地图API之定位当前和公交查询
- 百度地图API简单应用-根据地址查询经纬度小功能
- 微信公众平台功能大杂烩 - ip/域名查询 车牌号归属地查询 手机归属地查询 公交查询 英汉互译
- BaiduMap---百度地图官方Demo之公交线路查询功能（介绍查询公交线路功能）
- 怎样在google手机地图中方便使用公交查询功能
- 使用xmlhttp为网站增加股市行情查询功能
- 上弦科技OA办公系统功能介绍共分为6大块个人工作、工作流、报表查询、知识文库、企业文化、移动办公OA系统
- MYSQL查询优化：profile功能
- 百度地图3.2教程（2）公交查询
- 给下拉框添加模糊查询功能
- MYSQL查询优化：profile功能
- jQuery zTree搜索-关键字查询 递归无限层功能实现代码
- hibernate根据条件动态组装sql/hql语句(仿ibatis动态查询语句功能)
- 百度地图API 根据地址查询经纬度