如何根据百度地图计算出两地之间的驾驶距离(两种语言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/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>
相关推荐
-
c#封装百度web服务geocoding api 、百度坐标转换示例
1.创建基础参数类 复制代码 代码如下: public static class BaiduConstParams { public const string PlaceApIv2Search = "http://api.map.baidu.com/place/v2/search"; public const string PlaceApIv2Detail = "http://api.map.baidu.com/place/v2/detail
-
C#实现微信结合百度api获取当前用户地理位置的方法
本文实例讲述了C#实现微信结合百度api获取当前用户地理位置的方法.分享给大家供大家参考,具体如下: 操作步骤: 1. 先根据微信提供的接口文档获取到经纬度 参考文档地址:http://mp.weixin.qq.com/wiki/8/1b86529d05db9f960e48c3c7ca5be288.html 2. 由于直接使用微信获取到的经纬度,来使用百度地图api获取地址存在500~1000米的偏差,有时候定位不是很准确,所以需要转换成百度的坐标 参考文档地址:http://developer
-
C#开发微信公众号接口开发
具体实现方式不多说了,请看下文 一.前言 当下微信公众号几乎已经是每个公司必备的,但是大部分微信公众账号用户体验都欠佳,特别是涉及到用户绑定等,需要用户进行复杂的操作才可以和网站绑定,或者很多公司直接不绑定,而是每次都让用户填写账号密码.作为微信接口开发人员我们知道网页授权可以用作微信网页用作安全登录,带参数二维码的使用用作记录用户来源,模板消息用作购物消费等消息的通知,但是很少看到有综合利用这些高级接口做出体验比较好的公众账号,这里分享一些我开发的用户绑定和验证码的一些心得.所需要的接口有基础
-
C#微信小程序服务端获取用户解密信息实例代码
C#微信小程序服务端获取用户解密信息实例代码 实现代码: using AIOWeb.Models; using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Web; namespace AIOWe
-
C#实现百度ping推送功能的方法
网站优化必做的事情之一,百度ping,主动推送给百度 文章添加时调用百度推送方法 //保存 protected void btnSubmit_Click(object sender, EventArgs e) { if (action == DTEnums.ActionEnum.Edit.ToString()) //修改 { ChkAdminLevel("channel_" + this.channel_name + "_list", DTEnums.ActionE
-
C#实现百度网站收录和排名查询功能思路及实例
一.前言 偶然一次在vs2012默认的项目文件夹里发现了以前自己做的一个关于SEO的类库,主要是用来查询某个网址的收录次数还有网站的排行数,后来重构了下,今天拿出来写篇文章,说说自己是如何思考的并完成的. 二.问题描述 首先需要考虑的是能够支持哪些搜索引擎的查询,首先是百度,然后是必应.搜狗.搜搜.360.本来想支持Google但是一想不对,根本不好访问的,所以暂时不算在内.而我们实际要做的就是根据一个网址能够检索出这个网址的在各个搜索引擎的收录次数以及在不同关键词下的网址排行,这里出入的只有网
-
C#.net 微信公众账号接口开发
微信越来越火,微信公众平台成为开发成新宠,本文用C#.net开发微信公众信号接口. 微信接口地址代码: weixin _wx = new weixin(); string postStr = ""; if (Request.HttpMethod.ToLower() == "post") { Stream s = System.Web.HttpContext.Current.Request.InputStream; byte[] b = new byte[s.Leng
-
C#实现解析百度天气数据,Rss解析百度新闻以及根据IP获取所在城市的方法
本文实例讲述了C#实现解析百度天气数据,Rss解析百度新闻以及根据IP获取所在城市的方法,分享给大家供大家参考.具体实现方法如下: 一.百度天气 接口地址:http://api.map.baidu.com/telematics/v3/weather?location=上海&output=json&ak=hXWAgbsCC9UTkBO5V5Qg1WZ9,其中ak是密钥,自行去申请即可,便于大家测试,楼主就公布并了自己的Key,这样可以直接获取到数据. 获取到的数据是这样的: 复制代码 代码如
-
C#微信公众平台开发之高级群发接口
涉及access_token的获取请参考<C#微信公众平台开发之access_token的获取存储与更新> 一.为了实现高级群发功能,需要解决的问题 1.通过微信接口上传图文消息素材时,Json中的图片不是url而是media_id,如何通过微信接口上传图片并获取图片的media_id? 2.图片存储在什么地方,如何获取? 二.实现步骤,以根据OpenID列表群发图文消息为例 1.准备数据 我把数据存储在数据库中,ImgUrl字段是图片在服务器上的相对路径(这里的服务器是自己的服务器,不是微信
-
C#微信开发之获取接口调用凭据
获取接口调用凭据 ①接口说明 access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token.开发者需要进行妥善保存.access_token的存储至少要保留512个字符空间.access_token的有效期目前为2h(7200s),需定时刷新,重复获取将导致上次获取的access_token失效. 公众平台的API调用所需的access_token的使用及生成方式说明: 1.为了保密appsecrect,第三方需要一个access_token获取和刷新的中控
-
C#微信公众平台开发之access_token的获取存储与更新
一.什么是access_token? access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token.正常情况下access_token有效期为7200秒,重复获取将导致上次获取的access_token失效.由于获取access_token的api调用次数非常有限,建议开发者全局存储与更新access_token,频繁刷新access_token会导致api调用受限,影响自身业务. 二.要解决的问题 1.如何获取access_token. 2.由于acces
-
C#微信公众号开发之接收事件推送与消息排重的方法
本文实例讲述了C#微信公众号开发之接收事件推送与消息排重的方法.分享给大家供大家参考.具体分析如下: 微信服务器在5秒内收不到响应会断掉连接,并且重新发起请求,总共重试三次.这样的话,问题就来了.有这样一个场景:当用户关注微信账号时,获取当前用户信息,然后将信息写到数据库中.类似于pc端网站的注册.可能由于这个关注事件中,我们需要处理的业务逻辑比较复杂.如送积分啊,写用户日志啊,分配用户组啊.等等--一系列的逻辑需要执行,或者网络环境比较复杂,无法保证5秒内响应当前用户的操作,那如果当操作尚未完