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

很少說,直接上代碼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>

 

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

注:小瘋紙的yyjava

相關文章
相關標籤/搜索