原文:【百度地图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. HDU 3126 Nova [2009 Asia Wuhan Regional Contest Online]

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

  2. DataTable填补了实体类返回泛型集合

    坤哥见我昨天找了一段代码,如下面: 略微解释下,这段代码时D层查询结束后,将datatable查询到的结果赋值给实体对象的属性,然后返回实体的过程.坤哥看了之后问我,假设实体有500多个属性,难道也要 ...

  3. think in coding

    ,想想除了技术还有什么? 你假设形而下的去纠结技术.仅仅会变成技术的傀儡.他们仅仅是一种表达的方式? 希望你能够形而上的去看待技术,技术千变万化,但都是为了解决这个问题的方式. 请问问自己,自己问题是 ...

  4. HDU 1710-Binary Tree Traversals（二进制重建）

    Binary Tree Traversals Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  5. plsql dev中Dynamic Performance Tables not accessible分析解决(转)

    使用plsql dev的朋友多遇到过类此如下面的提示: Dynamic Performance Tables not accessible, Automatic Statistics Disabled ...

  6. SQLServer 2008 技术内幕——T-SQL 查询 笔记

    原文:SQLServer 2008 技术内幕--T-SQL 查询 笔记 1.SQL编程有许多独特之处,如:面向集合的思维方式.查询元素的逻辑处理顺序.三值逻辑.如果不掌握这些知识就开始用SQL编程,得 ...

  7. CGI原理解析系列之中的一个----CGI怎样获取WEBserver数据

    //gcc get_post.c -o get_post.ums; #include <stdio.h> #include <stdlib.h> #include <un ...

  8. Java单链逆转

    本文介绍两种方法单向链表反转.记录,如下面: 1. package com.leetcode; public class ListReverse { public static void main(S ...

  9. Benchmark与Profiler---性能调优得力助手

    转载请注明出处:http://blog.csdn.net/gaoyanjie55/article/details/34981077 性能优化.它是一种诊断性能瓶颈,能问题点进行优化的过程.前两天听完s ...

  10. poj 1004 Dividing

    大意是,从输入六个数 .第i个数代表价值为i的有几个,平均分给两个人 ,明摆着的背包问题,本来以为把他转化为01背包.可是TLe,后来发现是12万的平方还多,所以妥妥的TLE,后来发现这是一个全然背包 ...