通过百度地图获取公交线路的站点坐标的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 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
Dojo 学习要点
Sep 03 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
疯狂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连接mssql:pdo odbc sql server
2011/07/20 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
图片之间的切换
2006/06/26 Javascript
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
Python实现一个简单的验证码程序
2017/11/03 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
详解用python写一个抽奖程序
2019/05/10 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
Python和Sublime整合过程图示
2019/12/25 Python
python 实现list或string按指定分段
2019/12/25 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
python实现ftp文件传输功能
2020/03/20 Python
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
怎么写自荐书范文
2014/02/12 职场文书
主题教育活动总结
2014/05/05 职场文书
民事辩护词范文
2015/05/21 职场文书