百度api实现公交驾车查询
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>指定起点导航</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<style>
body{font-size:14px;}
h5{line-height:3em;padding:0;margin:0;}
a{color:#EE3399;}
a:hover{color:#99AA66;}
.txt{border:1px solid #ccc;background:none;padding:1px;}
.f-l{float:left;}
.t-c{text-align:center;}
.clear{clear:both;}
.hidden{display:none;}
.searchbox{border:4px solid #e5ecf9;height:40px;float:left;line-height:40px;padding:0 20px;margin:0 0 0 50px;}
.mainbox{margin:20px 0 0;}
.boxmap{width:700px;height:500px;border:1px solid gray;float:left;}
.boxpanel{width:250px;float:left;margin:0 0 0 10px;border:1px solid gray;padding:0 10px 10px;}
#startPanel,#endPanel{border:1px solid #FA8722;font-size:12px;}
#startPanel div,#endPanel div{padding:5px;}
#startPanel p,#endPanel p{margin:0;paddin:0;line-height:1.2em;}
#drivingPanel{border:1px solid #6688EE;}
</style>
</head>
<body>
<div>
<img class="f-l" src="http://map.baidu.com/img/logo-map.gif"/>
<div class="searchbox">
从<input class="txt" type="text" value=""
id="startInput"/>到<input class="txt" type="text"
disabled="disabled" value="天府广场" id="endInput"/>
驾车<input type="radio" name="rdo" checked="checked"
value="0"> 公交<input name="rdo" value="1" type="radio"
>
<input type="button" value="查询" onClick="mDriving()"/>
</div>
</div>
<div class="clear"></div>
<div class="mainbox">
<div class="boxmap" id="container"></div>
<div class="boxpanel hidden" id="box">
<h5>起点选择 <a href="#"
onClick="document.getElementById('startPanel').style.display='block';"&
gt;(展开)</a></h5>
<div id="startPanel"></div>
<div id="drivingPanel"></div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var setindex=0;
var map =new BMap.Map("container"); // 创建Map实例
var point =new BMap.Point(104.072244,30.663279); // 创建点坐标
//var myIcon = new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/img/fox.gif", new BMap.Size(300,157)); ,{icon:myIcon}
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。
map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT,offset: new BMap.Size(10, 10)}));
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.addControl(new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}));
map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天府广场</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='http://imgsrc.baidu.com/baike/abpic/item/d7c9ca3f7aa71af87d1e71cb.jpg' width='139' height='104' title='天府广场'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天府广场，是位于成都市中心城区的一座广场，也是成都市最重要的休闲广场。...</p>" +
"</div>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
function getInfoW(obj){
var startInfowin =new
BMap.InfoWindow("</br>"+obj.title+"</br>"+obj.address+"<p
class='t-c'><input value='选为起点' type='button'
onclick='startDeter();' /></p>");
return startInfowin;
}
function getInfoW_M(obj){
startPoint=obj.point;
map.openInfoWindow(getInfoW(obj),obj.point);
}
var startResults =null;
var startPoint;
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true, panel:'drivingPanel'}});
var driving_trans = new BMap.TransitRoute(map, {renderOptions:{map: map, autoViewport: true, panel:'drivingPanel'}});
var startOption = {
onSearchComplete: function(results){
// 判断状态是否正确
if (startSearch.getStatus() == BMAP_STATUS_SUCCESS){
startResults = results;
var s = [];
map.clearOverlays();
for (var i =0; i < results.getCurrentNumPois(); i ++){
s.push("<div><p><a onmouseover='getInfoW_M(startResults.getPoi("+i+"))' href='#'>");
s.push(results.getPoi(i).title);
s.push("</a></p><p>");
s.push(results.getPoi(i).address);
s.push("</p></div>");
var marker_c=new BMap.Marker(results.getPoi(i).point);
(function(){
var cur=i;
var mak=marker_c;
mak.addEventListener("click",function(){
startPoint=results.getPoi(cur).point;
this.openInfoWindow(getInfoW(results.getPoi(cur))); // 打开信息窗口
});
})();
map.addOverlay(marker_c); // 将标注添加到地图中
}
document.getElementById("startPanel").innerHTML = s.join("");
}else{startResults =null;alert("没有搜索到路线，请确定起点是否有效!");}
}
};
function getInd(){
var value="";
var radio=document.getElementsByName("rdo");
for(var i=0;i<radio.length;i++){
if(radio[i].checked==true){
value=radio[i].value;
break;
}
}
return value;
}
//创建2个搜索实例
var startSearch =new BMap.LocalSearch(map,startOption);
function mDriving(){
setindex= getInd();
var startPlace = document.getElementById("startInput").value;
startSearch.search(startPlace);
document.getElementById("box").style.display="block";
document.getElementById("startPanel").style.display="block";
}
function startDeter(){
map.clearOverlays();
var marker =new BMap.Marker(startPoint);
map.addOverlay(marker);
map.addOverlay(new BMap.Marker(point));
if(setindex==0)
{
driving.search(startPoint,point);
}else{
driving_trans.search(startPoint,point);
}
document.getElementById("startPanel").style.display="none";
}
</script>
