HTML5 Geolocation 사용자 위치 찾기

HTML5 Geolocation 사용자 위치 찾기

HTML Geolocation API는 사용자의 위치를 ​​찾는 데 사용됩니다

사용자의 위치 찾기

HTML Geolocation API는 사용자의 지리적 위치를 가져 오는 데 사용됩니다.

이는 개인 정보를 침해 할 수 있으므로 사용자가 승인하지 않는 한 해당 위치를 사용할 수 없습니다.

참고 : Geolocation은 iPhone과 같이 GPS가있는 기기에서 가장 정확합니다.

HTML Geolocation 사용

getCurrentPosition () 메서드는 사용자의 위치를 ​​반환하는 데 사용됩니다.

아래 예제는 사용자 위치의 위도와 경도를 반환합니다.

<script>

var x = document.getElementById("demo");

function getLocation() {

    if (navigator.geolocation) {

        navigator.geolocation.getCurrentPosition(showPosition);

    } else {

        x.innerHTML = "Geolocation is not supported by this browser.";

    }

}

function showPosition(position) {

    x.innerHTML = "Latitude: " + position.coords.latitude + 

    "<br>Longitude: " + position.coords.longitude; 

}

</script>

예제 설명 :

1.Geolocation이 지원되는지 확인하십시오.

2.지원되는 경우 getCurrentPosition () 메소드를 실행하십시오. 그렇지 않은 경우 사용자에게 메시지를 표시합니다.

3.getCurrentPosition () 메서드가 성공하면 좌표 객체를 매개 변수 (showPosition)에 지정된 함수에 반환합니다.

4.showPosition () 함수는 위도와 경도를 출력합니다.

위의 예제는 오류 처리가없는 매우 기본적인 Geolocation 스크립트입니다.

오류 및 거부 처리

getCurrentPosition () 메서드의 두 번째 매개 변수는 오류를 처리하는 데 사용됩니다. 사용자의 위치를 ​​얻지 못하면 실행할 함수를 지정합니다.

function showError(error) {

    switch(error.code) {

        case error.PERMISSION_DENIED:

            x.innerHTML = "User denied the request for Geolocation."

            break;

        case error.POSITION_UNAVAILABLE:

            x.innerHTML = "Location information is unavailable."

            break;

        case error.TIMEOUT:

            x.innerHTML = "The request to get user location timed out."

            break;

        case error.UNKNOWN_ERROR:

            x.innerHTML = "An unknown error occurred."

            break;

    }

}

결과를지도에 표시

결과를지도에 표시하려면 Google지도와 같은지도 서비스에 액세스해야합니다.

아래 예제에서 반환 된 위도와 경도는 정적 이미지를 사용하여 Google지도에서 위치를 표시하는 데 사용됩니다.

function showPosition(position) {

    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=

    "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_:KEY";

    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";

}

위치 별 정보

이 페이지에서는지도에서 사용자의 위치를 ​​표시하는 방법을 보여줍니다.

Geolocation은 다음과 같이 위치 별 정보에도 매우 유용합니다.

1.최신 지역 정보

2.사용자 주변의 관심 지점 표시

3.단계별 탐색 (GPS)

getCurrentPosition () 메서드 - 데이터 반환

getCurrentPosition () 메소드는 성공시 오브젝트를 리턴합니다. 

위도, 경도 및 정확도 속성은 항상 반환됩니다. 가능한 경우 다른 속성이 반환됩니다.

Property Returns

coords.latitude The latitude as a decimal number (always returned)

coords.longitude The longitude as a decimal number (always returned)

coords.accuracy The accuracy of position (always returned)

coords.altitude The altitude in meters above the mean sea level (returned if available)

coords.altitudeAccuracy The altitude accuracy of position (returned if available)

coords.heading The heading as degrees clockwise from North (returned if available)

coords.speed The speed in meters per second (returned if available)

timestamp The date/time of the response (returned if available)

Geolocation 객체 - 기타 흥미로운 메소드

Geolocation 객체에는 다른 흥미로운 메소드가 있습니다.

watchPosition () - 사용자의 현재 위치를 반환하고 사용자가 이동할 때 계속 업데이트 된 위치를 반환합니다 (예 : 자동차의 GPS).

clearWatch () - watchPosition () 메서드를 중지합니다.

아래 예제는 watchPosition () 메소드를 보여줍니다. 이를 테스트하려면 정확한 GPS 장치가 필요합니다 (예 : iPhone).

<script>

var x = document.getElementById("demo");

function getLocation() {

    if (navigator.geolocation) {

        navigator.geolocation.watchPosition(showPosition);

    } else {

        x.innerHTML = "Geolocation is not supported by this browser.";

    }

}

function showPosition(position) {

    x.innerHTML = "Latitude: " + position.coords.latitude + 

    "<br>Longitude: " + position.coords.longitude; 

}

</script>