HTML5-Geolocation獲取經緯度及計算當前位置到目標位置距離

時間 2019-11-11
標籤 html5 html geolocation 獲取經緯度計算當前位置目標距離欄目 HTML5 简体版
原文原文鏈接
很少說，直接上代碼javascript
<!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>