通过百度地图获取公交线路的站点坐标的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 相关文章推荐
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
vue实现简单数据双向绑定
Apr 28 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
php中使用临时表查询数据的一个例子
2013/02/03 PHP
php header功能的使用
2013/10/28 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
python opencv之分水岭算法示例
2018/02/24 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
毕业生个人的求职信范文
2013/12/03 职场文书
家具厂厂长岗位职责
2014/01/01 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
团组织关系介绍信
2014/01/12 职场文书
搞笑获奖感言
2014/01/30 职场文书
红色故事演讲稿
2014/05/22 职场文书
政府法律服务方案
2014/06/14 职场文书
数学教育专业求职信
2014/07/22 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
2016年十一促销广告语
2016/01/28 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis