如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
以下是使用js代码实现百度地图计算两地距离,代码如下所示:
<scriptsrc="js/jquery-1.9.0.js"type="text/javascript"language="javascript"></script>
<scriptlanguage="javascript"type="text/javascript"src="js/area.js"></script>
<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=1.2"language="javascript"></script>
</head>
<body>
<div>
<tableborder="0"align="center"cellpadding="0"cellspacing="0"class="w1000">
<tr>
<td>
<tdvalign="top">
<tablewidth="1000px"border="0"cellspacing="0"cellpadding="0">
<tr>
<td>
<tablewidth="1000px"border="0"cellspacing="0"cellpadding="0">
<tr>
<tdwidth="19"><spanstyle="padding-top:2px;"></span></td>
<tdwidth="60"style="font-size:12px;">
出发城市</td>
<td>
<selectid="AreaDept1_Province"style="width:65px"onChange="changearea(this.value,document.getElementById('AreaDept1_Prefecture'));"
name="Area">
<optionvalue="">-省份-</option>
</select>
<selectid="AreaDept1_Prefecture"style="width:65px"name="City"onchange="changecity(document.getElementById('AreaDept1_Province').value,document.getElementById('AreaDept1_Prefecture').value,document.getElementById('AreaDept1_Xian'))">
<optionvalue="">-城市-</option>
</select>
<selectid="AreaDept1_Xian"style="width:65px"name="City">
<optionvalue="">-县-</option>
</select>
<scriptlanguage="JavaScript"type="text/javascript">
setup(document.getElementById("AreaDept1_Province"));
//$("#AreaDept1_Province").find("option[text='"+DProvice+"']").attr("selected",true);
//changearea(DProvice,document.getElementById('AreaDept1_Prefecture'));
//$("#AreaDept1_Prefecture").find("option[text='"+DCity+"']").attr("selected",true);
</script></td>
<tdwidth="26"align="center"style="font-size:12px;">
到</td>
<td>
<selectname="mdd"id="mdd"style="width:65px"onChange="changearea(this.value,document.getElementById('cdd'));">
<optionvalue=''selected="selected">-省份-</option>
</select>
<selectname="cdd"id="cdd"style="width:65px"onchange="changecity(document.getElementById('mdd').value,document.getElementById('cdd').value,document.getElementById('xian'))">
<optionvalue=""selected="selected">-城市-</option>
</select>
<selectname="xian"id="xian"style="width:65px">
<optionvalue=""selected="selected">-县-</option>
</select>
<scriptlanguage="JavaScript"type="text/javascript">
setup(document.getElementById("mdd"));
</script></td>
<td>
<divonclick="SetMap();returnfalse;"style="cursor:pointer;width:81px;">
<imgsrc="images/search.gif"alt="中国公路里程查询"width="81"height="26"style="vertical-align:middle;"/></div></td>
<td><tablewidth="380"border="0"cellspacing="0"cellpadding="0">
<tr>
<tdwidth="50"></td>
<tdwidth="19"><spanstyle="padding-top:2px;"></span></td>
<tdwidth="90"style="font-size:12px;">出发城市</td>
<td>
<inputname="farea"type="text"id="farea"size="10"/></td>
<tdwidth="26"align="center"style="font-size:12px;">到</td>
<tdwidth="110"><inputname="tarea"type="text"id="tarea"size="10"/>
</td>
<td><divonclick="SetMap2();returnfalse;"style="cursor:pointer;width:81px;"><imgsrc="images/search.gif"alt="中国公路里程查询"width="81"height="26"style="vertical-align:middle;"/></div></td>
</tr>
</table></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td><divstyle="border:#cccccc1pxsolid;padding:5px;"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<tdvalign="top">
<divstyle="float:left;width:670px;vertical-align:top;">
<divstyle="height:500px;border:1pxsolidgray"id="container"></div>
</div>
<divstyle="float:right;width:300px;vertical-align:top;">
<divstyle="border:#cccccc1pxsolid;">
<divclass="content_title"style="color:Red;background-image:url();border-bottom:solid1px#ccc;height:30px;text-align:center;font-weight:bold;line-height:30px;"id="div_title">查询结果</div>
<divid="div_gongli"style="color:#336600;font-weight:bold;padding-left:5px;line-height:35px;font-size:14px;"></div>
<divid="results"style="font-size:12px;"></div>
</div>
</div></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
<scriptlanguage="javascript"type="text/javascript">
varmap=newBMap.Map("container");
//varmapStyle={style:"mapbox"}
//map.setMapStyle(mapStyle);
map.centerAndZoom(newBMap.Point(116.404,39.915),14);
//map.centerAndZoom(point,11);
map.addControl(newBMap.NavigationControl());//添加平移缩放控件
map.addControl(newBMap.OverviewMapControl());//添加缩略地图控件
map.enableScrollWheelZoom();//启用滚轮放大缩小
map.setMapStyle({style:"mapbox"});
functionSetMap(){
varoGl=document.getElementById("div_gongli");
varofprovince=document.getElementById("AreaDept1_Province")
varofname=document.getElementById("AreaDept1_Prefecture")
varofxian=document.getElementById("AreaDept1_Xian")
varotprovince=document.getElementById("mdd")
varotname=document.getElementById("cdd");
varotxian=document.getElementById("xian")
varoutput="全程:";
if(ofname.value==""){
alert('请输入出发地!');
return;
}
if(otname.value==""){
alert('请输入到达地!');
return;
}
vartitle=document.getElementById("div_title");
title.innerText="'"+ofprovince.value+ofname.value+ofxian.value+"到"+otprovince.value+otname.value+otxian.value+"'查询结果";
varsearchComplete=function(results){
if(transit.getStatus()!=BMAP_STATUS_SUCCESS){return;}
varplan=results.getPlan(0);
output+=plan.getDistance(true);//获取距离
output+="/";
output+=plan.getDuration(true);//获取时间
}
vartransit=newBMap.DrivingRoute(map,{renderOptions:{map:map,panel:"results",autoViewport:true},
onSearchComplete:searchComplete,
onPolylinesSet:function(){oGl.innerText=output;}
});
transit.search(ofprovince.value+ofname.value+ofxian.value,otprovince.value+otname.value+otxian.value);
}
functionSetMap2(){
varoGl=document.getElementById("div_gongli");
varofname=document.getElementById("farea");
varotname=document.getElementById("tarea");
varoutput="全程:";
if(ofname.value==""){
alert('请输入出发地!');
return;
}
if(otname.value==""){
alert('请输入到达地!');
return;
}
vartitle=document.getElementById("div_title");
title.innerText="'"+ofname.value+"到"+otname.value+"'查询结果";
varsearchComplete=function(results){
if(transit.getStatus()!=BMAP_STATUS_SUCCESS){return;}
varplan=results.getPlan(0);
output+=plan.getDistance(true);//获取距离
output+="/";
output+=plan.getDuration(true);//获取时间
}
vartransit=newBMap.DrivingRoute(map,{renderOptions:{map:map,panel:"results",autoViewport:true},
onSearchComplete:searchComplete,
onPolylinesSet:function(){oGl.innerText=output;}
});
transit.search(ofname.value,otname.value);
}
</script>
下面给大家介绍C#如何根据百度地图,计算出两地之间的驾驶距离
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<styletype="text/css">
body,html,#allmap{width:100%;height:100%;overflow:hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2pxsolid#bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=1.4"></script>
<title>计算驾车时间与距离</title>
</head>
<body>
<divid="allmap"></div>
</body>
</html>
<scripttype="text/javascript">
varmap=newBMap.Map("allmap");
map.centerAndZoom(newBMap.Point(116.404,39.915),12);
varoutput="从上地到西单驾车需要";
varsearchComplete=function(results){
if(transit.getStatus()!=BMAP_STATUS_SUCCESS){
return;
}
varplan=results.getPlan(0);
output+=plan.getDuration(true)+"\n";//获取时间
output+="总路程为:";
output+=plan.getDistance(true)+"\n";//获取距离
}
vartransit=newBMap.DrivingRoute(map,{renderOptions:{map:map},
onSearchComplete:searchComplete,
onPolylinesSet:function(){
setTimeout(function(){alert(output)},"1000");
}});
transit.search("上地","西单");
</script>