通過百度地圖獲取公交站點的程式碼例項

antzone發表於2017-03-17
地圖

很多網站都通過使用百度介面來獲取一些資訊，例如公交站點資訊，這樣可以增強網站的功能，提高人性化程度，當然更吸引使用者，下面就是一段相關的程式碼例項，希望能夠給需要的朋友帶來一定的幫助。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章