HTML5를 이용한 실시간 위치 추적
스마트폰 가입자가 3천만이 넘어 가면서, 현재 나의 위치를 알고 싶어하는 욕구가 커지고 있습니다. 그에 따라 여러가지 위치기반 기술들이 선보이고 있는데요, 그 중에서도 하나의 소스코드로 다양한 플랫폼에 대응이 가능한 HTML5의 Geolocation API를 소개 하려고 합니다.
-
- Geolocation API란?
– Geolocation API란 해당 디바이스의 GPS센서에 접근하여 위치정보를 확인하는 API 이다
– 단발성 위치 요청과, 반복되는 위치 요청이 가능하다
– 디바이스의 종류와는 무관하게 실행된다
– 획득한 위치정보는 경위도 좌표로 반환된다
즉 브라우저가 실행되는 디바이스에서 위치정보를 얻으면, 브라우저에 내장된 Geolocation API를 사용하여 위치정보에 접근, 사용할 수 있습니다.
단, 위치정보는 GPS, IP Address, Wi-Fi, GSM/CDMA망의 ID 와 같은 네트워크 신호를 기반으로 추측하는 값이기 때문에 내부적으로 위와 같은 방법들을 통해위치정보가 반환될 뿐, 실제 어떤 방식을 통해서 얻어진 위치값인지는 알 수 없습니다.
이제 Geolocation API의 객체와 속성 및 옵션 그리고 샘플 코드를 살펴 보겠습니다.
– alitude :표고
– accuracy : 위 경도의 오차
– alitudeAccuracy : 표고의 오차 (미터 단위)
– heading : 디바이스의 진행방향(시계방향)
– speed : 디바이스 진행속도
– message : 에러메시지
//현재 위치 추적 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의 웹 소켓을 이용하여 실시간으로 위치 정보를 주고 받는 코드를 작성 해 보겠습니다.
$(document).ready(function()
{
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/ 에서 확인 할 수 있습니다.