HTML5를 이용하여 위치/좌표정보(GPS)를 사용하기

HTML5에서는 GPS 수신기기를 탑재한 스마트폰의 위치정보를 javascript를 통해 쉽게 이용할 수 있도록 하고 있습니다. 단순한 2개의 실수값(위도, 경도)이지만 위치정보는 매우 민감한 개인정보 중 하나이므로 웹페이지에서 이 기능을 사용할경우 브라우저는 사용자에게 위치정보 제공 여부를 선택할 수 있습니다.


HTML5 Geolocation은 IE9, 파이어폭스, 크롬 등 대부분의 브라우저에서 지원하고 있습니다.


1. 위치정보 가져오기

-위치정보를 가져오기 위해서는 getCurrentPosition() 함수를 사용하면 됩니다.

<script>
var x=document.getElementById("demo");
function getLocation(){
    if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(showPosition);
    }else{
        x.innerHTML="Geolocation is not supported by this browser.";
    }
}
function showPosition(position){
    x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
}
</script>


2. 에러 처리

-위의 예에서 getCurrentPosition의 첫 번째 매개변수로 showPosition가 들어가 있습니다. 이 함수의 두 번째 매개변수는 에러 처리를 위한 것입니다. 매개변수로 showError를 넣고 아래의 함수를 추가시켜 봅시다.

function showError(error){
    switch(error.code){
        case error.PERMISSION_DENIED:
            x.innerHTML="User denied the request for Geolocation."//사용자가 위치정보에 대한 요청을 거부했을 때.
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML="Location information is unavailable." //위치정보 사용이 불가능할 때(주로 PC에서 볼 때)
            break;
        case error.TIMEOUT:
            x.innerHTML="The request to get user location timed out." //시간초과
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML="An unknown error occurred." //알 수 없는 에러
            break;
    }
}


3. 위도와 경도로 지도를 보여주자.

-아무래도 사용자 근처에 무엇이 있는지를 보여주는게 주요한 용도 중 하나겠죠? 구글의 API를 이용하여봅시다.
여기서는 좌표를 주면 이미지를 보여주는 형태를 보여드리도록 하겠습니다. showPosition을 수정하시면 됩니다.

function showPosition(position){
    var latlon=position.coords.latitude+","+position.coords.longitude; //좌표를 "위도,경도" 형태로 만들어

    var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; //googleapi에 전달하여 이미지를 얻어온다.
    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

 

출처 : http://blog.naver.com/hycszero?Redirect=Log&logNo=70130509392

참고 : http://www.w3schools.com/html5/html5_geolocation.asp

 

참고 : 지오로케이션 사용하기 - https://developer.mozilla.org/ko/docs/WebAPI/Using_geolocation