��ٶȵ�ͼAPI��ѡ��յ�ļݳ��_վ��Ѷ_վ��

��¼��ѯ �ؼ�� Alexa�� PR�� IP�� WHOIS��ѯ ��ѯ
�ղ� ��ѯ

��Ϣ��

��ҳ » ��Ѷ��Ϣ

��ٶȵ�ͼAPI��ѡ��յ�ļݳ��

��Ϣ��Դ��С�� ʱ�䣺2011/9/15

ժҪ��

��û��“�ӻ��վ”��ʹ�üݳ��DrivingRoute��Ĭ��ʾһ��ͬһ��п������ͻ�վ��ô���ÿ��ӻ��ķ����û��Լ�ѡ��յ��أ��ǣ�ʹ��ݽӿڡ��ݽӿڣ��ðٶȵ�ͼAPI��ݣ��Զ��ʽչʾ��

��ܷǳ�ʵ�ã�ѧ��ĵ�ͼ��ӽӽ��ٶȵ�ͼ�Ĺ��ܣ��

-----------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------

һ��ͼ��ҳ��ʽ

��һ�ż򵥵ĵ�ͼ��ֻ��Ҫ3�仰��

var map = new BMap.Map("container");            // ����Mapʵ��
var point = new BMap.Point(116.404, 39.915);    // ����������
map.centerAndZoom(point,15);                     // ��ʼ����ͼ,�������ĵ�����͵�ͼ����

��

Ȼ��򣬷ֱ��򣬺��յ��

��<input class="txt" type="text" value="����" id="startInput" />��<input class="txt" type="text" value="��վ" id="endInput" />&nbsp;&nbsp;<input type="button" value="�ݳ�" onclick="mDriving()" />

��

ʹ��“�ݳ�”��ť��ȡ��е��ݡ�

function mDriving(){
    var startPlace = document.getElementById("startInput").value;
    var endPlace = document.getElementById("endInput").value;
}

��

��ʵ��

��յ㣬��Ҫ��2��ͬ��ʵ��

//����2������ʵ��
var startSearch = new BMap.LocalSearch(map,startOption);
var endSearch = new BMap.LocalSearch(map,endOption);

��

�ڵ��“�ݳ�”��ť�󣬿�ʼ��յ㶼��Щ��Ϲؼ��ʵĵط��POI�㣩��

function mDriving(){
    var startPlace = document.getElementById("startInput").value;
    var endPlace = document.getElementById("endInput").value;
    startSearch.search(startPlace);
    endSearch.search(endPlace);
    document.getElementById("box").style.display="block";
}

��

��ݽӿ�

��AJAX��첽��صģ��ʹ�ðٶȵ�ͼAPI�ṩ�Ļص��onSearchComplete��ɶ��ɹ��Ĳ��

��Ϊ��

��ɹ��󣬰�ÿһ��POI��Զ��ķ�ʽ��С��ʵ��ֻʹ��ݽӿڣ�û�ðٶ�Ĭ�ϵĽ��塣

var startOption = {
  onSearchComplete: function(results){
    // �ж�״̬�Ƿ���ȷ
    if (startSearch.getStatus() == BMAP_STATUS_SUCCESS){
      startResults = results;
      var s = [];
      for (var i = 0; i < results.getCurrentNumPois(); i ++){
        s.push("<div><p><a onmou搜刮引擎优化ver='map.openInfoWindow(startInfowin,startResults.getPoi(" + i + ").point);' href='#'>");
        s.push(results.getPoi(i).title);
        s.push("</a></p><p>");
        s.push(results.getPoi(i).address);
        s.push("</p></div>");
      }
      document.getElementById("startPanel").innerHTML = s.join("");
    }else{startResults = null;}
  }
};

��

��û��Ƶ��ı��⴦��ڵ�ͼ�ϴ�һ����Ϣ����“ѡΪ��”�İ�ť��

var startInfowin = new BMap.InfoWindow("<p class='t-c'><input value='ѡΪ���' type='button' onclick='startDeter();' /></p>");

��

�û��“ѡΪ��”�İ�ť��ѡ��õ�Ϊ��㣬��壬��û�ѡ��յ㡣

Ϊ�˷��㿴��λ�ã��Ҫ�ڵ�ͼ�ϴ��ɫ�ı�ע��ң��ٴ�ѡ��ʱ��Ҫ��һ�εı�ע��

function startDeter(){
    map.clearOverlays();
    startPoint = startInfowin.getPosition();
    var marker = new BMap.Marker(startPoint);
    map.addOverlay(marker);
    document.getElementById("startPanel").style.display="none";
}

��

ͬ��յ��塣��Ҫע��ǣ��յ��㲻ͬ��ѡ��յ�֮��Ҫ��һ��ݳ�ʵ��һ��Ƴ��ݳ�·�ߡ�

��Ҫ��һ��жϣ��û��Ƿ��Ѿ�ѡ��㡣��û�У��ʾ�û�Ҫ��ѡ��㡣

function endDeter(){    
    if(startPoint==null){alert("����ѡ����㣡");}
    else{
        endPoint = endInfowin.getPosition();        
        driving.search(startPoint,endPoint);
        document.getElementById("endPanel").style.display="none";
    }
}

��

�ġ��ݳ�ʵ��ͽ��

��ѡ��ȷ��յ��󣬼ݳ��Ľ��ˡ�

һ�仰��ɸ㶨��

var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true,panel:drivingPanel}});

��

�塢ҳ��ʽ��

Ϊ��ҳ��ɾ��ÿ��ǿ��԰Ѳ��Ҫ�Ľ��չʾ��ʱ��Ҫ��ǵ�ʱ��չ��

1��磬�Ȱѵ�ͼ��Ľ��

��ʹ��hidden��ʽ��ұߵ��boxpanel��

.hidden{display:none;}

��

<div class="boxpanel hidden" id="box">
�м�ʡ��
</div>

��

��ѡ��յ�ѡ��壬��ȡʹ��ʱ“չ��”��ѡȡ��ϼ��صİ취��磬

<h5>���ѡ��&nbsp;<a href="#" onclick="document.getElementById('startPanel').style.display='block';">(չ��)</a></h5>

��

2��ϴμݳ��ѯ��

��Ҫ�ٴ�ʹ�üݳ��ѯ��һ��Ҫ��ϴμݳ��ѯ�Ľ��

driving.clearResults();

��

Ҳ��ʹ��clearOverlays,һ��ͼ��еĸ��

map.clearOverlays();

��⣬��һ��֪ʶ��

��ͼ��еı�ǣ��map.clearOverlays();
��ע��map.removeOverlay(marker);
��ʾ��Զ��帲����Լ̳�overlay��hide();��show()��

��ȫ��Դ��룺

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ָ��������յ�ļݳ�����</title>
<script type="text/javascript" src="http://api.map.百度.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.百度.com/img/logo-map.gif" />
    <div class="searchbox">
        ��<input class="txt" type="text" value="����" id="startInput" />��<input class="txt" type="text" value="��վ" id="endInput" />&nbsp;&nbsp;<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>���ѡ��&nbsp;<a href="#" onclick="document.getElementById('startPanel').style.display='block';">(չ��)</a></h5>
        <div id="startPanel"></div>
        <h5>�յ�ѡ��&nbsp;<a href="#" onclick="document.getElementById('endPanel').style.display='block';">(չ��)</a></h5>
        <div id="endPanel"></div>
        <h5>�ݳ�����</h5>
        <div id="drivingPanel"></div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");            // ����Mapʵ��
var point = new BMap.Point(116.404, 39.915);    // ����������
map.centerAndZoom(point,15);                     // ��ʼ����ͼ,�������ĵ�����͵�ͼ����

var startInfowin = new BMap.InfoWindow("<p class='t-c'><input value='ѡΪ���' type='button' onclick='startDeter();' /></p>");
var endInfowin = new BMap.InfoWindow("<p class='t-c'><input value='ѡΪ�յ�' type='button' onclick='endDeter();' /></p>");

var startResults = null;
var endResults = null;

var startPoint;
var endPoint;

var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true,panel:drivingPanel}});

var startOption = {
  onSearchComplete: function(results){
    // �ж�״̬�Ƿ���ȷ
    if (startSearch.getStatus() == BMAP_STATUS_SUCCESS){
      startResults = results;
      var s = [];
      for (var i = 0; i < results.getCurrentNumPois(); i ++){
        s.push("<div><p><a onmou搜刮引擎优化ver='map.openInfoWindow(startInfowin,startResults.getPoi(" + i + ").point);' href='#'>");
        s.push(results.getPoi(i).title);
        s.push("</a></p><p>");
        s.push(results.getPoi(i).address);
        s.push("</p></div>");
      }
      document.getElementById("startPanel").innerHTML = s.join("");
    }else{startResults = null;}
  }
};
var endOption = {
  onSearchComplete: function(results){
    // �ж�״̬�Ƿ���ȷ
    if (endSearch.getStatus() == BMAP_STATUS_SUCCESS){
      endResults = results;
      var s = [];
      for (var i = 0; i < results.getCurrentNumPois(); i ++){
        s.push("<div><p><a href='#' onmou搜刮引擎优化ver='map.openInfoWindow(endInfowin,endResults.getPoi(" + i + ").point);'>");
        s.push(results.getPoi(i).title);
        s.push("</a></p><p>");
        s.push(results.getPoi(i).address);
        s.push("</p></div>");
      }
      document.getElementById("endPanel").innerHTML = s.join("");
    }else{endResults = null;}
  }
};
//����2������ʵ��
var startSearch = new BMap.LocalSearch(map,startOption);
var endSearch = new BMap.LocalSearch(map,endOption);

function mDriving(){
    var startPlace = document.getElementById("startInput").value;
    var endPlace = document.getElementById("endInput").value;
    startSearch.search(startPlace);
    endSearch.search(endPlace);
    document.getElementById("box").style.display="block";
}

function startDeter(){
    map.clearOverlays();
    startPoint = startInfowin.getPosition();
    var marker = new BMap.Marker(startPoint);
    map.addOverlay(marker);
    document.getElementById("startPanel").style.display="none";
}
function endDeter(){    
    if(startPoint==null){alert("����ѡ����㣡");}
    else{
        endPoint = endInfowin.getPosition();        
        driving.search(startPoint,endPoint);
        document.getElementById("endPanel").style.display="none";
    }
}
</script>

ת��ע��վ�� Ϣ��Դ��http://www.cnblogs.com/milkmap/archive/2011/09/15/2177743.html

��ѵ����