ホームページ > 記事 > ウェブフロントエンド > HTML5 ガイド (4) - Geolocation の使用方法の詳細な説明

HTML5 ガイド (4) - Geolocation の使用方法の詳細な説明

黄舟オリジナル: 2017-03-22 16:09:341590ブラウズ

今日学習するのは、Geolocation を使用して測位機能を実装することです。 Geolocation オブジェクトは、次のメソッドを提供する navigator.geolocation を通じて取得できます。

getCurrentPosition(callback, errorCallback, options): 現在の位置を取得します。

watchPosition(callback, error, options): 現在の位置の監視を開始します。

clearWatch (id): 現在位置の監視を停止します。

注: 以下の例で使用されているブラウザは chrome です。他のブラウザを使用している場合、実行結果が例で表示される結果と一致することは保証できません。

1. 現在位置を取得する

現在位置を取得するには、位置情報が直接結果として返されるわけではなく、コールバック関数を使用する必要があります。。座標の取得には時間がかかるため、アクセス許可を求められます。次の例を見てみましょう:

<!DOCTYPE HTML><html><head>
    <title>Example</title>
    <style>
        table{border-collapse: collapse;}
        th, td{padding: 4px;}
        th{text-align: right;}
    </style></head><body>
    <table border="1">
        <tr>
            <th>Longitude:</th>
            <td id="longitude">-</td>
            <th>Latitude:</th>
            <td id="latitude">-</td>
        </tr>
        <tr>
            <th>Altitude:</th>
            <td id="altitude">-</td>
            <th>Accuracy:</th>
            <td id="accuracy">-</td>
        </tr>
        <tr>
            <th>Altitude Accuracy:</th>
            <td id="altitudeAccuracy">-</td>
            <th>Heading:</th>
            <td id="heading">-</td>
        </tr>
        <tr>
            <th>Speed:</th>
            <td id="speed">-</td>
            <th>Time Stamp:</th>
            <td id="timestamp">-</td>
        </tr>
    </table>
    <script>
        navigator.geolocation.getCurrentPosition(displayPosition);        
        function displayPosition(pos) {            
        var properties = [&#39;longitude&#39;, &#39;latitude&#39;, &#39;altitude&#39;, &#39;accuracy&#39;, &#39;altitudeAccuracy&#39;, &#39;heading&#39;, &#39;speed&#39;];            
        for (var i = 0, len = properties.length; i < len; i++) {                
        var value = pos.coords[properties[i]];
                document.getElementById(properties[i]).innerHTML = value;
               
            }
            document.getElementById(&#39;timestamp&#39;).innerHTML = pos.timestamp;
        }    </script></body></html>

返された位置オブジェクトには 2 つの

プロパティが含まれています。 coords: 座標情報を返します。 timestamp: 座標情報が取得された時刻です。その中で、座標には次の属性が含まれます: 緯度: 緯度、経度: 高度、精度: 高度精度 (メートル)、速度: 移動速度2番目）。

ブラウザをホストしているデバイスによっては、すべての情報が返されるわけではありません。 GPS、加速度計、コンパスを備えたモバイルデバイスはほとんどの情報を返しますが、家庭用コンピュータは返しません。自宅のコンピュータが取得する位置情報は、ネットワーク環境やw

ifiに依存します。上の例の結果を見てみましょう。

「許可」をクリックして座標情報を取得します。

2. 例外の処理

次に、errorCallback

コールバック関数を使用して実装される getCurrentPosition の例外処理を紹介します。関数によって返されるパラメーター error には、code: error type code、message: error message という 2 つの属性が含まれます。コードには 3 つの値が含まれています: 1: ユーザーは地理位置情報を使用する権限がありません。 2: 座標情報を取得できません。 3: 情報を取得するためのタイムアウトです。

例を見てみましょう:

<!DOCTYPE HTML><html><head>
    <title>Example</title>
    <style>
        table{border-collapse: collapse;}
        th, td{padding: 4px;}
        th{text-align: right;}
    </style></head><body>
    <table border="1">
        <tr>
            <th>Longitude:</th>
            <td id="longitude">-</td>
            <th>Latitude:</th>
            <td id="latitude">-</td>
        </tr>
        <tr>
            <th>Altitude:</th>
            <td id="altitude">-</td>
            <th>Accuracy:</th>
            <td id="accuracy">-</td>
        </tr>
        <tr>
            <th>Altitude Accuracy:</th>
            <td id="altitudeAccuracy">-</td>
            <th>Heading:</th>
            <td id="heading">-</td>
        </tr>
        <tr>
            <th>Speed:</th>
            <td id="speed">-</td>
            <th>Time Stamp:</th>
            <td id="timestamp">-</td>
        </tr>
        <tr>
            <th>Error Code:</th>
            <td id="errcode">-</td>
            <th>Error Message:</th>
            <td id="errmessage">-</td>
        </tr>
    </table>
    <script>
        navigator.geolocation.getCurrentPosition(displayPosition, handleError);        
        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;
        }    </script></body></html>

認証が拒否されました、実行結果:

3. 地理位置情報のオプションパラメータを使用します

getCurrentPosition(callback, errorCallback, options) のオプションは次のとおりです。使用する場合、enableHighAccuracy: 最適な効果を使用します。timeout: タイムアウト時間 (ミリ秒)、maximumAge:

キャッシュ時間 (ミリ秒) を指定します。次の例を見てみましょう:

<!DOCTYPE HTML><html><head>
    <title>Example</title>
    <style>
        table{border-collapse: collapse;}
        th, td{padding: 4px;}
        th{text-align: right;}
    </style></head><body>
    <table border="1">
        <tr>
            <th>Longitude:</th>
            <td id="longitude">-</td>
            <th>Latitude:</th>
            <td id="latitude">-</td>
        </tr>
        <tr>
            <th>Altitude:</th>
            <td id="altitude">-</td>
            <th>Accuracy:</th>
            <td id="accuracy">-</td>
        </tr>
        <tr>
            <th>Altitude Accuracy:</th>
            <td id="altitudeAccuracy">-</td>
            <th>Heading:</th>
            <td id="heading">-</td>
        </tr>
        <tr>
            <th>Speed:</th>
            <td id="speed">-</td>
            <th>Time Stamp:</th>
            <td id="timestamp">-</td>
        </tr>
        <tr>
            <th>Error Code:</th>
            <td id="errcode">-</td>
            <th>Error Message:</th>
            <td id="errmessage">-</td>
        </tr>
    </table>
    <script>
        var options = {
            enableHighAccuracy: false,
            timeout: 2000,
            maximumAge: 30000
        };
        navigator.geolocation.getCurrentPosition(displayPosition, handleError, options);        
        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;
        }    </script></body></html>

4. 位置の変化を監視する

次に、位置の変化を監視するための watchPosition メソッドの使用方法を紹介します。その使用法は getCurrentPosition と同じです。例を見てみましょう:

<!DOCTYPE HTML><html><head>
    <title>Example</title>
    <style>
        table{border-collapse: collapse;}
        th, td{padding: 4px;}
        th{text-align: right;}
    </style></head><body>
    <table border="1">
        <tr>
            <th>Longitude:</th>
            <td id="longitude">-</td>
            <th>Latitude:</th>
            <td id="latitude">-</td>
        </tr>
        <tr>
            <th>Altitude:</th>
            <td id="altitude">-</td>
            <th>Accuracy:</th>
            <td id="accuracy">-</td>
        </tr>
        <tr>
            <th>Altitude Accuracy:</th>
            <td id="altitudeAccuracy">-</td>
            <th>Heading:</th>
            <td id="heading">-</td>
        </tr>
        <tr>
            <th>Speed:</th>
            <td id="speed">-</td>
            <th>Time Stamp:</th>
            <td id="timestamp">-</td>
        </tr>
        <tr>
            <th>Error Code:</th>
            <td id="errcode">-</td>
            <th>Error Message:</th>
            <td id="errmessage">-</td>
        </tr>
    </table>
    <button id="pressme">Cancel Watch</button>
    <script>
        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;
        }    </script></body></html>

以上がHTML5 ガイド (4) - Geolocation の使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5ガイド(3) ～ドラッグ＆ドロップ機能の実装～次の記事：HTML5ガイド(3) ～ドラッグ＆ドロップ機能の実装～

続きを見る