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

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:34 PM

以下是使用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&#63;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="/static/imghw/default1.png"  data-src="images/search.gif"  class="lazy" alt="中国公路里程查询"    style="max-width:90%"  style="max-width:90%" 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="/static/imghw/default1.png"  data-src="images/search.gif"  class="lazy" alt="中国公路里程查询"    style="max-width:90%"  style="max-width:90%" 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&#63;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>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1664

CakePHP 教程

1423

Laravel 教程

1317

PHP教程

1268

C# 教程

1246

显示更多

Related knowledge

JavaScript的演变：当前的趋势和未来前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

JavaScript引擎：比较实施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

Python vs. JavaScript：学习曲线和易用性 Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

JavaScript：探索网络语言的多功能性 Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

如何使用Next.js（前端集成）构建多租户SaaS应用程序 Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

使用Next.js（后端集成）构建多租户SaaS应用程序 Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

从C/C到JavaScript：所有工作方式 Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript和Web：核心功能和用例 Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题