• HTML5-Geolocation获取经纬度及计算当前位置到目标位置距离


    不多说,直接上代码

    <!Doctype html>
    <html>
    <head>
    <meta charset=UTF-8">
    <title>获取地理信息</title>
    </head>
    
    <body>
            <div>navigator是window环境下的一个属性,包含了当前浏览器的一些信息数据</div>
            <div>geolocation,HTML5的新属性,是navigator对象的一个属性</div>
            <div>getCurrentPosition(getPositionSuccess, getPositionError, position_option)是geolocation下的一个方法,返回当前位置信息</div>
            <!--获取用户当前位置信息-->
            <script type="text/javascript">
                /*
                  navigator.geolocation.watchPosition(getposition); 
                  移动端使用,位置改变触发getposition 
                */
                getposition();
                function getposition(){        //获取位置信息
                    if(navigator.geolocation){
                         /* 
                            position_option配置navigator.geolocation.getCurrentPosition方法参数
                        */
                          var position_option = {
                                  enableHighAccuracy: true,            //是否使用高精度设备获取值,gps>wifi>ip
                                  maximumAge: 30000,            //表示浏览器重新获取位置信息的时间间隔
                                  timeout: 5000        //设定请求超时时间
                              };
                          /*
                              调用navigator.geolocation.getCurrentPosition方法可获取用户当前位置,该方法有三个参数:
                              获取成功后回调函数,并传入一个position值
                              获取失败后回调函数,并传入error信息
                              配置项:json格式,enableHighAccuracy,maximumAge,timeout三个参数配置
                          */
                          navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, position_option);
                    }else{
                        alert("很抱歉,您的设备不支持地理定位!")
                    }
                          
                }
                      
                /* 
                    成功后回调函数getPositionSuccess( position ),position为成功后返回信息对象
                */
                
                function getPositionSuccess(position){
                    var lat = position.coords.latitude;            //获取纬度
                    var lng = position.coords.longitude;        //获取经度
                    /* 
                        positiion对象比较少用到的属性
                        timestamp返回当前位置创建时间的时间戳
                        
                        coords.accuracy    位置精度
                        coords.altitude    海拔,海平面以上以米计
                        coords.altitudeAccuracy    位置的海拔精度
                        coords.heading    方向,从正北开始以度计
                        coords.speed    速度,以米/每秒计
                    */
                    
                    alert( "您所在的位置: 纬度" + lat + ",经度" + lng );
                    if(typeof position.address !== "undefined"){        //判断是position对象是否有address属性,有则输出address信息
                            var country = position.address.country;
                            var province = position.address.region;
                            var city = position.address.city;
                            alert(' 您位于 ' + country + province + '' + city +'');
                    }
                    
                    if(lat != '' && lng != ''){        //判断,如果经纬度不等于空则计算两个位置间的距离
                        alert(distance(lat,lng,23.137004,113.301858)+"");
                    } 
                }
                
                /* 
                    失败后回调函数getPositionError(error),error为失败后返回信息
                */
                function getPositionError(error){
                    /* 
                        error.message为返回错误信息,建议自定义
                        error.code为返回错误提示码
                    */
                    switch (error.code) {        
                        case error.TIMEOUT:
                            alert("连接超时,请重试");
                            break;
                        case error.PERMISSION_DENIED:
                            alert("您拒绝了使用位置共享服务,查询已取消");
                            break;
                        case error.POSITION_UNAVAILABLE:
                            alert("获取位置信息失败");
                            break;
                        case error.UNKNOW_ERROR:
                            alert("其它错误");
                            break;
                    }
                }
                
                function distance(lat,lng,goalLat,goalLng){            //传入位置纬度,经度和目标纬度,经度,返回距离值,单位米,对地理感兴趣的童鞋可以去研究下计算公式
                    var EARTH_RADIUS = 6378.137;//地球赤道半径
                    if(lat != '' && lng != '' && goalLat != '' && goalLng != ''){
                           var radLat1 = rad(goalLat);
                           var radLat2 = rad(lat);
                          var a = radLat1 - radLat2;
                          var b = rad(goalLng) - rad(lng);
                          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)));
                          s = s * EARTH_RADIUS;
                           s = Math.round(s * 10000) / 10000;
                           return s*1000;
                    }else{
                        return 0;
                    }
                    function rad(d){
                       return d * Math.PI / 180.0;
                    }
                }
            </script>
            <!-- 
                    获取经纬度查询计算距离存在误差,现测试范围在100米以内,获取目标经纬度建议直接前往目标地点获取目标经纬度
                    使用地图获取经纬度可使用谷歌全球,经测试与本人机子GPS获取的经纬度误差最小
                    中国经度范围:73°33′E至135°05′E
                    中国纬度范围:3°51′N至53°33′N
                    计算公式,纬度在前经度在后
                    百度地图经纬度获取坑,经度放前面,纬度放后面
             -->
             <!-- 
                     经测试发现PC端浏览器无法获取经纬度,原因不明,正努力翻资料中,求解惑
              -->
    </body>
    </html>

    博客:http://www.cnblogs.com/alex-web/

    注:小疯纸的yy

  • 相关阅读:
    【架构】如何设计支持多租户的数据库?
    maven的仓库:本地和远程
    maven私服
    MSA(微服务简介)
    json数据的格式
    shiro的原理理解
    异构的概念?大数据量的异构处理?
    面试之多线程通信
    面试之并发的解决方案
    进程与线程的简单理解
  • 原文地址:https://www.cnblogs.com/alex-web/p/5060858.html
Copyright © 2020-2023  润新知