通过百度地图获取公交线路的站点坐标的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 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
jquery.ui.draggable中文文档
Nov 24 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
vue-router路由懒加载及实现的3种方式
Feb 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 is_writable判断文件是否可写实例代码
2016/10/13 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
介绍Python中的fabs()方法的使用
2015/05/14 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
Python远程linux执行命令实现
2020/11/11 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
自我评价范文
2013/12/22 职场文书
八项规定整改方案
2014/02/21 职场文书
行政部岗位职责范本
2014/03/13 职场文书
银行求职信怎么写
2014/05/26 职场文书
企业文化标语大全
2014/06/10 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
英语教学课后反思
2016/02/15 职场文书
导游词之清晏园
2019/11/22 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis