【百度地图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-10-15 12:57:19

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

数据视化Echarts+百度地图API实现市县区级下钻

开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是很详细,对于刚接触Echarts的让人来说可能有些搞不明白,在这里我把Echarts下钻开发过程中总结的知识分享给大家,也能使自己加深印象,当然啦,对于一些在软件行业折腾了几年的老油条来说,这些都是一些非常基础的东西.但是还是希望能帮助到那些刚接触Echarts遇到类似问题需要帮助的人.如果哪里写的

百度地图API

本文我将从如何使用地图API(本文以百度为例,谷歌类似)开始,往后的扩展行的内容详见后续文章.1.打开链接http://developer.baidu.com/map/jshome.htm  这里有很多DEMO,或者你直接百度搜索“百度地图API”,第一个就是.进入后有很多方向供你选择,由于现在开源的地图API都是JS脚本写的,所以我上面的链接就只针对JAVASCRIPT进行介绍.  即使是编程菜鸟(像我这种),也知道当你在任何一个开发环境下写代码时,都需要加入头文件,例如,你要在C++里使用c

swift百度地图api

swift使用百度地图api遇到的坑 之前在Android上用过百度地图,以为大概类似,也没仔细看文档,结果被自己坑了 注意事项,http://developer.baidu.com/map/index.php?title=iossdk/guide/attention 1.无法定位NSLocationWhenInUseUsageDescription没有加 2.链接错误看注意事项1 3.BMKMapManager start failed 在info.plist里添加Bundle display

百度地图API新手入门

最近,共享单车着实火了一把,市场竞争也是异常的激烈,百花争艳,百家争鸣,群雄逐鹿,最后鹿死谁手,现在还不得而知,不过可以肯定的是细节决定成败,更重要的还在于用户的体验. 用过的同学们都会知道,打开共享单车APP软件,即可看到以地图的形式展示车辆的分布情况以及离自己最近的车辆,这样就可以很方便很快速的找到车了,那么,这样的技术是如何实现的呢?之前也发过两篇关于百度地图API的文章,有网友评论说效果很好,我也说要持续更新的,结果呢,工作太忙,就把这事搁下了,今天呢,我们还是一起来重温一下百度地图的初

用百度地图API分析打交通大数据

百度地图API, 文档不全,例子不细致. 在网上还没有太多有用的例子.比如说下面几个需求的解决方案就找不到: 1. 如何用百度地图API查询一个地点的经纬度. 2. 如何用百度地图通过一个经纬度查询商圈和地址. 3.点击百度地图时, 获得点击位置的经纬度. 4. 如果按照时间轴动态显示热力图的变化. 我昨天玩了一下午百度地图javascript API,解决了上面的几个问题,顺道用少量打车用户的抽样数据做一个数据可视化, 给大家提供一个可以参考的例子 首先数据是来自北京市某个周日的出行数据, 其

百度地图API 与 jquery 同时使用时报 TypeError $(...) is null错误 失效的原因及解决办法

在引用百度地图API后,发现jquery 根据id 找不到 form.但是对于别的控件没有问题. 在排除了 html加载的问题后. 上网查找 发现以下解决办法: 原因应该是有冲突的插件. 解决办法将 $符号改为jQuery 引用: http://www.phpernote.com/jquery/851.html 最近在工作中发现个问题,原本好好的网页,写了一些自己的jquery代码之后,竟然总是不起作用,无论写的多么简单,都不起作用,似乎 jquery失效了一般,在火狐下调试看了下,页面报Typ

深入浅出百度地图API开发系列(1):前言

百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能给想使用百度地图API的开发者带来一点帮助的话,那就太好了,也希望大家能够互相交流,共同学习. 写在前面的话:如果各位真的想深入了解地图的JSAPI,首先一些基础的GIS概念必不可少,GIS就是地理信息系统,可能很多程序猿没听过,简单地说,GIS就是通过计算机软件技术将地理信息进行可视化管理,地图就

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

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

百度地图API开发应用

           百度地图API开发应用房地产销售分析管理系统   上海为卓信息科技有限公司--专业gis地图开发项目服务   系统概述 俗话说,安居才能乐业.随着社会的发展,人们生活质量水平的普遍提高,过去那种只要有个地方能住就行的观念已经在潜移默化中慢慢开始转变.房屋面积大不大,小区环境好不好,买东西方不方便,这些都已经成为消费者筛选住房好坏的标准了.但是作为普通购房者,不可能每个小区.每间房屋都去查看.面对那么多有购房需求的消费者,房地产销售公司怎么才能吸引他们来购买自己产品呢? 需求