[HTML/JS] Geolocation API 사용하여 위치 정보 가져오기

HTML을 사용하다보면 현재위치가 필요할때가 있는데,

이때 브라우저에서 지원하는 Geolocation API의 navigator.geolocation을 사용하면 됩니다.

 

Geolocation API 사용하기

 

navigator.geolocation  객체를 통해 사용할 수 있습니다.

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

객체가 있어야 호출이 되기 때문에 우선은 위치정보가 호출 될수 있는지 확인을 합니다.

 

그 다음 함수를 호출합니다. 

// 호출 방법1
navigator.geolocation.getCurrentPosition(success, error, [options])

// 호출 방법2
navigator.geolocation.getCurrentPosition((position) => {
  doSomething(position.coords.latitude, position.coords.longitude);
});

 

호출 방법 1을 통해  호출 시에는 옵션 값이 따로 있습니다.

 

옵션 값

옵션명	설명
enableHighAccuracy	정확도 우선 모드 (true/ false)
timeout	해당 초 이내 응답 없으면 에러 발생(10000 = 10초)
maximumAge	항상 최신 위치 정보 수집

 

 

메서드 반환값

속성	반환값
coords.latitude	소수로 표현된 위도 값
coords.longitude	소수로 표현된 경도 값
coords.accuracy	위도 값과 경도 값의 정확도
coords.altitude	평균 해수면을 기준으로 하는 고도 값(해발)
coords.altitudeAccuracy	고도 값의 정확도
coords.heading	북쪽을 기준으로 현재 진행 방향에 대한 시계방향으로의 각도 값(˚)
coords.speed	초당 이동한 미터 수를 나타내는 속도 값(초속)
timestamp	위치 정보를 가져온 시간을 나타냄.