原文:【百度地图API】小学生找哥哥——小学生没钱打车,所以此为公交查询功能
任务描述:
有位在魏公村附近上小学的小朋友,要去北京邮电大学找哥哥。他身上钱很少,只够坐公交的。所以,百度地图API快帮帮他吧!
如何实现:
把地图中心定在魏公村,在视野范围内搜索小学。
搜索完毕后,点击出现的红色标注,在输入框中输入北京邮电大学,然后查询,即可得到公交路线图。
图示:
运行代码,点击这里。
点击公交按钮需要做的查询工作。
在这里,请大家一定注意,所有公交查询,只创建一次对象。不然会有很大的内存消耗哦~
//公交线路查询 function tSearch() { //请不要在查询的时候创建公交对象 if(curTitle.length>) { 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), );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>