通过百度地图获取公交线路的站点坐标的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 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
一些实用性较高的js方法
Apr 19 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 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
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP培训要多少钱
2017/06/06 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
永不消失的title提示代码
2007/02/15 Javascript
一个用js实现的页内搜索代码
2007/05/23 Javascript
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
Cookie 注入是怎样产生的
2009/04/08 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
人力资源管理专业学生自我评价
2013/11/20 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
文明礼仪主题班会
2015/08/13 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python