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

 更新时间:2015年10月30日 13:43  点击:3125

以下是使用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>
[!--infotagslink--]

相关文章

  • 百度网盟和google网盟推广那种效果好

    专做了百度和google的网盟推广以作推广效果的评估比较。百度的周期为6天,google为4天。   从百度的统计数据可以看出这六天的点击次数总共为464,平均点击花费了0.30元...2017-07-06
  • JS中引用百度地图并将百度地图的logo和信息去掉

    采用CSS覆盖的方法就可以了,但是官方是不允许这么做的...2013-10-13
  • 如何根据百度地图计算出两地之间的驾驶距离(两种语言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/...2015-10-30
  • 百度联盟封号了解封申请攻略

    百度联盟封号对于许多的站长来说肯定是会影响到心情的,那么既然是百度联盟封号了我们就肯定有一些原因的,虽然不是你自己搞的或一些其它因素都有可能,我们下面整理一下百...2016-10-10
  • 基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标

    本文给大家介绍javascript实现高德地图和百度地图提取行政区边界经纬度坐标的相关知识,本文实用性非常高,代码简单易懂,需要的朋友参考下吧...2016-01-24
  • 百度地图API之百度地图退拽标记点获取经纬度的实现代码

    这篇文章主要介绍了百度地图API之百度地图退拽标记点获取经纬度的实现代码,需要的朋友可以参考下...2017-01-16
  • 网站被百度拔毛 一月重新回归经验分离

    网站被K后,笔者做的第一件事便是在网站上增加更新模块。百度算法更新,对于网站内容给予了相当大的权重,这是笔者网站最欠缺的部分,保证了及时的更新便有了吸引蜘蛛爬取的...2016-10-10
  • 计算Python Numpy向量之间的欧氏距离实例

    这篇文章主要介绍了计算Python Numpy向量之间的欧氏距离实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-23
  • 如何用PS将百度熊抱枕做成大头枕?

    我们知道百度熊抱枕很大,只想要百度熊的大头,该怎么办呢?下面我们就来看看详细的教程。 1、首先打开photoshopCS6软件,新建一个“1600*1600”的白色背景图,并从右上角...2016-12-31
  • 如何根据百度地图计算出两地之间的驾驶距离(两种语言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/...2015-10-30
  • 百度地图给map添加右键菜单(判断是否为marker)

    这篇文章主要介绍了百度地图给map添加右键菜单(判断是否为marker) 的相关资料,需要的朋友可以参考下...2016-03-07
  • 怎么对百度网页搜索的检索指标进行评估

    用户为满足自己某种需求而来到搜索引擎的,判断用户的需求是做好网站的开始。只有准确地判断出用户需求,了解用户搜索的目的,才能合理地衡量出一个网站结果的质量好,做好搜...2016-10-10
  • 如何应对百度更新改动关键词

    网页头部head 部分:TITLE 、<mtea>部分 网站描述Description、keyword 内容中的关键词,大家优化时也都比较重视这部分的关键词优化,因为在查询搜索结果时此处出现的关键词...2017-07-06
  • JS实现获取来自百度,Google,soso,sogou关键词的方法

    这篇文章主要介绍了JS实现获取来自百度,Google,soso,sogou关键词的方法,结合实例形式分析了js获取来路页面的方法与相关搜索引擎关键词的处理技巧,需要的朋友可以参考下...2017-01-09
  • WinForm调用百度地图接口用法示例

    这篇文章主要介绍了WinForm调用百度地图接口用法,结合具体实例形式简单分析了WinForm WebBrower控件与前端百度接口交互的相关操作技巧,需要的朋友可以参考下...2020-06-25
  • Illustrator绘制百度云标志LOGO教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说绘制百度云标志LOGO的教程,各位想知道具体绘制方法的使用者,那么下面就快来跟着小编一起看一看教程。...2016-09-14
  • PHPCMS实现自动推送URL到百度站长平台

    我们一起来看一篇关于PHPCMS实现自动推送URL到百度站长平台,希望此教程能够帮助到各位朋友。 百度站长平台开放url推送接口,可以使用调用接口的形式主动及时推送u...2016-11-25
  • 百度指数工具分析关键词的价值

    仅仅凭自己的感觉是根本无法判断这个关键词的价值的,那么这时候我们就可以适当的应用一下百度指数工具,利用这个工具我们可以挖掘出一些有价值的关键词。 一、从百...2016-10-10
  • C# 10分钟完成百度人脸识别(入门篇)

    这篇文章主要介绍了C# 10分钟完成百度人脸识别(入门篇),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
  • 百度不更新网站原因分析

    百度不更新网站原因分析 今天我们来看一篇关于 哦,你是不是其它的之一呢,好了下面来看看各位站长总结了来百度不更新网页的原因吧。 一、首页的大flash图片。   ...2016-10-10