[HTML5]사용자 위치정보를 가지고 올 수 있는 Geolocation API

HTML5에서 제공하는 Geolocation API을 사용하여 사용자의 위치정보를 가지고 올 수 있다.
모바일 단말에서는 GPS를 이용하여 사용자 위치를 가지고 올 수 있으나, GPS보다는 정확하지 않아도 GPS를 이용할 수 없는 환경에서는 Geolocation API를 이용하여 사용자 위치 정보를 가지고 올 수 있으며, 해당 API는 HTTPS에서 작동한다.

브라우저별 지원 여부

Geolocation API를 지원하는 브라우저별 지원 여부는 아래와 같다

위치정보

getCurrentPosition()를 사용하여 사용자의 위치를 가지고 올 수 있다.

const display = document.getElementById("display");

function showPosition(position) {
  display.innerHTML = "위도: " + position.coords.latitude +
  "<br>경도: " + position.coords.longitude;
}

window.addEventListener('load', () => {
  if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    display.innerHTML = "해당 브라우저는 Geolocation API를 지원하지 않습니다.";
  }
})

에러 처리

getCurrentPosition()의 2번째 파라미터는 에러를 핸들링하기 위하여 사용되며, 사용자의 위치 정보를 가지고 오지 못하였을 경우 각각의 상황에 맞는 에러코드를 발생시킨다.

function errorHandling(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      console.debug('사용자가 위치정보 권한을 허용하지 않음');
      break;
    case error.POSITION_UNAVAILABLE:
      console.debug('위치정보 사용할 수 없음');
      break;
    case error.TIMEOUT:
      console.debug('Timeout이 발생함');
      break;
    case error.UNKNOWN_ERROR:
      console.debug('알 수 없는 에러');
      break;
  }
}

참고자료

w3schools: HTML5 Geolocation API