[geolocation]검색결과, 1건
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 메서드를 이용하여
콜백 메서드만 정의하면 된다. 아래는 간단한 코드 샘플이다
(위치 정보 확인 작업은 비동기로 이루어진다)
<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/
'모바일 > HTML5' 카테고리의 다른 글
| [HTML5] Web Storage (6) | 2010.08.11 |
|---|---|
| [HTML5] 드래그 앤 드롭 (Drag & Drop) (7) | 2010.08.10 |
| [HTML5] Web Workers (웹 워커) (5) | 2010.08.05 |
| HTML5 Demo, A Look At HTML5 and its Canvas Tag (4) | 2010.07.29 |
| [HTML5] HTML5 개요와 기술적 특징 (48) | 2010.07.21 |
