原文:【百度地图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. MonkenRunner通过HierarchyViewer定位控制的方法和建议(Appium/UIAutomator/Robotium侣)

    1. 背景 正在使用MonkeyRunner当我们经常使用Chimchat下面HierarchyViewer模块获得目标控制的一些信息,以协助我们测试.但在MonkeyRunner官方的说法是没有看到 ...

  2. Android开发被添加到桌面快捷方式

    Android开发被添加到桌面快捷方式 对于一个希望拥有很多其它用户的应用来说.用户桌面能够说是全部软件的必争之地,假设用户在手机桌面上建立了该软件的快捷方式.用户将会更频繁地使用该软件. 因此,全部 ...

  3. 谈论json - json经常使用的功能

    json经常使用的功能有JSON.parse().JSON.stringify(),供json对象和字符串之间的相互转换. 1.JSON.parse() 将 JavaScript 对象符号 (JSON ...

  4. HDU 3126 Nova [2009 Asia Wuhan Regional Contest Online]

    标题效果 有着n巫妖.m精灵.k木.他们都有自己的位置坐标表示.冷却时间,树有覆盖范围. 假设某个巫妖攻击精灵的路线(他俩之间的连线)经过树的覆盖范围,表示精灵被树挡住巫妖攻击不到.求巫妖杀死所有精灵 ...

  5. iOS 中国排序

    这里分享一个中国某种方便的方法,我们放在一起的人脉资源后,方便的类别,使用自己的包, 此处所使用的方法贴,源代码可以在本文的结尾下载. 要记得加头文件 #import "NSArray+So ...

  6. 【Espruino】NO.03 从点灯开始

    http://blog.csdn.net/qwert1213131/article/details/26819773 本文属于个人理解,能力有限,纰漏在所难免,还望指正! [小鱼有点电] 点灯程序应该 ...

  7. JDK自带的监控分析工具JConsole

    非常多开发人员认为自己懂Java编程.事实是大多数开发人员都仅仅领会到了Java平台的皮毛.所学也仅仅够应付工作. 作者将深度挖掘Java平台的核心功能.揭示一些鲜为人知的事实.帮助您解决最棘手的编程 ...

  8. 设计模式 Template Method模式 显示程序猿的一天

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/26276093 不断设计模式~ Template Method模式 老套路,看高清 ...

  9. 第一次QQ群视频教育有感

    标题:第一次QQ群视频教育有感 作者:丁又专, 时间:2014.08.16     教育的目的:启示学生心智,发现个人优势,激发探索欲望.     今天早上看到 中国大学MOOC<文献管理与信息 ...

  10. ASP.NET Identity

    使用ASP.NET Identity实现基于声明的授权 阅读目录 走进声明的世界 创建并使用声明 基于声明的授权 使用第三方来身份验证 小节 在这篇文章中,我将继续ASP.NET Identity 之 ...