Javascript - 실시간으로 위치를 확인하는 Geolocation의 사용 방법을 알아보자

프로그래밍/자바스크립트
2021. 12. 17.

자바스크립트를 통해 사용자의 위치 정보를 알아내는 방법은 Geolocation를 사용하는 것입니다. Geolocation API는 사용자의 현재 위치를 가져오는 API로 주로 사용자 위치를 지도에 표시할 때 사용하거나 사용자 위치 기반의 서비스를 제공하는 경우에 사용됩니다. 또한 사용자의 위치 데이터는 개인 정보와 관련되어 있기 때문에 사용자의 동의 없이는 사용할 수가 없습니다. 이번 글에서는 Geolocation을 이용해서 사용자의 위치를 일회성 혹은 실시간으로 확인하는 방법에 대해 알아보도록 하겠습니다.

사용자의 위치를 확인하는 방법

geolocation를 이용해 사용자의 위치를 확인하는 방법은 간단합니다. getCurrentPosition()을 이용해 성공, 실패 콜백 함수를 등록하면 됩니다. 사용자 위치 정보 요청에 성공하면 위치 정보(coords)와 정보 반환 시간(timestamp)을 반환합니다.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geolocation example - getCurrentPosition()</title>
</head>

<body>
    <script>
        function success({ coords, timestamp }) {
            const latitude = coords.latitude;   // 위도
            const longitude = coords.longitude; // 경도
            
            alert(`위도: ${latitude}, 경도: ${longitude}, 위치 반환 시간: ${timestamp}`);
            location.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
        }

        function getUserLocation() {
            if (!navigator.geolocation) {
                throw "위치 정보가 지원되지 않습니다.";
            }
            navigator.geolocation.getCurrentPosition(success);
        }

        getUserLocation();
    </script>
</body>

</html>

실시간으로 사용자의 위치를 확인하는 방법

실시간으로 사용자의 위치를 확인하는 방법은 watchPosition()를 사용하는 것입니다. 사용 방법은 getCurrentPosition()와 완전히 동일합니다. getCurrentPosition() 대신 watchPosition()을 사용해주세요. 사실 watchPosition()는 실시간으로 사용자의 위치를 반환하지 않습니다. 다만 사용자의 위치에 변화가 발생하면 호출되기 때문에 실시간으로 동작하는 것처럼 보일 뿐입니다.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geolocation example - watchPosition()</title>
</head>

<body>
    <script>
        function success({ coords, timestamp }) {
            const latitude = coords.latitude;   // 위도
            const longitude = coords.longitude; // 경도
            
            alert(`위도: ${latitude}, 경도: ${longitude}, 위치 반환 시간: ${timestamp}`);
        }

        function getUserLocation() {
            if (!navigator.geolocation) {
                throw "위치 정보가 지원되지 않습니다.";
            }
            navigator.geolocation.watchPosition(success);
        }

        getUserLocation();
    </script>
</body>

</html>

예제 코드를 통해 사용자의 위치를 요청하고 받아서 사용하는 방법을 알아보았습니다. 그럼 이번에는 getCurrentPosition(), watchPosition()에 대해 조금 더 상세히 알아볼까요?

Geolocation 기능 살펴보기

위에서는 간단하게 실시간 혹은 단발성으로 사용자의 위치 정보를 확인하는 방법에 대해 알아보았습니다. 이번에는 상세하게 Gelocation API가 제공하는 기능에 대해 알아보도록 하겠습니다.

navigator.geolocation.getCurrentPosition(success, error, options)
// 사용자의 현재 위치 정보를 요청합니다.

navigator.geolocation.watchPosition(success, error, options)
// 사용자의 현재 위치 정보를 요청합니다.
// getCurrentPosition()과 동일하지만, 사용자의 위치가 변경될 때마다 호출되는 점이 다릅니다.

navigator.geolocation.clearWatch(watchId)
// watchPosition() 요청을 중단시킵니다.
// watchPosition()와 함께 쓰이는 기능으로 setInterval()과 clearInterval()과 동일한 방식으로 사용됩니다.

기본적으로 브라우저에서 지원하는 Geolocation API는 navigator.gelocation을 이용해 사용할 수 있습니다. geolocation는 기기가 제공하는 정보 혹은 상황에 따라 위치 정보의 정밀도가 달라지며, 비동기적으로 동작합니다. getCurrentPosition(), watchPosition()은 매개변수로 성공 시 실행되는 콜백(callback), 에러 발생 시 실행되는 콜백(callback), 옵션을 받을 수 있습니다.

사용자 위치 요청 옵션

const options = {
  enableHighAccuracy: false,
  maximumAge: 0,
  timeout: Infinity
};

사용자 위치를 요청하는 getCurrentPosition(), watchPosition()은 응답에 대한 옵션을 정밀하게 설정할 수 있습니다.

- enableHighAccuracy: 높은 정확도 여부를 설정합니다. 기본값은 false이며, 더 정확한 위치 정보를 필요로 하는 경우 사용하는 옵션입니다. enableHighAccuracy 옵션을 사용하는 경우에 기기의 전력 사용량이 늘어날 수 있습니다.

- maximumAge: 위지 정보의 유효시간을 설정합니다. 현재 위치를 바로 확인해서 사용하기 때문에 기본값은 0입니다.

- timeout: 위치 정보를 가져오기 위해 대기하는 시간을 설정합니다. 기본값은 Infinity로 무한으로 대기합니다.

사용자 위치 반환 값

function success(success) {
  const { coords, timestamp } = success;

  coords.latitude;  // 위도
  coords.longitude; // 경도
  coords.accuracy;  // 위도 및 경도의 좌표 정확도 수준을 미터 단위로 나타냅니다.

  coords.altitude;         // 고도
  coords.altitudeAccuracy; // 고도의 정확도 수준을 미터 단위로 나타냅니다.

  coords.heading; // 장치의 이동 방향을 나타내며 도를 기준으로 합니다. 0 ~ 360
  coords.speed;   // 초당 미터 단위로 장치의 현재 속도를 나타냅니다.

  timestamp; // 위치 반환 시간
}

getCurrentPosition(), watchPosition()을 통해 사용자 위치 정보를 성공적으로 반환하는 경우에는 위와 같은 결과를 반환합니다. 반대로 사용자 위치 정보 요청이 실패한 경우에는 아래와 같은 결과를 반환합니다.

function error(error) {
  error.code;    // 에러 코드: 1 = PERMISSION_DENIED, 2 = POSITION_UNAVAILABLE, 3 = TIMEOUT
  error.message; // 메시지
}

Geolocation을 지원하는 브라우저는?

geolocation을 지원하는 브라우저는 다음과 같습니다.

글에서 사용한 예제 코드를 첨부파일로 제공합니다. geolocation을 통해 위치 값을 가져오는 부분에 대한 샘플이 필요하신 분은 다운로드하여서 사용하시면 됩니다.

geolocation_example.zip

0.00MB

저작자표시 비영리 변경금지

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

Javascript - 객체지향 프로그래밍과 함수형 프로그래밍의 차이 (2)	2022.01.24
Javascript - 타입을 판별 할 수 있는 typeof 연산자 사용법 (0)	2021.12.28
Javascript - 스크립트 코드를 실행시키는 eval() 사용 방법을 알아보자 (0)	2021.12.15
Javascript - 자바스크립트를 통해 배우는 순수 함수의 개념 (0)	2021.11.02
Javascript - Promise를 사용해서 Callback hell을 벗어나자 (0)	2021.10.07

개발자 일지