原文:【百度地图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. 卓尼斯ZT-180点评

    卓尼斯ZT-180点评    ——我们出差,使用10”上网本发布,没有图片.并写冲忙.遗憾的不足之处. 一.购买 1.由于旅游.不想拿那台14"笔记本,台平板电脑.当时,选择的对象有维智A8 ...

  2. javascript的位操作、整数、二进制

    位与(x&y):对操作数进行二进制与的操作,如果两个操作数的某一位两个都为1,将对应的结果位设为1. 0x0007 & 0x0003 = 0x0003 \ 一个小型年老棕色的狗:64 ...

  3. 【007】【JVM——内存分配和恢复策略】

     内存分配与收回策略 JVM的自己主动内存管理要自己主动化地解决两个问题:对象分配内存以及回收分配给对象的内存.回收内存前几篇已经讲了.如今说内存分配.对象的内存分配一般分配在堆内存中,也可能经过 ...

  4. 第一篇——第一文 SQL Server 备份基础

    原文:第一篇--第一文 SQL Server 备份基础 当看这篇文章之前,请先给你的所有重要的库做一次完整数据库备份.下面正式开始备份还原的旅程. 原文出处: http://blog.csdn.net ...

  5. 在Repeater控件中使用if语句

    原文:在Repeater控件中使用if语句 .Afr_ARTICLE_TITLE { font: NORMAL BOLD 14px "Tahoma"; } .Afr_CONTENT ...

  6. JMS ActiveMQ研究文档

    1. 背景 当前,CORBA.DCOM.RMI等RPC中间件技术已广泛应用于各个领域.但是面对规模和复杂度都越来越高的分布式系统,这些技术也显示出其局限性:(1)同步通信:客户发出调用后,必须等待服务 ...

  7. LeetCode: Palindrome Partitioning [131]

    [称号] Given a string s, partition s such that every substring of the partition is a palindrome. Retur ...

  8. poj3624Charm Bracelet

     Charm Bracelet Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23025   Accepted: 103 ...

  9. nsis 固定到任务栏

    nsis 固定到任务栏 win7以上有效 Name "测试" OutFile "test.exe" Section CreateShortCut "$ ...

  10. Repository、IUnitOfWork

    Repository.IUnitOfWork 在领域层和应用服务层之间的代码分布与实现 本来早就准备总结一下关于Repository.IUnitOfWork之间的联系以及在各层中的分布,直到看到田园里 ...