[ WEB API ] Geolocation API를 통해 위치 정보 가져오기.

 

 

 

 

브라우저에서 사용자의 위치 정보를 받아오려면 어떻게 해야할까?

 

 

Geolocation API를 통해서 사용자의 동의를 받아 위치 정보에 접근할 수 있다.

이를통해 웹 애플리케이션에서 사용자의 위치 정보를 받아서 지도에 표시하거나, 사용자의 위치 기반 서비스를 제공할 수 있다.

 

 

Geolocation API는 navigator.geolocation 을 통해 접근할 수 있다.

if ("geolocation" in navigator) {
  /* 위치정보 사용 가능 */
} else {
  /* 위치정보 사용 불가능 */
}

 

브라우저는 사용자에게 위치 정보 권한을 요청하고, 사용자가 동의하면 현재 장치에서 사용 가능한 최선의 방법(GPS등)을 통해 위치 정보를 가져온다. 

 

 

- Geolocation.getCurrentPosition() : 장치의 현재 위치를 가져옴.

 

- Geolocation.watchPosition(): 장치의 위치가 바뀔 때마다, 자동으로 새로운 위치를 사용해 호출할 처리기 함수를 등록.

 

 

이 두개의 메서드는 3개의 매개변수를 받는다.

 

 

- 성공 콜백 (필수)  : 위치 정보를 성공적으로 가져온 경우, 위치 데이터를 담은 GeolocationPosition 객체를 유일한 매개변수로 하여 콜백을 호출한다.

 

- 실패 콜백 (선택적) : 위치 정보를 가져오지 못한 경우, 실패 원인을 담은 GeolocationPositionError 객체를 유일한 매개변수로 하여 콜백을 호출한다.

 

- 객체 (선택적) : 위치 정보 회수에 사용할 옵션을 지정한다.

 

function success(position) {
  doSomething(position.coords.latitude, position.coords.longitude);
}

function error() {
  alert("죄송합니다. 위치 정보를 사용할 수 없습니다.");
}

const options = {
  enableHighAccuracy: true,
  maximumAge: 30000,
  timeout: 27000,
};

const watchID = navigator.geolocation.watchPosition(success, error, options);

 

 

 

 

---

 

 

 

 

Geolocation

Geolocation API의 주요 클래스로서 사용자의 현재 위치를 가져오고, 위치 변경을 감지하고, 이전에 등록했던 감지기를 제거하는 메서드를 담고 있다.

 

 

GeolocationPosition

사용자의 위치를 나타내며, GeolocationPosition 인스턴스는 Geolocation 객체 메서드의 성공 콜백에 제공된다. 타임스탬프와 함께 GeolocationCoordinates 객체 인스턴스를 포함한다.

 

 

GeolocationCoordinates

사용자 위치의 좌표를 나타낸다. GeolocationCoordinates 인스턴스는 위도, 경도 외에도 기타 중요한 관련 정보를 포함한다.

 

 

GeolocationPositionError

GeolocationPositionError는 Geolocation 객체 메서드의 오류 콜백에 제공되며, 오류 코드와 오류 메시지를 담고 있다.

 

 

Navigator.geolocation

API 진입점으로, Geolocation API의 모든 기능을 제공하는 Geolocation 객체 인스턴스를 반환한다.

 

 

 

 

 

 

---

 

🌸 출처 🌸

 

Geolocation API - MDN

Geolocation API 사용하기 - MDN