通过百度地图获取公交线路的站点坐标的js代码


Posted in Javascript onMay 11, 2012

最近做百度地图的模拟数据,需要获取某条公交线路沿途站点的坐标信息,貌似百度没有现成的API,因此做了一个模拟页面,工具而已,IE6/7/8不支持

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>获取公交站点坐标</title> 
<style type="text/css"> 
html,body{ height: 100%;} 
#results,#coordinate{ display: inline-block; width: 45%; min-height: 200px; border:1px solid #e4e4e4; vertical-align: top;} 
</style> 
<script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"></script> 
</head> 
<body> 
<p><label for="busId">公交线路:</label><input type="text" value="521" id="busId" /><input type="button" id="btn-search" value="查询" /></p> 
<div id="results"></div> 
<div id="coordinate"></div> 
<script type="text/javascript"> 
(function(){ 
var tempVar; 
var busline = new BMap.BusLineSearch('武汉',{ 
renderOptions:{panel:"results"}, 
onGetBusListComplete: function(result){ 
if(result) { 
tempVar = result;//此时的结果并不包含坐标信息,所以getCoordinate函数不能在此调用。通过跟踪变量,坐标是在onGetBusListComplete之后才被百度的包添加进来的 
busline.getBusLine(result.getBusListItem(0)); 
} 
}, 
// api文档中一共有四个回调,除了onGetBusListComplete和onBusLineHtmlSet之外,还有onBusListHtmlSet和onGetBusLineComplete, 
// 经过测试只有在onBusLineHtmlSet这一步(线路格式化完毕)的时候,才会将坐标添加到tempVar中 
// 所以上面busline.getBusLine(result.getBusListItem(0));是必须的,不然没有办法获得坐标列表 
onBusLineHtmlSet : function(){ 
try{ 
getCoordinate(tempVar); 
}catch(e){ 
} 
} 
}); 
function getCoordinate(result){ 
var coordinate = document.getElementById("coordinate"); 
var stations = result['0']._stations; 
var html = []; 
stations.forEach(function(item){ 
html.push('<li>' + item.name + ' ' + item.position.lng + ' ' + item.position.lat + '</li>'); 
}); 
coordinate.innerHTML = '<ul>' + html.join('') + '</ul>'; 
} 
document.getElementById('btn-search').onclick = function(){ 
busline.getBusList(document.getElementById("busId").value); 
} 
})(); 
</script> 
</body> 
</html>

获取反向线路的话就把var stations = result['0']._stations;改为var stations = result[xx]._stations;整理了一下:
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>获取公交站点坐标</title> 
<style type="text/css"> 
html,body{ height: 100%;} 
#results,#coordinate{ display: inline-block; width: 45%; min-height: 200px; border:1px solid #e4e4e4; vertical-align: top;} 
</style> 
<script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"></script> 
</head> 
<body> 
<p><label for="busId">公交线路:</label><input type="text" value="581" id="busId" /><input type="button" id="btn-search" value="查询" /></p> 
<div id="results"></div> 
<div id="coordinate"></div> 
<script type="text/javascript"> 
var global = {}; 
global.tempVar = {}; 
global.index = 0; 
global.lineNo = 0; 
var busline = new BMap.BusLineSearch('武汉',{ 
renderOptions:{panel:"results"}, 
onGetBusListComplete: function(result){ 
if(result) { 
global.tempVar = result; 
} 
}, 
onBusLineHtmlSet : function(){ 
try{ 
getCoordinate(global.tempVar); 
}catch(e){ 
} 
} 
}); 
function $$(id){ 
return document.getElementById(id); 
} 
function getCoordinate(result){ 
var coordinate = $$("coordinate"); 
var stations = result[global.index]._stations; 
var html = []; 
stations.forEach(function(item,index){ 
html.push('<li>' + global.lineNo + '#' + global.index + '#' + index + '#' + item.name + '#' + item.position.lng + '#' + item.position.lat + '</li>'); 
}); 
coordinate.innerHTML = '<ul>' + html.join('') + '</ul>'; 
} 
$$('btn-search').onclick = function(){ 
global.lineNo = $$("busId").value; 
busline.getBusList(global.lineNo); 
} 
$$('results').addEventListener('click',function(event){ 
var target = event.target; 
if('a' == target.tagName.toLowerCase() && 'dt' == target.parentNode.tagName.toLowerCase()){ 
event.preventDefault(); 
var tempHtml = target.parentNode.innerHTML; 
var indexOfValue = tempHtml.indexOf('_selectBusListItem('); 
global.index = - ( - tempHtml.substring(indexOfValue + '_selectBusListItem('.length,indexOfValue + '_selectBusListItem('.length + 1) ); 
busline.getBusLine(global.tempVar.getBusListItem(global.index)); 
} 
},false); 
</script> 
</body> 
</html>

来自小西山子
Javascript 相关文章推荐
js 数组克隆方法 小结
Mar 20 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
微信小程序实现购物车小功能
Dec 30 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
疯狂Jquery第一天(Jquery学习笔记)
May 11 #Javascript
jQuery 过滤not()与filter()实例代码
May 10 #Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 #Javascript
javascript 在firebug调试时用console.log的方法
May 10 #Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 #Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 #Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 #Javascript
You might like
Terran建筑一览
2020/03/14 星际争霸
常用的php对象类型判断
2008/08/27 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
毕业生个人求职的自我评价
2013/10/28 职场文书
《悯农》教学反思
2014/04/28 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers