js code to obtain the site coordinates of bus lines through Baidu Map

Home

Web Front-end

JS Tutorial

js code to obtain the site coordinates of bus lines through Baidu Map_javascript skills

May 16, 2016 pm 05:53 PM

bus routes Baidu map

Recently, I was doing simulation data for Baidu Maps. I needed to obtain the coordinate information of the stations along a certain bus line. It seems that Baidu does not have a ready-made API, so I made a simulation page. It is just a tool. IE6/7/8 does not support it

Copy code The code is as follows:

 
<!DOCTYPE html> 
<html> 
< head> 
<meta charset="utf-8" /> 
<title>Get bus stop coordinates</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">Bus line:</label><input type="text" value ="521" id="busId" /><input type="button" id="btn-search" value="query" /></p> 
<div id="results "></div> 
<div id="coordinate"></div> 
<script type="text/javascript"> 
(function(){ 
var tempVar; 
var busline = new BMap.BusLineSearch('Wuhan',{ 
renderOptions:{panel:"results"}, 
onGetBusListComplete: function(result){ 
if(result ) { 
tempVar = result;//The result at this time does not contain coordinate information, so the getCoordinate function cannot be called here. By tracking variables, the coordinates were added by Baidu's package after onGetBusListComplete 
busline.getBusLine(result.getBusListItem(0)); 
} 
}, 
// There are a total in the api document There are four callbacks. In addition to onGetBusListComplete and onBusLineHtmlSet, there are also onBusListHtmlSet and onGetBusLineComplete. 
// After testing, the coordinates will be added to tempVar only in the onBusLineHtmlSet step (the line formatting is completed) 
 // So the above busline.getBusLine(result.getBusListItem(0)); is necessary, otherwise there is no way to get the coordinate list 
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> 

If you want to get the reverse line, put var stations = result['0']._stations; changed to var stations = result[xx]._stations; tidied up:

Copy code The code is as follows:

 
<!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> 

来自小西山子

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn