【百度地图API】小学生找哥哥――小学生没钱打车,所以此为公交查询功能

任务描述:

  有位在魏公村附近上小学的小朋友,要去北京邮电大学找哥哥。他身上钱很少,只够坐公交的。所以,百度地图API快帮帮他吧!

如何实现:

  把地图中心定在魏公村,在视野范围内搜索小学。

  搜索完毕后,点击出现的红色标注,在输入框中输入北京邮电大学,然后查询,即可得到公交路线图。

图示:

2010122216030782.png

运行代码,点击这里。

点击公交按钮需要做的查询工作。

在这里,请大家一定注意,所有公交查询,只创建一次对象。不然会有很大的内存消耗哦~

//公交线路查询
  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 &copy; 酸奶小妹</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>


你可能感兴趣的:(function,百度地图,路线图)