首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onOctober 29, 2015

以下是使用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?v=1.2" language="javascript"></script>
</head>
<body>
  <div>
  <table border="0" align="center" cellpadding="0" cellspacing="0" class="w1000">
 <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 style="padding-top: 2px;"></span></td>                      
                        <td width="60" style="font-size: 12px;">
                          出发城市                        </td>
                        <td>
                          <select id="AreaDept1_Province" style="width: 65px" onChange="changearea(this.value,document.getElementById('AreaDept1_Prefecture'));"
                            name="Area">
                            <option value="">-省份-</option>
                          </select>
                          <select id="AreaDept1_Prefecture" style="width: 65px" 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" style="width: 65px" 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" style="font-size: 12px;">
                          到                        </td>
                        <td>
                          <select name="mdd" id="mdd" style="width: 65px" onChange="changearea(this.value,document.getElementById('cdd'));">
                            <option value='' selected="selected">-省份-</option>
                          </select>
                          <select name="cdd" id="cdd" style="width: 65px" onchange="changecity(document.getElementById('mdd').value,document.getElementById('cdd').value,document.getElementById('xian'))">
                            <option value="" selected="selected">-城市-</option>
                          </select>
                          <select name="xian" id="xian" style="width: 65px">
                            <option value="" selected="selected">-县-</option>
                          </select>
                          <script language="JavaScript" type="text/javascript">
                            setup(document.getElementById("mdd"));
                          </script>                       </td>
                        <td>
                            <div onclick="SetMap(); return false;" style="cursor: pointer; width:81px;">
                        <img src="images/search.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>

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

- Author -

®Geovin Du Dream Park™

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript 构造函数 实例分析
Nov 26 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
js实现本地时间同步功能
Aug 26 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 #Javascript
JavaScript操作URL的相关内容集锦
Oct 29 #Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 #Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 #Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 #Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 #Javascript
Jquery日历插件制作简单日历
Oct 28 #Javascript
调幅(1) SW(1) LW(1) 发报机(1) PL-880(1) 电路图(1) 短波(1) 天线(6) 电磁辐射(1) 电台(1)
You might like
PHP4之真OO
2006/10/09 PHP
php中文本操作的类
2007/03/17 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
javascript cookie解码函数（兼容ff）
2008/03/17 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
每天一篇javascript学习小结（基础知识）
2015/11/10 Javascript
深入学习jQuery Validate表单验证（二）
2016/01/18 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
python判断自身是否正在运行的方法
2019/08/08 Python
Python执行时间的几种计算方法
2020/07/31 Python
python安装sklearn模块的方法详解
2020/11/28 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
施华洛世奇英国官网：SWAROVSKI英国
2017/03/13 全球购物
英国版MAC彩妆品牌：Illamasqua
2018/04/18 全球购物
门卫人员岗位职责
2013/12/24 职场文书
语文教学感言
2014/02/06 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
口袋妖怪冰系十大最强精灵，几何雪花排第七，第六类似北极熊
2022/03/18 日漫
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android