[HTML5] Geolocation

HTML 5 는 위치 정보와 관련한 Geolocation 스펙을 포함하고 있다
(엄밀히 말하자면 이 스펙은 HTML Working Group 과 분리되어 있는  Geolocation Working Group
에 의해 표준화가 진행되고 있다고 한다)

Geolocatoin API를 이용하면
현재 웹 페이지가 실행되는 단말의 위도, 경도와 같은 위치 정보를 얻어 올 수 있다

Geolocation 지원 브라우저 현황
현재 IE를 제외한 대부분의 최신 웹브라우저에서 Geolocation을 지원하고 있다
아래 표는 http://caniuse.com/ 에서 제공하는 브라우저(버전)별 Geolocation 지원 표이다
(데스크탑 용 브라우저 기준이다)

MS IE 9 가 unknown 이라고 되어 있지만 아마 지원하게 될 것이다.
MS 가 HTML 5 지원을 강력히 표명하고 있기 때문이다

 




그리고 아래는 http://diveintohtml5.org/geolocation.html  에서 발췌한 브라우저 지원현황이다
아래 표를 보면 아이폰이나 안드로이드와 같은 모바일 환경에서도Geolocation을 지원한다고 나와있다
Geolocation 자체가 장치의 위치정보를 이용하는 것이기에 모바일 장치의 지원은 더 자연스럽다
(참고: 오페라 10.6 이후 지원됨)

위치 정보는 사용자 동의가 있어야 한다
웹 응용프로그램이 나의 정보를 이렇게 쉽게 얻어 갈 수 있는 것인가?
만일 그렇다면 굉장한 사회적(?) 문제가 될 것이다
따라서 사용자의 위치 정보는 반드시 사용자의 허가를 받아서 수집할 수 있도록 되어있다

브라우저에서 Geolotion API를 이용해서 위치 정보를 액세스 하려고 하면,
아래 보는 바와같이 사전 동의를 구하게 된다.(파이어폭스 예) 
만일 동의를 하지 않게 되면 나의 위치정보를 웹 응용프로그램이 알 수 없게 되는 것이다

Geolocation 데모 만들어 보기
웹 페이지에서 Geolocation API 를 이용해 위치정보를 액세스 하는 것은 매우 쉽다
내부적으로 장치가 제공해 주는 위치정보를 어떤 식으로 액세스 하는지 전혀 몰라도
가져다 쓰는 것은 아주 쉽다

navigator 에 정의된 geolocatoin 객체의 getCurrentPosition 메서드를 이용하여
콜백 메서드만 정의하면 된다. 아래는 간단한 코드 샘플이다
(위치 정보 확인 작업은  비동기로 이루어진다)

<div id="msg"></div>

<script type="text/javascript"> 
  if (!!navigator.geolocation)
  {
    navigator.geolocation.getCurrentPosition(successCallback,errorCallback); 
  }
  else
  {
    alert("이 브라우저는 Geolocation를 지원하지 않습니다");
  }
   
  function successCallback(position)
  {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
   
    document.getElementById("msg").innerHTML = "위도" + lat + ", 경도:"+lng
  }
 
  function errorCallback(error)
  {
    alert(error.message);
  }   
</script>

그리고 이 코드를 파이어폭스에서 실행한 결과 화면이다
(데스크탑 브라우저에서 테스트 해 봤는데, 구글 크롬과 사파리의 경우 지원은 되는데 위도,경도
 정보가 불러와 지지가 않는다. 파이어폭스와 오페라, 아이폰 사파리에서 정상 동작 확인 함 )

예제를 보면 coords 로 부터 위치 정보를 읽어 들이는데 위도,경도 이외에도
표고, 위도, 경도의 오차, 디바이스 진행 속도, 진행 방향 등의 정보도 조회 가능하다
(다만 장치별 이용 가능 여부를 확인해야 함)

그리고 getCurrentPosition 은 위치 정보를 일회성으로 받아 올 때 사용하는 반면,
watchPosition 함수는 위치의 변경 정보를 계속해서 알고 싶을 경우 사용한다

즉 장치의 위치가 변경될 때 마다 계속 호출되므로 위치의 변화를 지속적으로 감지할 수 있게 된다
(역시 매 확인은 비동기로 이루어 진다) (관련 자료 참고 바람)

다음 사이트에서 Geolocation 관련 추가 학습과 데모를 확인해 보자
http://www.ibm.com/developerworks/kr/library/x-html5mobile1/
http://html5demos.com/geo
http://3liz.org/geolocation/