【百度地图API】小学生找哥哥——小学生没钱打车,所以此为公交查询功能

原文:【百度地图API】小学生找哥哥——小学生没钱打车,所以此为公交查询功能

任务描述:

  有位在魏公村附近上小学的小朋友,要去北京邮电大学找哥哥。他身上钱很少,只够坐公交的。所以,百度地图API快帮帮他吧!

如何实现:

  把地图中心定在魏公村,在视野范围内搜索小学。

  搜索完毕后,点击出现的红色标注,在输入框中输入北京邮电大学,然后查询,即可得到公交路线图。

图示:

运行代码,点击这里

点击公交按钮需要做的查询工作。

在这里,请大家一定注意,所有公交查询,只创建一次对象。不然会有很大的内存消耗哦~

//公交线路查询
function tSearch()
{
//请不要在查询的时候创建公交对象

if(curTitle.length>0)
{
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), 16);
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>

时间: 2024-09-14 07:10:40

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

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

原文:[百度地图API]如何制作"从这里出发""到这里去"--公交篇 摘要: 百度地图首页上的"从这里出发""到这里去",一直是开发者们很热衷的一个功能.那么,怎样结合百度的数据库,来制作这个功能呢?让我们一起来学习一下. -------------------------------------------------------------------------------------------------------

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

           首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/details/9617177).         那么接下来就是一些关联性的操作.首先我建议把web的文件放到vs中来进行修改(文件本身以及用到的资源都要存到bin/debug中).如图,这样统一操作更容易实现. 几个关键的问题在这要提一下: 问题一:webbrowser和f

【百度地图API】建立全国银行位置查询系统(三)——如何在地图上添加银行标注

原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo,酒店logo等) 如何在标注上显示信息窗口,以及添加文字标签等其他覆盖物: 最后,介绍一个获取坐标的给力工具. ---------------------------------------------------------------------------------------------------

substring-调用 百度地图api的 时候 放大地图 点击一个景点的时候 IE报:

问题描述 调用 百度地图api的 时候 放大地图 点击一个景点的时候 IE报: 调用 百度地图api的 时候 放大地图 点击一个景点的时候 IE报:无法获取未定义null引用的属性 "substring " 谷歌报:Cannot read property 'substring' of undefined点确定却又正常了 我试了 网上说的把调用百度地图的 代码放到div容器里 结果是一样的 怎么解决? 解决方案 具体错误发生的行是什么这个错误导致的原因是因为你的字符串变量为空,或者被设

【百度地图API】如何制作商圈地图?行政地图?

原文:[百度地图API]如何制作商圈地图?行政地图? 摘要: 想要显示某一个区域,并且鼠标放上去,该区域就会变色.这时,你就需要巧用多边形覆盖物,和它的鼠标事件了! 快来看看去哪儿网的实例吧:http://hotel.qunar.com/city/beijing_city/#fromDate=2011-07-13&from=qunarHotel&toDate=2011-07-16     ---------------------------------------------------

api-JQuery可以跨域访问,但是回调函数却无法成功,具体目的:百度地图API地址查坐标

问题描述 JQuery可以跨域访问,但是回调函数却无法成功,具体目的:百度地图API地址查坐标 我要用百度地图API的一个功能, 要用的技术是JavaScript, 百度API文档链接是百度地图根据地址查询经纬度 我选取测试的具体API为http://api.map.baidu.com/geocoder/v2/?address=北京市海淀区上地十街10号&output=json&ak=E4805d16520de693a3fe707cdc962045&callback=showLoc

【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍

原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------------------------------------------------------------------------------------------------------- 哇,好久没有上来了.主要是因为最近工作繁忙,加上休息时间被各种排练.社团活动占满,导致木有更新此博客.

【百度地图API】百度API卫星图使用方法和卫星图对比工具

原文:[百度地图API]百度API卫星图使用方法和卫星图对比工具 百度地图API推出卫星图接口也有一个月啦~   本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具.   一.百度地图API卫星图 调用百度卫星图有两种方式,一是地图类型控件,一是地图底图设置.下面分别介绍这两种方法:   1.利用控件 使用控件有一大优势,就是地图类型控件上,有百度全部的地图类型,比如二维.三维.卫星等. 而且,只需要一句话,就能简单加上这个控件. map.addControl(new

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

原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提示信息也当然要不一样嘛,因为给标注绑定的鼠标事件当你移动鼠标上去的其实循环值已经是最后值了,所以无论你怎么做,所有的标注点都是同一个提示,就是最后的那个提示.我就打开百度找方案嘛.一找之下,搜了几十页就一个解决方案,大家都是你拷贝我的我拷贝你的.做个闭包.把循环的值锁定在里面.代码照着做,也的确可以