通过百度地图获取公交线路的站点坐标的js代码
通过百度地图获取公交线路的站点坐标的js代码
发布时间:2016-12-30 来源:查字典编辑
摘要:最近做百度地图的模拟数据,需要获取某条公交线路沿途站点的坐标信息,貌似百度没有现成的API,因此做了一个模拟页面,工具而已,IE6/7/8不...

最近做百度地图的模拟数据,需要获取某条公交线路沿途站点的坐标信息,貌似百度没有现成的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教程学习
编程开发子分类