HTML5 가이드 (4) - Geolocation 사용에 대한 자세한 설명-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 가이드 (4) - Geolocation 사용에 대한 자세한 설명

黄舟

Mar 22, 2017 pm 04:09 PM

오늘 배울 내용은 Geolocation을 활용하여 위치 확인 기능을 구현하는 것입니다. 다음 메소드를 제공하는 navigator.geolocation을 통해 Geolocation 객체를 가져올 수 있습니다.

getCurrentPosition(callback,errorCallback,options): 현재 위치 가져오기

watchPosition(callback,error,options) ): 현재 위치 모니터링을 시작합니다.

clearWatch(id): 현재 위치 모니터링을 중지합니다.

참고: 아래 예시에 사용된 브라우저는 크롬입니다. 다른 브라우저를 사용하는 경우 실행 결과가 예시에 표시된 결과와 일치한다고 보장할 수 없습니다.

　1. 현재 위치 가져오기

현재 위치를 가져오기 위해 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>
    </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>

로그인 후 복사

반환된 위치 객체에는 두 개의 속성 이 포함되어 있습니다. coords: 좌표 정보를 반환합니다. 타임스탬프: 좌표 정보를 얻은 시간입니다. 그 중 좌표에는 다음 속성이 포함됩니다: 위도: 고도, 정확도: 고도 정확도(미터), 이동 속도(미터/ 두번째) .

브라우저를 호스팅하는 기기에 따라 모든 정보가 반환되지는 않습니다. GPS, 가속도계, 나침반이 장착된 모바일 장치는 대부분의 정보를 반환하지만 가정용 컴퓨터는 그렇지 않습니다. 집에 있는 컴퓨터에서 얻는 위치정보는 네트워크 환경이나 if에 따라 다릅니다. 위 예제의 결과를 살펴보겠습니다.

좌표 정보를 얻으려면 허용을 클릭하세요.

　2. 예외 처리

이제 getCurrentPosition의 예외 처리를 소개합니다. errorCallback을 사용하여 콜백 함수를 구현했습니다. 함수에서 반환된 오류 매개변수에는 코드: 오류 유형 코드, 메시지: 오류 메시지라는 두 가지 속성이 포함되어 있습니다. 코드에는 세 가지 값이 포함되어 있습니다. 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)의 옵션에는 사용할 수 있는 다음 매개변수가 있습니다. 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 메서드를 사용하여 위치 변경을 모니터링하는 방법을 소개합니다. . 예를 살펴보겠습니다.

<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.