[ JavaScript ] geolocation api를 이용한 현재위치 경도, 위도 가져오기

exceed_96·2024년 3월 12일

목록 보기

17/18

지도를 이용한 토이프로젝트를 진행 중 현재 위치를 지도상에 보여주기 위해 현재 위치의 위도와 경도를 가져와야 하는 구현이 추가 됐다. 현재 위치의 경도, 위도는 geolocation api를 이용해서 가져올 수 있는데 이번 포스팅을 통해서 간단한 사용법을 알아보자.

1. geolocation api란?

geolocation api는 현재 위치의 경도, 위도를 가져올 수 있는 api이다.

위 api를 이용해서 네이버, 카카오, 구글 지도 api와 결합하여 사용자의 위치를 마커로 표시하는 등 다양한 용도로 활용 될 수 있다.

아래 링크는 MDN에서 geolocation api를 설명해 놓은 레퍼런스이다.

https://developer.mozilla.org/ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API

2. geolocation api 사용법

window객체에 있는 navigator속성에서 geolocation을 호출한다.

geolocation api는 아래와 같이 3개의 메서드(getCurrentPosition, watchPosition, clearWatch)를 활용할 수 있다.

window.navigator.geolocation.getCurrentPosition(성공 시 콜백함수, 실패 시 콜백함수, options);
  
window.navigator.geolocation.watchPosition(성공 시 콜백함수, 실패 시 콜백함수, options);
  
window.navigator.geolocation.clearWatch();

2.1 getCurrentPosition

현재 위치의 위도, 경도 정보 등을 1번 호출하는 메서드이다.

const getSuccess = (position) => {
  console.log(position);
};

const getError = () => {
  console.log("geolocation api error");
};

const options = {
  enableHighAccuracy: true,
  timeout: 5000, // 5 seconds
  maximumAge: 60000, // 1 minute
};

window.navigator.geolocation.getCurrentPosition(getSuccess, getError, options);

getCurrentPosition메서드에는 3개의 인수를 받을 수 있다.

getCurrentPosition의 첫 번째 인수

"getSuccess"는 현재 위치를 제대로 받아왔을 시 실행 할 콜백함수를 정의할 수 있다.

콜백함수는 position이라는 인자를 취할 수 있으며 해당 값에는 현재위치에 대한 정보를 가지고 있는 객체를 반환해준다.

함수명은 "getSuccess"가 아닌 자유롭게 정의할 수 있다.

getCurrentPostion의 두 번째 인수

"getError"는 현재 위치를 받아오는 데 실패할 시 실행 할 콜백함수를 정의할 수 있다.

함수명은 "getError"가 아닌 자유롭게 정의할 수 있다.

getCurrentPosition의 세 번째 인수

"options"는 현재 위치를 가져오는데 3가지의 옵션을 정의할 수 있는 인수이다.

enableHighAccuracy는 고정밀 위치 정보를 요청하는지에 대한 값이다.

기본값은 false이다. true로 지정할 경우 고정밀 위치 정보를 요청한다고 하지만 별 차이는 없는거 같다..

timeout은 현재위치를 가져오기 위한 시간 제한 옵션이다.

기본값은 무한대이며, ms단위로 시간을 제한할 수 있다.

maximumAge는 캐시된 위치 정보의 유효기간을 정의할 수 있는 옵션이다.

기본값은 0으로 캐시된 값 이내에 위치 정보가 있으면 해당 값을 반환하고 새로운 위치를 요청하지 않는다.

위와같이 position을 출력하면 현재 위치에 대한 정보를 가진 위치를 확인할 수 있다.

그 중, 지도 api에서 주로 사용하게 될 "latitude"는 "위도"값이고, "longitude"는 "경도"값이다.

2.2 watchPosition

watchPosition은 한번만 호출하는 getCurrentPosition과는 달리 지속적으로 위치를 모니터링 하여 위치가 바뀔때마다 정의된 콜백함수를 정의하는 메서드이다.

사용법은 getCurrentPosition메서드와 동일하다.

const getSuccess = (position) => {
  console.log(position);
};

const getError = () => {
  console.log("geolocation api error");
};

window.navigator.geolocation.watchPosition(getSuccess, getError);

위와같이 현재 사용자의 위치가 변경될 때마다 콜백함수를 호출하여 위치정보를 출력하는걸 확인할 수 있다.

2.3 clearWatch

clearWatch메서드는 watchPosition으로 시작된 위치 추적 모니터링을 중단시키는 메서드이다.


let watchId;

const getSuccess = (position) => {
	if (position.coords.latitude === 77.7777 && position.coords.longitude === 77.7777){
    	window.navigator.geolocation.clearWatch(watchId);	
    }
  console.log(position);
  
};

const getError = () => {
  console.log("geolocation api error");
};

watchId = window.navigator.geolocation.watchPosition(getSuccess, getError);

위와같이 watchPosition의 반환값을 변수에 저장하여서 해당 반환값을 clearWatch메서드의 인수로 전달해주면 특정조건에 트리거를 발동하여 위치 모니터링을 중단시킬 수 있다.