վ�����ߣ����ò�һ��!
��¼��ѯ  �ؼ�������  Alexa����  PR���  ������  IP����  WHOIS��ѯ    �����ѯ  
  �ղ�  �����ѯ ��һ��
��Ϣ���� ��ҳ » ��Ѷ��Ϣ

��վ�Ƽ�

IT����

  ҵ�����

  ��������

��վ�ƹ�

  վ����ҵ

  ��Ӫ�ƹ�

��Ʊ��

  �������

  �������

���ٶȵ�ͼAPI�����������ѡ�������յ�ļݳ�����
��Ϣ��Դ������С�� ����ʱ�䣺2011/9/15

ժҪ��

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

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

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

 

 

 

 

 

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

 

 

 

 

һ��������ͼ����ҳ��ʽ

����һ�ż򵥵ĵ�ͼ��ֻ��Ҫ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������ɶ������ɹ���IJ�����

 

��������������

�������ɹ��󣬰�ÿһ�����������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
���ѵ�����