[Web] Geolocation API로 사용자 현재 위치 알아내기

Geolocation API 는 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용 가능

MDN: Using the Geolocation API

현재 위치를 가져오려면 getCurrentPosition() 메소드를 사용하면 된다.
아래는 리액트JS(클래스형 컴포넌트) 에서 구현한 소스코드이고, 상세 옵션도 아래와 같다.

getLocation() {
        let lat, long;
        if (navigator.geolocation) { // GPS를 지원하면
            navigator.geolocation.getCurrentPosition(function(position) {
                lat = position.coords.latitude;
                long = position.coords.longitude;
                alert('위도 : ' + lat + ' 경도 : ' + long);
            }, function(error) {
                console.error(error);
            }, {
                enableHighAccuracy: false,
                maximumAge: 0,
                timeout: Infinity
            });
        } else {
            alert('GPS를 지원하지 않습니다');
            return;
        }
    }

• options
  • enableHighAccuracy: 고밀도 활성화 여부
  • maximumAge: 위치 정보의 캐시 수명
  • timeout: 위치 정보 요청의 응답을 대기할 최대 대기시간

이렇게 구현하고 함수를 호출하면, 위치 정보에 대한 권한을 요청해주고, 허용 하면 사용자 위치를 가져와준다.