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

简介: 原文:【百度地图API】小学生找哥哥——小学生没钱打车,所以此为公交查询功能任务描述:   有位在魏公村附近上小学的小朋友,要去北京邮电大学找哥哥。他身上钱很少,只够坐公交的。所以,百度地图API快帮帮他吧! 如何实现:   把地图中心定在魏公村,在视野范围内搜索小学。
原文: 【百度地图API】小学生找哥哥——小学生没钱打车,所以此为公交查询功能

任务描述:

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

如何实现:

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

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

图示:

img_31bd55dd639c1ed16005512969db94ae.png

运行代码,点击这里

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

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

// 公交线路查询
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 >
目录
相关文章
|
30天前
|
安全 API 持续交付
要利用阿里云控制API查询您的阿里云资源
【2月更文挑战第33天】要利用阿里云控制API查询您的阿里云资源
19 3
|
1月前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
100 0
|
25天前
|
机器学习/深度学习 前端开发 API
实现以图搜货功能,淘宝API开发实战分享
实现以图搜货功能,淘宝API开发实战分享
24 0
|
1月前
|
人工智能 编解码 数据安全/隐私保护
才发现百度自带的AI图片助手这么好用,去水印、画质优化、AI扩图、涂抹消除等功能一应俱全!
才发现百度自带的AI图片助手这么好用,去水印、画质优化、AI扩图、涂抹消除等功能一应俱全!
174 0
|
1月前
|
自然语言处理 API 语音技术
Python加百度语音API实现文字转语音功能
Python加百度语音API实现文字转语音功能
52 0
|
2月前
|
数据挖掘 API 数据处理
获取商品详情信息API接口:1688开放平台功能解析
首先,要获取商品详情信息,开发者需要向1688开放平台申请相应的权限,并遵循其调用规则。在调用商品详情信息API接口时,需要传入相应的请求参数,如商品ID、调用时间戳、密钥等。这些参数对于确保接口的正常运行至关重要。
|
2月前
|
文字识别 安全 API
阿里云文字识别OCR的发票凭证识别功能可以通过API接口的形式进行调用
【2月更文挑战第5天】阿里云文字识别OCR的发票凭证识别功能可以通过API接口的形式进行调用
84 5
|
2月前
|
缓存 应用服务中间件 Linux
如何使用OpenResty实现API网关功能
如何使用OpenResty实现API网关功能
77 0
|
14天前
|
缓存 前端开发 API
API接口封装系列
API(Application Programming Interface)接口封装是将系统内部的功能封装成可复用的程序接口并向外部提供,以便其他系统调用和使用这些功能,通过这种方式实现系统之间的通信和协作。下面将介绍API接口封装的一些关键步骤和注意事项。
|
21天前
|
监控 前端开发 JavaScript
实战篇:商品API接口在跨平台销售中的有效运用与案例解析
随着电子商务的蓬勃发展,企业为了扩大市场覆盖面,经常需要在多个在线平台上展示和销售产品。然而,手工管理多个平台的库存、价格、商品描述等信息既耗时又容易出错。商品API接口在这一背景下显得尤为重要,它能够帮助企业在不同的销售平台之间实现商品信息的高效同步和管理。本文将通过具体的淘宝API接口使用案例,展示如何在跨平台销售中有效利用商品API接口,以及如何通过代码实现数据的统一管理。