【百度地图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 >
目录
相关文章
|
7天前
|
安全 API 持续交付
要利用阿里云控制API查询您的阿里云资源
【2月更文挑战第33天】要利用阿里云控制API查询您的阿里云资源
36 3
|
7天前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
136 0
|
7天前
|
存储 缓存 安全
API在Visual Basic中的应用:连接外部服务与扩展功能
【4月更文挑战第27天】本文探讨了在Visual Basic中使用API连接外部服务和扩展功能的方法,涵盖了API的基本概念、种类及如何使用本地和Web API。通过DllImport调用本地API,利用HttpClient和WebClient与Web API交互,同时强调了第三方API的使用和SOA架构中的API角色。安全性、性能优化和错误处理是实践中的关键点。案例研究和最佳实践有助于开发者更有效地利用API,提升Visual Basic应用程序的功能和灵活性。随着API技术的发展,Visual Basic将持续支持开发者创造更强大的应用。
|
5天前
|
定位技术 API
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
|
7天前
|
存储 缓存 运维
DataWorks操作报错合集之DataWorks根据api,调用查询文件列表接口报错如何解决
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
27 1
|
7天前
|
SQL 数据管理 API
数据管理DMS产品使用合集之阿里云DMS提供API接口来进行数据导出功能吗
阿里云数据管理DMS提供了全面的数据管理、数据库运维、数据安全、数据迁移与同步等功能,助力企业高效、安全地进行数据库管理和运维工作。以下是DMS产品使用合集的详细介绍。
|
7天前
|
缓存 前端开发 JavaScript
【专栏】GraphQL,Facebook 开发的API查询语言,正在前端开发中崭露头角
【4月更文挑战第27天】GraphQL,Facebook 开发的API查询语言,正在前端开发中崭露头角。它提供强类型系统、灵活查询和实时更新,改善数据获取效率和开发体验。掌握GraphQL涉及学习基础概念、搭建开发环境和实践应用。结合前端框架,利用缓存和批量请求优化性能,与后端协作设计高效API。尽管有挑战,但GraphQL为前端开发开辟新道路,引领未来趋势。一起探索GraphQL,解锁前端无限可能!
|
7天前
|
API 数据库
工作流JBPM操作API启动实例&查询任务
工作流JBPM操作API启动实例&查询任务
16 0
|
7天前
|
JavaScript API
Vue3 API函数及功能
Vue3 API函数及功能
8 0
|
7天前
|
机器学习/深度学习 前端开发 API
实现以图搜货功能,淘宝API开发实战分享
实现以图搜货功能,淘宝API开发实战分享
33 0