HTML5를 이용한 실시간 위치 추적

스마트폰 가입자가 3천만이 넘어 가면서,

현재 나의 위치를 알고 싶어하는 욕구가 커지고 있습니다.

그에 따라 여러가지 위치기반 기술들이 선보이고 있는데요,

그 중에서도 하나의 소스코드로 다양한 플랫폼에 대응이 가능한 HTML5의

Geolocation API를 소개 하려고 합니다.

• Geolocation API

- Geolocation API란 해당 디바이스의 GPS센서에 접근하여 위치정보를 확인하는 API 이다

- 단발성 위치 요청과, 반복되는 위치 요청이 가능하다

- 디바이스의 종류와는 무관하게 실행된다

- 획득한 위치정보는 경위도 좌표로 반환된다

 

즉 브라우저가 실행되는 디바이스에서 위치정보를 얻으면,

브라우저에 내장된 Geolocation API를 사용하여 위치정보에 접근, 사용할 수 있습니다.

단, 위치정보는 GPS, IP Address, Wi-Fi, GSM/CDMA망의 ID 와 같은

네트워크 신호를 기반으로 추측하는 값이기 때문에 내부적으로 위와 같은 방법들을 통해위치정보가 반환될 뿐,

실제 어떤 방식을 통해서 얻어진 위치값인지는 알 수 없습니다.

 

이제 Geolocation API의 객체와 속성 및 옵션 그리고 샘플 코드를 살펴 보겠습니다.

- Geolocation API는 window.navigator 객체에 정의되어 있습니다.)

 

1. getCurrentPosition (successCallBack, errorCallBack, options)

 - 단발성으로 현재 위치값을 가져옵니다.

 

2. watchPosition (successCallBack, errorCallBack, options)

 - 위치정보를 계속해서 관제합니다.

 

3. coords : 지리적인 좌표의 세트를 나타냅니다.

 - latitude : 위도

 - longitude :경도

 - alitude :표고 

 - accuracy : 위 경도의 오차

 - alitudeAccuracy : 표고의 오차 (미터 단위)

 - heading : 디바이스의 진행방향(시계방향)

 - speed : 디바이스 진행속도

 

4. timestamp

 - 위치정보를 얻은 시각으로 일반적으로 1000분의 1초를 나타내지만,

    iOS의 경우 1000분의 1초 대신 1초를 사용하게 됩니다.

 

5. options

 - timeout : 위치정보를 가져오기까지 기다리는 시간 (1000분의 1초 단위)

 - enableHighAccuracy : 높은 정확도를 얻기 위한 기능을 On/Off 한다 (bloolean 값)

 - maximunAge : 현재 위치 정보에 대한 만료시간을 정의 합니다. (1000분의 1초 단위)

6. error

 - code : 에러코드

 - UNKNOWN_ERROR : 알수없는 에러

 - PERMISSION_DENIED : 위치정보를 얻을 수 있는 권한 없음.

 - POSITION_UNAVALLABLE : 위치정보를 얻을 수 없음 .

 - TIMEOUT : 관제 시간 제한 초과 - message : 에러메시지

 

Code Sample

//현재 위치 추적 Start

function geoLocation()

{      

     if (navigator.geolocation)

          navigator.geolocation.getCurrentPosition(showPosition,showError);

      else

          alert("Geolocation is not supported by this browser.");

}

//위치 추적 Success

function showPosition(position)

{      

     var latitude = position.coords.latitude;

      var longitude = position.coords.longitude;

      //현재 위치로 지도 이동

      var center = new google.maps.LatLng(latitude, longitude);

      var myMarker = new google.maps.Marker({ map : myMap, position : center });      

      myMap.setCenter(center);      

      myMap.setZoom(18); 

} 

//위치 추적 Faile 

function showError(error) 

{      

      switch (error.code)      

      {           

            case error.PERMISSION_DENIED:                

                     alert("User denied the request for Geolocation.");                

                 break;           

            case error.POSITION_UNAVAILABLE:                

                     alert("Location information is unavailable.");                

                 break;

               case error.TIMEOUT:                

                     alert("The request to get user location timed out.");                

                 break;           

            case error.UNKNOWN_ERROR:                

                     alert("An unknown error occurred.");                

                 break;      

      } 

}

  위 코드를 실행해서 현재의 위치로 지도를 이동하면...

이렇게 현재 위치로 지도가 이동하면서 마커가 표시 됩니다. 

계속해서 위치 정보를 계속해서 관제할 수 있는 watchPosition 함수와 

HTML5의 웹 소켓을 이용하여 실시간으로 위치 정보를 주고 받는 코드를 작성 해 보겠습니다.

Code Sample

//HTML이로드되면웹소켓생성

var websocket;

var resCnt = 0;     //서버에서 응답받은 횟수.

var resPositionArr = [];     //서버에서 응답받은 좌표값 Array.

$(document).ready(function()

{

     //서버와연결합니다. 웹소켓서버 Uri : ex) ws://YourDomain/

     websocket = new WebSocket(wsUri);

     // 서버와연결되면실행됩니다

     websocket.onopen = function(evt) { onOpen(evt) };

     // 서버와연결이종료되면실행됩니다

     websocket.onclose = function(evt) { onClose(evt) };

     // 서버에서메세지를받으면실행됩니다

     websocket.onmessage = function(evt) { onMessage(evt) };

     // 서버연결에서오류가발생하면실행됩니다.

     websocket.onerror = function(evt) { onError(evt) }; 

});

functiononOpen(evt)

{      

      writeToScreen("CONNECTED"); 

}

functiononClose(evt) 

{      

      writeToScreen("DISCONNECTED"); 

} 

functiononError(evt) 

{      

      writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data); 

} 

functionwriteToScreen(message) 

{      

     var pre = document.createElement("P");      

      pre.style.wordWrap = "break-word";      

      pre.innerHTML = message;      

      output.appendChild(pre); 

} 

// 서버에 Message를 전달 합니다. 

function doSend(message)

{      

      writeToScreen("SENT: " + message);      

      websocket.send(message); 

} 

// Geolocation API를 사용해 위치 추적을 시작합니다. 

function start()

{     

      //watchPosition을 사용하여 지속적으로 위치값을 가져옵니다.      

      nav = navigator.geolocation.watchPosition(success, error); 

} 

function success(position) 

{      

      // 성공적으로 위치값을 얻어오면 다시 위치값을 서버로 전송 합니다.      

      // 웹 소켓은 Text형식으로 데이터를 주고 받습니다.      

      doSend("latitude:" + position.coords.latitude);      

      doSend("longitude:" + position.coords.longitude); 

} 

function error(error) 

{      

      alert("Error : " + error.code); 

} 

function end() 

{      

      websocket.close();     

      // 웹 소켓 연결을 종료합니다.      

      navigator.geolocation.clearWatch(nav); 

} 

function onMessage(evt) 

{      

      writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');      

      resCnt++;      

     if(resCnt > 0)      

      {           

          if(resCnt % 2 != 0)           

            {                

                  // 웹소켓은 Text형식으로 데이터를 주고 받습니다.                

                  resPositionArr.push(evt.data.replace("latitude:", ""));           

            }           

          else           

            {                

                  // 웹소켓은 Text형식으로 데이터를 주고 받습니다.                

                  resPositionArr.push(evt.data.replace("longitude:", ""));                
              var resultLat = resPositionArr[resCnt-2];                

              var resultLng = resPositionArr[resCnt-1];                

              var latlng = new google.maps.LatLng(resultLat, resultLng);                

              var marker = new google.maps.Marker({position: latlng,map: Map});                

                 Map.setCenter(latlng);                

                 Map.setZoom(18);           

            }      

     } 

} 

 위 코드를 실행하면.. 

다음과 같이 위치를 추적하여 서버에 전송하고, 다시 응답 받은 좌표를 지도 위에 나타냅니다.   

Geolocation API에 대한 자세한 사항은 

http://www.w3schools.com/html/html5_geolocation.asp 에서 확인 할 수 있습니다. 

웹소켓에 대한 자세한 사항은 http://www.websocket.org/ 에서 확인 할 수 있습니다.