如何根据百度地图计算出两地之间的驾驶距离(两种语言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>