지리적 위치를 사용한 HTML5 코드 공유-H5 튜토리얼-php.cn

지리적 위치를 사용한 HTML5 코드 공유

黄舟

풀어 주다： 2017-03-15 16:03:08

원래의

1701명이 탐색했습니다.

1) 위치정보 사용:

navigator.geolocation을 통해 위치정보 기능에 액세스하고 Geo위치 개체 를 반환합니다. >

1.1) Geolocation 객체 멤버:

get

CurrentPosition(callback ,errorCallback,options)——현재 위치 가져오기;

watchPosition(callback,error,options)——현재 위치 모니터링 시작;

clearWatch(id) - 현재 위치 모니터링 중지

1.1.1) 브라우저가 콜백을 호출합니다

getCurrentPosition 함수 매개변수가 전달되면 위치 세부정보를 제공하는 위치 개체가 전달됩니다.

~ ~ >s——현재 위치의 좌표, 즉 Coordinates 객체를 반환합니다.

>stamp——좌표 정보를 얻은 시간을 반환합니다. >

위도——10진수로 표현된 위도를 반환합니다.

longitude——10진수로 표시된 경도를 반환합니다.

고도——미터로 표시된 고도를 반환합니다. 🎜>

정확도 ——미터로 표현된 좌표 정확도를 반환합니다.

고도 정확도 - 미터로 표현된 고도 정확도를 반환합니다. heading — — 반환 이동 방향(도)

속도 — 이동 속도를 초당 미터 단위로 반환합니다.

2) 위치정보 오류 처리:

함수를 지정할 수 있게 해주는 getCurrentPosition(callback,errorCallback,options) 메소드의 두 번째 매개변수입니다. 위치를 조회하는 중 오류가 발생하면 호출됩니다. 이 함수는 PositionError 객체를 얻습니다.

PositionError 객체 멤버:

code - 오류 유형을 나타내는 코드를 반환합니다.

=1——사용자는 지리적 위치 기능을 사용할 권한이 없습니다. =2——위치를 결정할 수 없습니다. =3 - 위치 요청 시도 시간이 초과되었습니다.

메시지——오류를 설명하는 문자열을 반환합니다. 🎜>3) 지역 타겟팅 옵션 지정:

getCurrentPosition(callback, errorCallback, options) 메소드에서 제공하는 세 번째 매개변수는 PositionOptions 객체입니다.

PositionOptions 개체의 구성원:

활성화HighAccuracy - 가능한 최상의 결과를 원한다고 브라우저에 알립니다.

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