게시글

5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭
강좌10 - HTML&DOM - 7년 전 등록

Geolocation API(GPS)

위치 정보 가져오기

안녕하세요. HTML5에 도입된 자바스크립트 API 첫 시간으로 Geolocation을 선정했습니다. 요즘 핸드폰 앱들을 보면 GPS 정보를 요구하는 앱들이 많죠. GPS 정보를 맞아서 자신 주변의 맛집이나 정보들을 찾아줍니다. 이제 웹에서도 GPS 정보를 가져올 수 있습니다. 보통 위치 정보는 핸드폰 GPS, IP주소나, WIFI, 기지국 위치 등을 사용해 찾아냅니다. 웹에서는 살짝 정확성이 떨어질 때도 있지만 GPS를 사용할 수 있다는 것 자체가 행운입니다.

HTML 강좌이지만 지난 강좌들과는 다르게 자바스크립트가 들어가기 때문에 자바스크립트를 어느 정도 알고 계셔야 진행할 수 있습니다.

GPS에 대한 정보는 window.navigator 객체 안에 들어있습니다.

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

코드를 실행하면 다음과 같은 알림창이 뜹니다.

허용을 누르면 자신의 위도 경도가 뜰 겁니다. 제 위치는 비밀이니까 알려드리지 않겠습니다. ㅎㅎ

코드를 보시면 getCurrentPosition 메소드가 있는데요. 이름처럼 현재 위치 정보를 가져옵니다. 콜백 함수의 매개변수로 position이 보이죠? position 객체 안에 timestamp(현재 시간)과 coords 객체가 있습니다. coords 객체 안에는

다음과 같은 정보들이 들어있습니다. latitude(위도), longitude(경도)뿐만 아니라 speed(속도), altitude(고도), accuracy(정확도)까지 나와있기 때문에 유용하게 쓰실 수 있습니다.

보통 여기서 나오는 위도 경도를 구글 지도나 카카오 지도 API에 넣으면 주소랑 지도상의 위치를 알아낼 수 있습니다.

getCurrentPosition의 두 번째 인자는 위치값 찾기 에러가 났을 때의 콜백이고, 세 번째 인자는 옵션인데요. 옵션에는 enableHighAccuracy(배터리를 더 소모해서 더 정확한 위치를 찾음), timeout(주어진 초 안에 찾지 못하면 에러 발생), maximumAge(한 번 찾은 위치 정보를 해당 초만큼 캐싱)이 있습니다. enableHighAccuracy는 탐나는 옵션이네요 ㅎㅎ

잠깐, speed는 어떻게 측정할까요? getCurrentPosition으로는 측정할 수 없지만, 위치가 이동할 때마다 알려주는 메소드가 있습니다. 바로 watchPosition입니다.

var watchId = navigator.geolocation.watchPosition(function(position) {
  console.log(position.coords);
});

위치가 변할 때마다 일정 주기로 watchPosition 안의 콜백 함수가 호출됩니다. watchPosition은 노트북이나 핸드폰의 배터리를 많이 소모하기 때문에 필요할 때만 쓰고, clearWatch로 해제해주시면 됩니다. 아까 저장한 watchId를 navigator.geolocation.clearWatch(watchId)처럼 해주면 됩니다.

슬프게도 일부 브라우저랑 모바일 웹에서 speed나 altitude같은 것을 지원해주지 않는 경우가 많습니다. 위도와 경도의 변화를 이용해서 거리를 찾을 수 있고, 속도 = 거리 / 시간이기 때문에 이 공식을 활용해서 speed를 찾으면 됩니다. altitude는 지원하지 않으면 찾을 수 없습니다.

참고로 크롬에서는 https와 localhost에서만 동작합니다. 개인정보 보호 및 보안을 위해 그렇게 조치한 것 같습니다.

다음 시간에는 HTML5에서 저장소를 사용할 수 있게 해주는 localStoragesessionStorage에 대해 알아보겠습니다.

조회수:
0
목록
투표로 게시글에 관해 피드백을 해주시면 게시글 수정 시 반영됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright 2016- . 무단 전재 및 재배포 금지. 출처 표기 시 인용 가능.
5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭

댓글

1개의 댓글이 있습니다.
5년 전
웹 애플리케이션 하는 데 많은 도움이 되서 감사합니다. 궁금한것은 모바일 지도 상에서 내위치를 확인하고 주변에 상황을 알고 싶은데요.. 일반 pc상에서는 나오지만 모바일상에서는 내위치가 나오지 않네요.. 방법이 있으면 부탁드립니다.