原文:【百度地图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 &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>

【百度地图API】小学生找哥哥——小学生没钱打车，所以此为公交查询功能的更多相关文章

  1. 【百度地图API】如何制作“从这里出发”“到这里去”——公交篇

    原文:[百度地图API]如何制作"从这里出发""到这里去"--公交篇 摘要: 百度地图首页上的“从这里出发”“到这里去”,一直是开发者们很热衷的一个功能.那么, ...

  2. Qt开发北斗定位系统融合百度地图API及Qt程序打包发布

    Qt开发北斗定位系统融合百度地图API及Qt程序打包发布 1.上位机介绍 最近有个接了一个小型项目,内容很简单,就是解析北斗GPS的串口数据然后输出经纬度,但接过来觉得太简单,就发挥了主观能动性,增加 ...

  3. 百度地图API功能集锦

    1.点个数太多导致加载缓慢的解决. 2.可视化区域内加载的解决. 3.自定义信息窗口解决. 4.区域/板块/商圈等的绘制功能解决. 基本包含了用到百度地图API会使用到的大部分常规性场景.(聚合点功能 ...

  4. 【c#】Form调用百度地图api攻略及常见问题

    首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...

  5. 百度地图API 与 jquery 同时使用时报 TypeError $(...) is null错误 失效的原因及解决办法

    在引用百度地图API后,发现jquery 根据id 找不到 form.但是对于别的控件没有问题. 在排除了 html加载的问题后. 上网查找 发现以下解决办法: 原因应该是有冲突的插件. 解决办法将 ...

  6. html5:地理信息 LBS基于地理的服务和百度地图API的使用

    地理位置请求 单次定位请求getCurrentPosition(请求成功函数,请求失败函数,数据收集方式) 多次定位请求watchPosition(请求成功函数,请求失败函数,数据收集方式) 关闭更新 ...

  7. 深入浅出百度地图API开发系列（1）：前言

    百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能 ...

  8. 数据视化Echarts+百度地图API实现市县区级下钻

    开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...

  9. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

随机推荐

  1. 最小二乘法拟合java实现源程序（转）

    因为我所在的项目要用到最小二乘法拟合,所有我抽时间将C++实现的程序改为JAVA实现,现在贴出来,供大家参考使用./** * <p>函数功能:最小二乘法曲线拟合</p> * @ ...

  2. Ozmosis实现BIOS直接启动Yosemite，基本完美

    我的主板是 技嘉 z97 d3h,共享一下我制作好的  Ozmosis

  3. python在windows通过安装模块错误

    我的环境是win7+vs2013+python3.2,他们是32地点 windows通过安装模块错误 1)Unable to find vcvarsall.bat : 打开"<pyth ...

  4. Android 通过应用程序来设置系统的日期和时间中的

    Android 通过应用程序来设置系统的日期和时间中的 android 2.3 android 4.0 测试可行,刚需ROOT权限. import java.io.DataOutputStream; ...

  5. SQL入门学习4-复杂查询

    5-1 视图 视图和表 视图和表的区别只有一个是否保存了实际的数据 使用INSERT和SELECT实际上就是从存储设备中读取数据,各种计算后,将数据呈现给用户. 视图不会将数据保存在存储设备中.实际上 ...

  6. Oracle cloud control 12c 的启动与关闭

    Oracle cloud control 12c整个安装比較复杂,光是安装路径的选择,登录password,端口号等众多个配置不免让人眼花缭乱,目不暇接.本文描写叙述的是安装完成后怎样获取安装时设定的 ...

  7. 键盘enter事件时间页面绑定

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. linux安装QQ

    下载链接:WineQQ2013SP6-20140102-Longene 下面步骤一定要依照顺序来,我用的系统是 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

  9. Redis源代码-数据结构Adlist双端列表

    Redis的Adlist实现了数据结构中的双端链表,整个结构例如以下: 链表节点定义: typedef struct listNode { struct listNode *prev; struct ...

  10. Codeforces 448 D. Multiplication Table

    二分法判断答案 D. Multiplication Table time limit per test 1 second memory limit per test 256 megabytes inp ...