html5之使用地理定位的程式碼分享

1)使用地理定位：

  透過navigator.geolocation存取地理定位功能，傳回一個Geolocation物件;

##  1.1）Geolocation物件成員：

       getCurrent

       getCurrent#Position

(c

all##back, errorCallback,options)——取得目前位置；

       watchPosition(callback,error,options)－開始監控目前位置； ##       clearWatch(id)－停止監控目前位置；

  1.1.1）瀏覽器呼叫getCurrentPosition的callback函數的當參數時，會傳入一個提供位置細節的position物件；

        position物件成員：

##        coords－回到目前位置的座標，即Coordinates物件；

        time

##H之一之一stamp－傳回取得座標資訊的時間；

        

Coordinates物件成員：

############################### #########        latitude－返回十進位表示的緯度；#########################        lon####git#########        lon####git#########        lon####git######### #ude－傳回以十進位表示的經度；########################        altitude－以米表示的海拔高度傳回；#### ####################        accuracy－傳回以公尺表示的座標精確度；################### #####        altitudeAccuracy－返回以公尺表示的海拔精確度；#######################        ###head###返回以度表示的行進方向；#########################        speed－傳回以公尺/秒錶示的行進速度；##### ###################2）處理地理定位錯誤：############

   getCurrentPosition(callback,errorCallback,options)方法的第二個參數，它讓我們可以指定一個函數，在獲    取位置發生錯誤時呼叫它。此函數會獲得一個PositionError物件；

   PositionError物件成員：

   code－傳回代表錯誤類型的程式碼；

       =1－使用者未經授權使用地理定位功能；

##       =2－無法確定位置；

       =3－請求位置的嘗試已逾時；

  message－傳回描述錯誤的字串;

#3）指定地理定位選項：

   getCurrentPosition(callback,errorCallback,options)方法提供的第三個參數是一個PositionOptions物件。

#  PositionOptions物件的成員：

#################################################################################### ######   enableHighAccuracy－告訴瀏覽器我們希望得到可能的最佳結果；########################

#  timeout－限制請求位置的事件，設定多少毫秒後會報告一個逾時錯誤；

##  maximumAge－告訴瀏覽器我們願意接受快取過的位置，只要它不早於指定的毫秒數；

4）監控位置：

   watchPosition方法不斷獲得關於位置的更新。所需參數與getCurrentPosition方法相同，運作方式也一樣。

#   差異在於：隨著位置改變，回呼函數會被重複地呼叫。 # 

######## ######################

       table{
           border-collapse: collapse;
       }
        th,td{
            padding: 4px;
        }
        th{
            text-align: right;
        }

    <table border="1">
        <tr>
            <th>经度：</th><td id="longitude">-</td>
            <th>纬度：</th><td id="latitude">-</td>
        </tr>
        <tr>
            <th>海拔高度：</th><td id="altitude">-</td>
            <th>坐标精度：</th><td id="accuracy">-</td>
        </tr>
        <tr>
            <th>海拔精度：</th><td id="altitudeAccuracy">-</td>
            <th>行进方向：</th><td id="heading">-</td>
        </tr>
        <tr>
            <th>速度：</th><td id="speed">-</td>
            <th>时间：</th><td id="timestamp">-</td>
        </tr>
        <tr>
            <th>错误类型:</th><td id="errcode">-</td>
            <th>错误信息</th><td id="errormessage">-</td>
        </tr>
    </table><pre name="code" class="html">    <button id="pressme">Cancel Watch</button>

        var options={
            enableHighAccuracy:false,
            timeout:2000,
            maximumAge:30000
        }
        var WatchID=navigator.geolocation.watchPosition(displayPosition,handleError,options)
        document.getElementById("pressme").onclick=function(e){
            navigator.geolocation.clearWatch(WatchID);
        }
        function displayPosition(pos){
            var properties=["longitude","latitude","altitude","accuracy","altitudeAccuracy","heading","speed"];
            for(var i=0;i<properties.length;i++){
                var value=pos.coords[properties[i]];
                document.getElementById(properties[i]).innerHTML=value;
            }
            document.getElementById("timestamp").innerHTML=pos.timestamp;
        }
        function handleError(err){
            document.getElementById("errcode").innerHTML=err.code;
            document.getElementById("errmessage").innerHTML=err.message;
        }

以上是html5之使用地理定位的程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！