從零開始的HTML5之旅（六）

時間 2020-03-26

標籤開始 html5 html 之旅欄目 HTML5 简体版

原文原文鏈接

HTML5地理定位

HTML5 Geolocation（地理定位）用於定位用戶的位置。鑑於該特性可能侵犯用戶的隱私，除非用戶贊成，不然用戶位置信息是不可用的。

html

瀏覽器支持

IE九、Firefox、Chrome、Safari以及Opera支持地理定位。對於擁有GPS的設備，定位將更加準確。

html5

地理定位

用getCurrentPosition()方法得到用戶的位置。
git

getCurrentPosition(successCallback, errorCallback,PositionOptions);

``getCurrentPosition()方法內包含了三個對象，分別是successCallback對象、errorCallback對象、PositionOptions`對象。

json

`successCallback`對象

successCallback對象表示獲取到的用戶數據位置。此對象包含了coords和timestamp兩個屬性。
瀏覽器

`coords`屬性

值	描述
accuracy	精確度
latitude	緯度
longitude	經度
altitude	海拔
altitudeAcuracy	海拔高度的精確度
heading	朝向
speed	速度

代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo1">此處顯示座標</p>
    <button onclick="getLocation()">獲取座標</button>
</body>

</html>

<script>
    var d1 = document.getElementById("demo1");

    function getLocation() {
        //檢測是否支持地理定位
        if (navigator.geolocation) {
            /*
            運行getCurrentPosition()方法。若是運行成功，
            則向參數showPosition中規定的函數返回一個coordinates對象
            */
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            d1.innerHTML = "沒法獲取您的位置";
        }
    }

    function showPosition(position) {
        /*
        經過coordinates對象獲取到latitude屬性和longitude屬性
        */
        d1.innerHTML = "維度：" + position.coords.latitude + "<br />" + "經度：" + position.coords.longitude;
    }
</script>

`errorCallback`對象

errorCallback對象表示返回的錯誤代碼。對象中包含了message屬性和code屬性。
網絡

`code`屬性

值	描述
unknow_error	表示不包括在其餘錯誤代碼中的錯誤，能夠在message中查找信息。
permission_denied	表示用戶拒絕瀏覽器獲取位置信息的請求。
position unavalablf	表示網絡不可用或者鏈接不到衛星。
timeout	表示獲取超時時。必須在options中指定了timeout值時纔有可能發生這種錯誤。

代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo1">此處顯示座標</p>
    <button onclick="getLocation()">獲取座標</button>
</body>

</html>

<script>
    var d1 = document.getElementById("demo1");

    function getLocation() {
        //檢測是否支持地理定位
        if (navigator.geolocation) {
            /*
            運行getCurrentPosition()方法。若是運行成功，
            則向參數showPosition中規定的函數返回一個coordinates對象
            運行getCurrentPosition()方法的第二個參數用於處理錯誤，
            它規定了獲取用戶位置失敗時運行的函數
            在getCurrentPosition()方法運行成功後會向showError函數返回一個errorCallback對象。
            errorCallback對象表示返回的錯誤代碼
            */
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
            d1.innerHTML = "沒法獲取您的位置";
        }
    }

    function showPosition(position) {
        /*
        經過coordinates對象獲取到latitude屬性和longitude屬性
        */
        d1.innerHTML = "維度：" + position.coords.latitude + "<br />" + "經度：" + position.coords.longitude;
    }

    function showError(error) {
        /*
        error.code獲取errorCallback對象中的code屬性。
        code屬性中有四個值，以下
        */
        switch (error.code) {
            case error.PERMISSION_DENIED: //用戶不容許定位
                d1.innerHTML = "用戶拒絕了地理位置定位請求。";
                break;
            case error.POSITION_UNAVAILABLE:  //沒法獲取當前位置
                d1.innerHTML = "位置信息不可用。";
                break;
            case error.TIMEOUT:  //超時
                d1.innerHTML = "獲取用戶位置的請求超時。";
                break;
            case error.UNKNOWN_ERROR:  //未知錯誤
                d1.innerHTML = "出現未知錯誤。";
                break;
        }
    }
</script>

`PositionOptions`屬性

PositionOptions接口不繼承任何屬性。數據格式爲json，有3個屬性。
函數

屬性	描述
enableHighAcuracy	布爾值，表示是否啓用高精確度模式，若是啓用這個模式，瀏覽器在獲取位置信息時可能須要耗費更多的時間。
Timeout	整數，表示瀏覽器須要在指定的時間內獲取位置信息，不然觸發errorCallback。
maximumAge	整數/常量，表示瀏覽器從新獲取位置信息的時間間隔。

`getCurrentPosition()`方法

若成功，則 getCurrentPosition() 方法返回對象。始終會返回 latitude、longitude 以及 accuracy 屬性。若是可用，則會返回其餘下面的屬性。code

屬性	描述
coords.latitude	十進制數的緯度
coords.longitude	十進制數的經度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米計
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，從正北開始以度計
coords.speed	速度，以米/每秒計
timestamp	響應的日期/時間