안녕하세요. 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에서 저장소를 사용할 수 있게 해주는 localStorage와 sessionStorage에 대해 알아보겠습니다.
익명