手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
摘要:以下是使用js代码实现百度地图计算两地距离,代码如下所示:出发城市-省份--城市--县-setup(document.getElementB...

以下是使用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://api.map.baidu.com/api" language="javascript"></script> </head> <body> <div> <table border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <td valign="top"> <table width="1000px" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="1000px" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="19"><span></span></td> <td width="60"> 出发城市 </td> <td> <select id="AreaDept1_Province" onChange="changearea(this.value,document.getElementById('AreaDept1_Prefecture'));" name="Area"> <option value="">-省份-</option> </select> <select id="AreaDept1_Prefecture" name="City" onchange="changecity(document.getElementById('AreaDept1_Province').value,document.getElementById('AreaDept1_Prefecture').value,document.getElementById('AreaDept1_Xian'))"> <option value="">-城市-</option> </select> <select id="AreaDept1_Xian" name="City"> <option value="">-县-</option> </select> <script language="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> <td width="26" align="center"> 到 </td> <td> <select name="mdd" id="mdd" onChange="changearea(this.value,document.getElementById('cdd'));"> <option value='' selected="selected">-省份-</option> </select> <select name="cdd" id="cdd" onchange="changecity(document.getElementById('mdd').value,document.getElementById('cdd').value,document.getElementById('xian'))"> <option value="" selected="selected">-城市-</option> </select> <select name="xian" id="xian"> <option value="" selected="selected">-县-</option> </select> <script language="JavaScript" type="text/javascript"> setup(document.getElementById("mdd")); </script> </td> <td> <div> <img src="images/search.gif" alt="中国公路里程查询" width="81" height="26" /></div></td> <td><table width="380" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="50"> </td> <td width="19"><span></span></td> <td width="90"> 出发城市 </td> <td> <input name="farea" type="text" id="farea" size="10" /></td> <td width="26" align="center"> 到 </td> <td width="110"><input name="tarea" type="text" id="tarea" size="10" /> </td> <td><div> <img src="images/search.gif" alt="中国公路里程查询" width="81" height="26" /></div></td> </tr> </table></td> </tr> </table> </div> </td> </tr> <tr> <td><div></div></td> </tr> <tr> <td> </td> </tr> <tr> <td valign="top"> <div> <div id="container"> </div> </div> <div> <div> <div id="div_title">查询结果</div> <div id="div_gongli"></div> <div id="results"> </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"></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>

【如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)】相关文章:

js验证上传图片的方法

AngularJS 2.0新特性有哪些

JQuery勾选指定name的复选框集合并显示的方法

JSON字符串和对象之间的转换详解

光标的帖子总结(Range的使用)

网页常用Javascript

jQuery插件datepicker 日期连续选择

jQuery构造函数init参数分析续

实现无刷新联动例子汇总

javascript自定义右键弹出菜单实现方法

精品推荐
分类导航