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

 

posted on 2018-03-24 16:34  huanying2015  阅读(7676)  评论(0编辑  收藏  举报