如何根據百度地圖計算出兩地之間的駕駛距離(兩種語言js和C#),
以下是使用js代碼實現百度地圖計算兩地距離,代碼如下所示:
<script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script><script language="javascript" type="text/javascript" src="js/area.js"></script><script type="text/javascript" src="http://www.bkjia.com/uploads/allimg/151031/0010432G5-0.gif" alt="中國公路裡程查詢" width="81" height="26" style="vertical-align: middle;" /></div></td> <td><table width="380" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="50"> </td> <td width="19"><span style="padding-top: 2px;"></span></td> <td width="90" style="font-size: 12px;"> 出發城市 </td> <td> <input name="farea" type="text" id="farea" size="10" /></td> <td width="26" align="center" style="font-size: 12px;"> 到 </td> <td width="110"><input name="tarea" type="text" id="tarea" size="10" /> </td> <td><div onclick="SetMap2(); return false;" style="cursor: pointer; width:81px;"> <img src="images/search.gif" alt="中國公路裡程查詢" width="81" height="26" style="vertical-align: middle;" /></div></td> </tr> </table></td> </tr> </table> </div> </td> </tr> <tr> <td><div style="border: #cccccc 1px solid; padding:5px;"></div></td> </tr> <tr> <td> </td> </tr> <tr> <td valign="top"> <div style="float: left; width: 670px; vertical-align: top;"> <div style="height: 500px; border: 1px solid gray" id="container"> </div> </div> <div style="float: right; width: 300px; vertical-align: top;"> <div style="border: #cccccc 1px solid;"> <div class="content_title" style="color:Red; background-image:url();border-bottom:solid 1px #ccc; height:30px; text-align:center; font-weight:bold; line-height:30px;" id="div_title">查詢結果</div> <div id="div_gongli" style="color:#336600; font-weight:bold; padding-left:5px; line-height:35px; font-size:14px;"></div> <div id="results" style="font-size: 12px;"> </div> </div> </div> </td> </tr> </table></td> </tr></table> </div></body></html><script language="javascript" type="text/javascript"> var map = new BMap.Map("container"); //var mapStyle = { style: "mapbox" } //map.setMapStyle(mapStyle); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); //map.centerAndZoom(point, 11); map.addControl(new BMap.NavigationControl()); // 添加平移縮放控制項 map.addControl(new BMap.OverviewMapControl()); //添加縮減地圖控制項 map.enableScrollWheelZoom(); //啟用滾輪放大縮小 map.setMapStyle({ style: "mapbox" }); function SetMap() { var oGl = document.getElementById("div_gongli"); var ofprovince = document.getElementById("AreaDept1_Province") var ofname = document.getElementById("AreaDept1_Prefecture") var ofxian = document.getElementById("AreaDept1_Xian") var otprovince = document.getElementById("mdd") var otname = document.getElementById("cdd"); var otxian = document.getElementById("xian") var output = "全程:"; if (ofname.value == "") { alert('請輸入出發地!'); return; } if (otname.value == "") { alert('請輸入到達地!'); return; } var title = document.getElementById("div_title"); title.innerText = "'" + ofprovince.value + ofname.value + ofxian.value + "到" + otprovince.value + otname.value + otxian.value + "' 查詢結果"; var searchComplete = function(results) { if (transit.getStatus() != BMAP_STATUS_SUCCESS) { return; } var plan = results.getPlan(0); output += plan.getDistance(true); //擷取距離 output += "/"; output += plan.getDuration(true); //擷取時間 } var transit = new BMap.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); } function SetMap2() { var oGl = document.getElementById("div_gongli"); var ofname = document.getElementById("farea"); var otname = document.getElementById("tarea"); var output = "全程:"; if (ofname.value == "") { alert('請輸入出發地!'); return; } if (otname.value == "") { alert('請輸入到達地!'); return; } var title = document.getElementById("div_title"); title.innerText = "'" + ofname.value + "到" + otname.value + "' 查詢結果"; var searchComplete = function(results) { if (transit.getStatus() != BMAP_STATUS_SUCCESS) { return; } var plan = results.getPlan(0); output += plan.getDistance(true); //擷取距離 output += "/"; output += plan.getDuration(true); //擷取時間 } var transit = new BMap.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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}#r-result{height:100%;width:20%;float:left;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script><title>計算駕車時間與距離</title></head><body><div id="allmap"></div></body></html><script type="text/javascript">var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);var output = "從上地到西單駕車需要";var searchComplete = function (results){ if (transit.getStatus() != BMAP_STATUS_SUCCESS){ return ; } var plan = results.getPlan(0); output += plan.getDuration(true) + "\n"; //擷取時間 output += "總路程為:" ; output += plan.getDistance(true) + "\n"; //擷取距離}var transit = new BMap.DrivingRoute(map, {renderOptions: {map: map}, onSearchComplete: searchComplete, onPolylinesSet: function(){ setTimeout(function(){alert(output)},"1000"); }});transit.search("上地", "西單");</script>