首页
所有分类
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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
AngularJS快速入门
Apr 02 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
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
爬虫(2) frozenset(1) Counter(1) SingleFlight(2) most_common(1) pip(1) 并发(8) set(1) 字典(3) Xpath(1)
You might like
用Flash图形化数据(二)
2006/10/09 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
php 可变函数使用小结
2018/06/12 PHP
JavaScript中的闭包原理分析
2010/03/08 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
Python多线程编程（四）：使用Lock互斥锁
2015/04/05 Python
利用Python破解斗地主残局详解
2017/06/30 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
python列表推导式操作解析
2019/11/26 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
英国女士家居服网站：hush
2017/08/09 全球购物
Big Green Smile法国：领先的英国有机和天然产品在线商店
2021/01/02 全球购物
生物制药专业自我鉴定
2014/02/19 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
个人考核材料
2014/05/15 职场文书
武夷山导游词
2015/02/03 职场文书
小学作文指导之如何写人？
2019/07/08 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
python获取带有返回值的多线程
2022/05/02 Python