首頁 > web前端 > H5教程 > 主體

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

黄舟
發布: 2017-03-15 16:03:08
原創
1657 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板