HTML5新特性之一:Geolocation(一)


  首先要了解地理位置(Geolocation)的表示方法有兩種:

  • 度數表示法(degrees/minutes/seconds)例如(47°38'34'',122°32'32'')
  • 小數(decimal value)表示法 例如(47.64,-122.54)

  兩種方法都是表示緯度(latitude)和經度(longitude)的,在Geolocation API中通常使用第二種方法,可以用一個函數進行轉換。

funtion degreesToDecimal(degree,minutes,seconds){
    return degrees+(minutes/60.0)+(seconds/3600.0);
}

 

 

  1.  調用Geolocation API顯示出經緯度

    在HTML中定義了<div>元素

 

<div id="location">
 <!-- 之后這里會被代替為你的地理位置 --> 
Your location will go here.    
</div>

 

     接下來寫我們的javascript代碼來調用Geolocation API

window.onload = getMyLocation; 
/* 
    window.onload表示等HTML加載完成並構建好DOM后執行某個函數
*/
function getMyLocation(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(displayLocation);
}
    else {
        alert("Oops,no geolocation support")
}

  geolocation的方法:

  • void navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)   
  • long navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)      
  • void navigator.geolocation.clearWatch(watch_position_id)  

  position_options為帶有3個參數的JSON形式的字符串

  enableHighAccuracy:boolean值(true|false),指示設備,你需要獲得它的最精確的讀數,硬件不同此參數可能會有些差別。

  maximumAge:最大的生命周期,以毫秒為單位;這么做是恰如其分的,因為設備可能會緩存數據,以便節省電源和帶寬。

  timeout:獲取地理位置請求最大的等待時間,單位毫秒。

 

  success_callback_function(回調函數) 接收一個 position 對象作為參數,該對象有以下屬性:

  coords.latitude – 當前的緯度
  coords.longitude – 當前的經度
  coords.accuracy – 當前經緯度的精准度(米)
  coords.speed – 當前每秒的行進速度 (可以乘以2.2369轉換到 英里/小時 或乘以3.6轉換到 公里/小時 )
  coords.altitude – 當前的海拔(米)
  coords.altitudeAccuracy – 當前海拔的精准度(米)

function displayLocation(position){
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    var div = document.getElementById("location");
    div.innerHTML = "You are at Latitude: "+latitude+", Longitude: "+longitude;
}

  2.處理錯誤和拒絕

  getCurrentPosition() 方法的第二個參數用於處理錯誤。它規定當獲取用戶位置失敗時運行的函數:

   如果要加入錯誤處理,需要對前一段代碼進行改動

navigator.geolocation.getCurrentPosition(displayLocation,displayError)
function display(error)
  {
 var div = document.getElementById("Location")
switch(error.code) { case error.PERMISSION_DENIED: div.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: div.innerHTML="Location information is unavailable." break; case error.TIMEOUT: div.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: div.innerHTML="An unknown error occurred." break; } }

  3. 計算兩個位置之間的距離

  通過computeDistance函數進行計算,並返回一個int型的值。

function computeDistance(startCoords, destCoords) {
    var startLatRads = degreesToRadians(startCoords.latitude);
    var startLongRads = degreesToRadians(startCoords.longitude);
    var destLatRads = degreesToRadians(destCoords.latitude);
    var destLongRads = degreesToRadians(destCoords.longitude);

    var Radius = 6371; // radius of the Earth in km
    var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + 
                    Math.cos(startLatRads) * Math.cos(destLatRads) *
                    Math.cos(startLongRads - destLongRads)) * Radius;

    return distance;
}

function degreesToRadians(degrees) {
    radians = (degrees * Math.PI)/180;
    return radians;
}

 

    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM