原文:【百度地图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. sql取整函数

    SQL取整运算2009年04一个月02日本 星期四 10:01有使用说明这种方法记录,就在今天,那么当仍然被遗忘.事实上通常用四舍五入的操作有几种情况,一个是简单的四舍五入,无论是小数点后面的是什么都 ...

  2. iOS_17_控制开关_TabBarController_由storyboard道路

    最后效果图: main.storyboard BeyondViewController.m中有一句关键代码,设置tabbarItem图片的样式(30*30) // // BeyondViewContr ...

  3. http协议和web本质（转）

    当你在浏览器地址栏敲入“http://www.cnblogs.com/”,然后猛按回车,呈现在你面前的,将是博客园的首页了(这真是废话,你会认为这是理所当然的).作为一个开发者,尤其是web开发人员, ...

  4. POJ3061 Subsequence(二进制前缀和法律+仿真足)

    二分法+前缀和法律 满足子序列长度的条件(0,n)之间,sum[x+i]-sum[i]从i元素开始序列长度x和.前缀和可在O(n)的时间内统计 sum[i]的值.再用二分找出满足条件的最小的子序列长度 ...

  5. Java爬虫，信息抓取的实现（转）

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/23272657 今天公司有个需求,需要做一些指定网站查询后的数据的抓取,于是花了点 ...

  6. 它们的定义dialog

    (1)你需要准备自己的自定义对话框样式,是一个布局文件 <?xml version="1.0" encoding="utf-8"? > <Li ...

  7. div+js 弹出层

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  8. 关于.NET，.NET Framework 和ASP.NET的总结

    .NET 1.1.        .NET是 Microsoft XML Web services 平台和技术. 1.2.        一个.NET应用是一个运行于.NET Framework之上的 ...

  9. velocity基本语法

    一.基本语法 1."#"用于识别Velocity该脚本语句,这包括#set.#if .#else.#end.#foreach.#end.#iinclude.#parse.#macr ...

  10. SQL开发中容易忽视的一些小地方( 三)

    原文:SQL开发中容易忽视的一些小地方( 三) 目的:这篇文章我想说说我在工作中关于in和union all 的用法. 索引定义 : 微软的SQL SERVER提供了两种索引:聚集索引(cluster ...