1. 目前在项目中,遇到一个需求不会做,就是要计算两个城市之间的距离,而这两个城市的输入是可变的,如果要使用数据库来先存储两地之间的距离,调用的时候再来调用,那么存数据的时候,要哭的,因为光是省级区域,目前就是34个省级行政区,两个城市之间的距离,就是取任意两地之间的距离,那么按照排列组合的分析,就要有 34*33 = 1122 种排列组合方式,每个省有若干个城市,那这工作量就大了,所以需要寻找一种更为方便的方法来求两个城市之间的距离
2. 先看下需求:两个城市之间的距离,在数学中,两点之间的距离就是两点之间的直线长度,如果两点之间使用曲线链接,那么两点之间的距离就是曲线的长度;那么怎么样求两点之间的距离呢,首先,需要知道两点分别在哪里,所以,第一步,就是要获取这点之间的定位,准确的说,是先要找出这两个点在当前平面上的坐标,x坐标是多少,y坐标是多少,找出了(x1,y1),(x2,y2)之间的坐标后,就可使用公式:d = sqrt((x1-x2 )2+ (y1-y2)2 );来求直线距离了
3. 对应到两地之间的距离,就是要先确认两地的位置,也是就经纬度,经纬度一旦确定,定位就确定了,地球表面是一个球面,那么两地之间的距离就是一条弧线,根据弧线的计算公式,就可以把两地之间的距离算出来了,当然我们这个是有假设的,假设地球球面是光滑的,这样算下来的距离,会有一定的误差,但是从理论上是可行的
4. 自己按照地球表面的弧度来计算两地之间的距离,理论上是可行的,但是,目前网上有一些做好API,我们可以直接调用,就可以计算出两地之间的距离了,而且很好用。下面,我将使用 高德地图的API 来计算两地之间的距离
4.1 按照上面所说的理论,要计算两地的距离,首先需要确认这两个点在哪里,那怎么确定呢?--------地球上一个点的定位,使用经纬度就可以了,经度和纬度定了,那么这个点也就定了
例如:我们要计算:重庆市到深圳市的距离
现在,我们需要获取 重庆市 和 深圳市 的经纬度
4.1. 1 来看高德地图API:要使用高德的API,首先需要注册一下成为高德用户,直接在百度里输入 ‘高德地图’ ,回车,然后进入 ‘高德开放平台 | 高德地图API’
4.1.2 然后在点击注册页面,注册一个用户
4.1.3 申请秘钥:
为什么要申请秘钥呢?因为你要使用高德地图的服务,而服务会以一个地址的形式发送到高德的服务器,高德的服务器会先确定你的身份,然后再确定是否处理你提交的东西;那高德地图怎么确定是否要受理这份请求呢,毕竟谁也不会吃饱了没事干,然后有求必应,处理完了还不知道是谁在发送请求;这里秘钥就器作用了,秘钥说白了就是一个字符串,是一个身份标识,是高德地图给注册它的用户的一个身份标识。你发送请求了,他先确定,哦,这是我的用户,然后才会进行处理,而且用户的请求是有限制的,每个用户每天最多只能请求多少次,每秒钟请求多少次,这都是有限制的。
秘钥申请 OK 之后,在你发送请求的同时,把秘钥放在请求的参数里,一起发送到高德地图的服务端,服务端返回请求结果,这样就可以使用了
4.1.4.1 获取起始点和结束点的经纬度(重庆和深圳的经纬度)
找到web 服务,如下:
4.1.4.2 我们将会用到以下两个模块:
4.1.4.3 请求地址:
4.1.4.4 请求返回的数据:
4.1.4.5 请求例子:
例如,我申请的秘钥是:key=3eac2241aca3b6f67079173fe3f3b8ec
然后申请的地点是:重庆市
那么我的服务请求就是: http://restapi.amap.com/v3/geocode/geo?address=重庆市&output=JSON&key=3eac2241aca3b6f67079173fe3f3b8ec
把上面的请求输入浏览器地址栏:http://restapi.amap.com/v3/geocode/geo?address=重庆市&output=JSON&key=3eac2241aca3b6f67079173fe3f3b8ec,得到以下结果:
这里得到重庆市的经纬度为:106.551556,29.563009
通过相同的方式,获取深圳市的经纬度为:114.057868,22.543099
4.1.4.6 计算两地之间的距离:
4.1.4.7 找到距离测量:
4.1.4.8 测距返回数据:
4.1.4.9 服务请求地址:
http://restapi.amap.com/v3/distance?origins=106.551556,29.563009&destination=114.057868,22.543099&output=json&key=3eac2241aca3b6f67079173fe3f3b8ec&type=1
在浏览器中输入:http://restapi.amap.com/v3/distance?origins=106.551556,29.563009&destination=114.057868,22.543099&output=json&key=3eac2241aca3b6f67079173fe3f3b8ec&type=1,请求结果如下:
所以,重庆市和深圳市之间的距离就是:1446881 米 ,合 1446.88 公里
查看下手机高德地图的导航结果:1445 公里,基本一致
5. 把距离测算写成代码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <script src="http://code.jquery.com/jquery-latest.js"> 8 </script> 9 <title>Document</title> 10 <script> 11 $(function() { 12 // 获取起始点和结束点的经纬度 13 $("#btn2").on('click', function() { 14 var dizhi1 = $("#ostart").val(); 15 var dizhi2 = $("#oend").val(); 16 // var url = "http://restapi.amap.com/v3/geocode/geo?address=" + dizhi1 + "|" + dizhi2 + "&output=JSON&key=3eac2241aca3b6f67079173fe3f3b8ec&batch=true"; 17 var url1 = "http://restapi.amap.com/v3/geocode/geo"; 18 $.post(url1, { 19 address: dizhi1 + '|' + dizhi2, 20 output: 'JSON', 21 key: '3eac2241aca3b6f67079173fe3f3b8ec', 22 batch: true 23 }, function(data) { 24 $("#ospan").html(data.geocodes[0].location); 25 $("#osend").html(data.geocodes[1].location); 26 }); 27 }); 28 // 根据经纬度计算起始点和结束点的距离 29 $("#btn").on('click', function() { 30 var st = $("#ospan").html(); 31 var ed = $("#osend").html(); 32 var url2 = "http://restapi.amap.com/v3/distance?origins=" + st + "&destination=" + ed + "&output=json&key=3eac2241aca3b6f67079173fe3f3b8ec&type=1" 33 $.get(url2, {}, function(data) { 34 $("#distance").html(data.results[0].distance); 35 }); 36 }); 37 $("#btn1").on('click', function() { 38 $("#ostart").val(''); 39 $("#oend").val(''); 40 $("#ospan").html(''); 41 $("#osend").html(''); 42 $("#distance").html(''); 43 }); 44 }); 45 </script> 46 </head> 47 <body> 48 <input type="button" id="btn2" value="获取经纬度"> 49 <input type="button" id="btn" value="显示距离"> 50 <input type="button" id="btn1" value="清空"> 51 <p>起始地:<input type="text" value="" id="ostart"><span id="ospan"></span></p> 52 <p>结束地:<input type="text" value="" id="oend"><span id="osend"></span></p> 53 <p>两地距离:<span class="distance" id="distance"></span>米</p> 54 </body> 55 </html>
运行结果:
后记:
隔几个月后(2018/7/5日),我想,有没有可能不用先点击获取经纬度按钮,直接获取距离呢,这样想后,就需要把获取经纬度加载到第二个按钮中来了,我试了一下,不能写在回调函数外面,只能写在回调函数里面,想了一下,因为回调函数是ajax 请求,是异步处理机制,而写在回调函数外面的话,是同步处理机制,同步执行的时间比异步要早,所以不行,写在回调函数中就可以了,如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 9 <script src=""></script> 10 </script> 11 <title>Document</title> 12 <script> 13 $(function () { 14 15 // 根据经纬度计算起始点和结束点的距离 16 $("#btn").on('click', function () { // 选择框将触发事件改为change 即可 17 18 var dizhi1 = $("#ostart").val(); // 起始地点城市 19 var dizhi2 = $("#oend").val(); // 结束地点城市 20 var Odistance = 0; //定义两地距离变量 21 var url1 = "http://restapi.amap.com/v3/geocode/geo"; 22 $.post(url1, { 23 address: dizhi1 + '|' + dizhi2, 24 output: 'JSON', 25 key: '3eac2241aca3b6f67079173fe3f3b8ec', 26 batch: true 27 }, function (data) { 28 var st = data.geocodes[0].location, 29 ed = data.geocodes[1].location; 30 var url2 = "http://restapi.amap.com/v3/distance?origins=" + st + 31 "&destination=" + ed + 32 "&output=json&key=3eac2241aca3b6f67079173fe3f3b8ec&type=1" 33 $.get(url2, {}, function (data) { 34 $("#distance").html(data.results[0].distance); 35 Odistance = data.results[0].distance; 36 37 }); 38 }); 39 40 }); 41 42 43 $("#btn1").on('click', function () { 44 $("#ostart").val(''); 45 $("#oend").val(''); 46 $("#distance").html(''); 47 }); 48 }); 49 </script> 50 </head> 51 52 <body> 53 <input type="button" id="btn" value="显示距离"> 54 <input type="button" id="btn1" value="清空"> 55 <p>起始地: 56 <input type="text" value="" id="ostart"> 57 58 </p> 59 <p>结束地: 60 <input type="text" value="" id="oend"> 61 </p> 62 <p>两地距离: 63 <span class="distance" id="distance"></span>米</p> 64 </body> 65 66 </html>
运行结果:结果OK