스마트폰 가입자가 3천만이 넘어 가면서,
현재 나의 위치를 알고 싶어하는 욕구가 커지고 있습니다.
그에 따라 여러가지 위치기반 기술들이 선보이고 있는데요,
그 중에서도 하나의 소스코드로 다양한 플랫폼에 대응이 가능한 HTML5의
Geolocation API를 소개 하려고 합니다.
- 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 = newgoogle.maps.LatLng(resultLat, resultLng);
var marker = newgoogle.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/ 에서 확인 할 수 있습니다.