【百度地图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 >
目录
打赏
0
0
0
0
216
分享
相关文章
Apipost vs Apifox:高效API协作的差异化功能解析
作为企业级API架构师,深度体验APIPost与Apifox后发现几大亮点功能。目录级参数配置避免全局污染;WebSocket消息分组提升长连接管理效率;Socket.IO支持解决特定协议需求;接口锁定保障团队协作安全。大型团队适合APIPost的细粒度管控,复杂物联网项目需WebSocket分组,维护遗留系统离不开Socket.IO支持,初创团队可按需灵活选择。这些特性显著优化开发协作质量。
如何在API中实现搜索和过滤功能
本文介绍了如何为API添加搜索和过滤功能,使其更强大灵活。通过Flask示例,展示了按书名搜索、按作者或年份过滤书籍的方法,并结合两者实现复合查询。同时,提供了搜索不区分大小写、支持多过滤器组合、分页和输入验证等最佳实践。最后推荐了Apipost工具,它能简化API调试、负载测试及文档生成,提升开发效率。这些功能帮助用户更好地控制数据,优化API使用体验。
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
本方案基于DeepSeek API增强版,提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript,用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式(如PDF、TXT、DOCX),具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程,适合快速构建高效Web应用。开发者可根据需求扩展功能,满足多样化场景要求。
天猫商品详情 API 接口:功能、调用与实战攻略
天猫商品详情API为电商从业者、开发者和数据分析人员提供高效的商品数据获取途径。通过商品ID,该接口可返回包括基本信息、价格、库存及图片等详细内容,具有高准确性、易集成和功能丰富的特点。示例代码展示了如何用Python调用此API,生成签名确保请求安全,助力用户优化定价策略、开发应用或分析市场趋势。
43 10
一文读懂天猫商品详情 API 接口:功能、调用与实战攻略
天猫商品详情API为电商从业者、开发者和数据分析人员提供高效的商品数据获取途径。通过输入商品ID,可获取商品基本信息(名称、品牌等)、价格信息(售价、促销价等)、库存状态、商品描述及图片链接等详细内容。本文还提供了Python调用示例,包含签名生成、参数构建与请求发送等功能,帮助用户快速集成API,满足定价优化、市场分析等需求。使用时需替换示例中的AppKey与商品ID,并遵守平台规范。
91 16
深入研究:淘宝天猫商品详情查询API详解
淘宝开放平台提供一系列API接口,帮助开发者获取淘宝商品的详细信息并集成到自有应用中。主要功能包括:获取单个商品详情(item_get)、评论信息(item_review)、快递费用(item_fee)、等。此外,还支持搜索商品(item_search)、按图搜索(item_search_img)、优惠券查询(item_search_coupon)、类目信息(item_cat_get)等功能。返回数据通常为JSON格式,包含商品标题、价格、库存、主图链接等基本信息,以及HTML格式的详细描述内容,方便开发者解析与展示。
一文读懂:京东、淘宝、拼多多 API 接口,功能大不同,场景各有招
本文深入解析京东、淘宝、拼多多三大电商巨头的API接口特点与差异。京东API以商品管理、订单处理和物流跟踪见长,适合电商平台及零售商;淘宝API功能丰富,涵盖商品查询、订单管理与用户认证,适用多场景电商业务;拼多多API聚焦社交电商,提供拼团、砍价等特色玩法,助力商家提升曝光与销量。开发者和商家需根据自身需求选择合适的API接口,并关注其安全性与稳定性。随着技术进步,这些API将持续优化,推动电商行业蓬勃发展。
鸿蒙相机开发实战:从设备适配到性能调优 —— 我的 ArkTS 录像功能落地手记(API 15)
本文分享鸿蒙相机开发经验,从环境准备到核心逻辑实现,涵盖权限声明、模块导入、Surface关联与分辨率匹配,再到录制控制及设备适配法则。通过实战案例解析,如旋转补偿、动态帧率调节和编解码优化,帮助开发者掌握功能实现、设备适配与体验设计三大要点,减少开发坑点。适合鸿蒙新手及希望深化硬件交互能力的工程师参考收藏。
102 2
通过API接口实现1688图片搜索商品功能全攻略
本文详细介绍如何通过API接口实现1688图片搜索商品功能,并对接至自有系统。核心流程包括:用户上传图片后,利用百度AI图像识别API提取特征并生成关键词,再调用1688开放平台的商品搜索接口获取结果。技术方案采用Python开发,涵盖前端交互设计与后端集成要点,如接口服务化、缓存机制及异常处理。此外,文章还提供了性能优化建议和数据解析示例,适用于电商平台及多种扩展场景。
鸿蒙 Next 对接 AI API 实现文字对话功能指南
本指南介绍如何在鸿蒙 Next 系统中对接 AI API,实现文字对话功能。首先通过 DevEco Studio 创建项目并配置网络权限,选择合适的 AI 服务(如华为云或百度文心一言)。接着,使用 Node.js 转发请求,完成客户端与服务器端代码编写。最后进行功能测试与优化,确保多轮对话顺畅、性能稳定。此过程需严格遵循开发规范,充分利用系统资源,为用户提供智能化交互体验。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等