Notes for a front-end developer, esyou.net

0%

JAVASCRIPT按照经纬度坐标对比与目的地的距离

发表于 分类于 Valine：
本文字数： 3.5k 阅读时长 ≈ 3 分钟

在开发中可能现在很多都在使用地图定位，而无需在进行复杂的计算距离的方法，因为计算已经被地图给代替了，我们也就不需要再进行坐标到坐标的距离计算了，但是当你只是想使用距离而不想使用地图的时候，你就得进行坐标计算了，这不我在一个项目中就遇到这样的问题，根据手机获取当前地理位置的坐标，然后再与目的地坐标（已知坐标）进行计算，并且得到距离，当然也可以实时更新手机坐标以获得最准确的距离。
下面我们直接看代码吧！

1
<!Doctype html>
2
<html>
3
<head>
4
<meta charset=UTF-8">
5
<title>获取地理信息</title>
6
</head>
7
8
<body>
9
        <div>navigator是window环境下的一个属性，包含了当前浏览器的一些信息数据</div>
10
        <div>geolocation，HTML5的新属性，是navigator对象的一个属性</div>
11
        <div>getCurrentPosition(getPositionSuccess, getPositionError, position_option)是geolocation下的一个方法，返回当前位置信息</div>
12
        <!--获取用户当前位置信息-->
13
        <script type="text/javascript">
14
            /*
15
              navigator.geolocation.watchPosition(getposition);
16
              移动端使用，位置改变触发getposition
17
            */
18
            getposition();
19
            function getposition(){        //获取位置信息
20
                if(navigator.geolocation){
21
                     /*
22
                        position_option配置navigator.geolocation.getCurrentPosition方法参数
23
                    */
24
                      var position_option = {
25
                              enableHighAccuracy: true,            //是否使用高精度设备获取值，gps>wifi>ip
26
                              maximumAge: 30000,            //表示浏览器重新获取位置信息的时间间隔
27
                              timeout: 5000        //设定请求超时时间
28
                          };
29
                      /*
30
                          调用navigator.geolocation.getCurrentPosition方法可获取用户当前位置，该方法有三个参数：
31
                          获取成功后回调函数，并传入一个position值
32
                          获取失败后回调函数，并传入error信息
33
                          配置项：json格式，enableHighAccuracy，maximumAge，timeout三个参数配置
34
                      */
35
                      navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, position_option);
36
                }else{
37
                    alert("很抱歉，您的设备不支持地理定位！")
38
                }
39
                     
40
            }
41
                 
42
            /*
43
                成功后回调函数getPositionSuccess( position )，position为成功后返回信息对象
44
            */
45
           
46
            function getPositionSuccess(position){
47
                var lat = position.coords.latitude;            //获取纬度
48
                var lng = position.coords.longitude;        //获取经度
49
                /*
50
                    positiion对象比较少用到的属性
51
                    timestamp返回当前位置创建时间的时间戳
52
                   
53
                    coords.accuracy    位置精度
54
                    coords.altitude    海拔，海平面以上以米计
55
                    coords.altitudeAccuracy    位置的海拔精度
56
                    coords.heading    方向，从正北开始以度计
57
                    coords.speed    速度，以米/每秒计
58
                */
59
               
60
                alert( "您所在的位置： 纬度" + lat + "，经度" + lng );
61
                if(typeof position.address !== "undefined"){        //判断是position对象是否有address属性，有则输出address信息
62
                        var country = position.address.country;
63
                        var province = position.address.region;
64
                        var city = position.address.city;
65
                        alert(' 您位于 ' + country + province + '省' + city +'市');
66
                }
67
               
68
                if(lat != '' && lng != ''){        //判断，如果经纬度不等于空则计算两个位置间的距离
69
                   alert(distance(lat,lng,23.137004,113.301858)+"米");
70
                }
71
            }
72
           
73
            /*
74
                失败后回调函数getPositionError(error)，error为失败后返回信息
75
            */
76
            function getPositionError(error){
77
                /*
78
                    error.message为返回错误信息，建议自定义
79
                    error.code为返回错误提示码
80
                */
81
                switch (error.code) {        
82
                    case error.TIMEOUT:
83
                        alert("连接超时，请重试");
84
                        break;
85
                    case error.PERMISSION_DENIED:
86
                        alert("您拒绝了使用位置共享服务，查询已取消");
87
                        break;
88
                    case error.POSITION_UNAVAILABLE:
89
                        alert("获取位置信息失败");
90
                        break;
91
                    case error.UNKNOW_ERROR:
92
                        alert("其它错误");
93
                        break;
94
                }
95
            }
96
           
97
            function distance(lat,lng,goalLat,goalLng){            //传入位置纬度，经度和目标纬度，经度，返回距离值，单位米，对地理感兴趣的童鞋可以去研究下计算公式
98
                var EARTH_RADIUS = 6378.137;//地球赤道半径
99
                if(lat != '' && lng != '' && goalLat != '' && goalLng != ''){
100
                      var radLat1 = rad(goalLat);
101
                       var radLat2 = rad(lat);
102
                      var a = radLat1 - radLat2;
103
                      var b = rad(goalLng) - rad(lng);
104
                      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
105
                      s = s * EARTH_RADIUS;
106
                       s = Math.round(s * 10000) / 10000;
107
                       return s*1000;
108
                }else{
109
                    return 0;
110
                }
111
                function rad(d){
112
                   return d * Math.PI / 180.0;
113
                }
114
            }
115
        </script>
116
        <!--
117
               获取经纬度查询计算距离存在误差，现测试范围在100米以内，获取目标经纬度建议直接前往目标地点获取目标经纬度
118
               使用地图获取经纬度可使用谷歌全球，经测试与本人机子GPS获取的经纬度误差最小
119
               中国经度范围:73°33′E至135°05′E
120
               中国纬度范围:3°51′N至53°33′N
121
               计算公式，纬度在前经度在后
122
               百度地图经纬度获取坑，经度放前面，纬度放后面
123
        -->
124
         <!--
125
                经测试发现PC端浏览器无法获取经纬度，原因不明，正努力翻资料中，求解惑
126
         -->
127
</body>
128
</html>