HTML5 강좌 23강 - 위치 정보(Geolocation API), 지도 서비스

HTML5 강좌 23강 - 위치 정보(Geolocation API), 지도 서비스

요즘 스마트폰이 대중화 되면서, 위치기반 APP이 아주 많이 개발됐죠.

HTML5에서도 위치를 찾고, 지도를 만들 수 있습니다.

*Geolocation API : 현재의 위치 정보를 검색할 때 사용

GPS가 내장된 스마트폰에서 훨씬 정확한 위치 정보 파악이 가능하여 모바일 브라우저에서 유용한 API 입니다.

위치 정보는 개인 정보 이므로 사용자의 동의가 필요하죠.

*현재 위치

현재 위치를 알아내기 위해서 navigator 객체의 getCurrentPosition() 메소드를 사용합니다.

-사용법-

navigator.geolocation.getCurrentPosition( 

successCallback, errorCallback, options )

*현재 위치 관련 정보 속성 : getCurrentPosition()로 구할 수 있는 위치 정보의 속성

•coords.longitude : 위도

•coords.altitude : 경도

•coords.latitude : 표고

•coords.altitudeAccuracy : 위도, 경도의 오차

•coords.heading : 표고의 오차

•coords.accuracy : 디바이스의 진행방향 (북쪽 기준으로 시계방향의 각도로 표시)

•coords.speed : 디바이스의 미터/초 단위의 진행 속도

•timestamp : 위치 정보를 얻은 시각

현재 위치 정보를 찾는 예제1

window.onload = function() { 

//브라우저에서 웹 지오로케이션 지원 여부 판단

if (navigator.geolocation) { 

navigator.geolocation.getCurrentPosition(MyPosition); 

} 

} 

function MyPosition(position) { 

var lat = position.coords.latitude; 

var lng = position.coords.longitude; 

alert("위도 : " + lat + " 경도 : " + lng ); 

}

위 코드를 테스트 해보겠습니다.

(크롬 설정 오류로 인해 익스플로러 9.0 버전에서 테스트를 진행했습니다)

*현재 위치 관련 오류 속성

-getCurrentPosition()의 오류 정보와 관련된 속성-

•code : 오류 코드

•message : 오류 메시지

-오류 코드 값-

•UNKNOWN_ERROR : 0, 알 수 없는 오류

•PERMISSION_DENIED : 1, 권한 없음

•TIMEOUT : 2, 위치 정보를 얻을 수 없음

•POSITION_UNAVAILABLE : 3, 시간 제한 초과

*현재 위치 관련 지정 옵션

-getCurrentPosition()에서 지정할 수 있는 옵션-

•enableHighAccuracy : 정확도가 높은 위치 정보 요청

•timeout : 위치 정보 확인에 대한 시간 제한 설정(단위: ms, 시간 제한 초과 시 TIMEOUT 오류 발생)

•maximumAge : 위치 정보의 유효 기간 설정

-유효 기간보다 오래되면 해당 정보는 폐기하고 새 위치 정보 확인 시도

-0을 지정하면 항상 새로운 위치 정보를 요청

현재 위치 정보를 찾는 예제2

window.onload = function() { 

//브라우저에서 웹 지오로케이션 지원 여부 판단

if (navigator.geolocation) { 

var options={ enableHighAccuracy:true, timeout:1000, maximumAge:6000 };

navigator.geolocation.getCurrentPosition(MyPosition, ErrorCall, options);

} 

} 

function MyPosition(position) { 

var lat = position.coords.latitude; 

var lng = position.coords.longitude; 

alert("위도 : " + lat + " 경도 : " + lng ); 

}

//에러 발생 처리

function ErrorCall(error) { 

switch(error.code) { 

case error.TIMEOUT: 

alert("시간 제한을 초과했습니다."); break; 

case error.POSITION_UNAVAILABLE: 

alert("현재 위치를 구할 수 없습니다."); break; 

case error.PERMISSION_DENIED: 

alert("위치를 구할 수 있는 권한이 없습니다."); break; 

case error.UNKNOWN_ERROR: alert("알 수 없는 에러가 발생하였습니다."); break; 

default : alert (error.message); 

} 

}

첫 번째 예제와 비슷하지만 에외가 발생하면 처리하는 코드가 추가되었습니다.

*현재 위치 추적

watchPosition() : 현재의 위치를 계속 추적하는 역할

clearPosition() : 현재 위치의 추적 종료

-사용법-

var 변수 = navigator.geolocation.watchPosition( successCallback, errorCallback, options );

navigator.geolocation.clearPosition(변수);

현재 위치 추적 예제

<input type="button" onclick="PositionStart()" value="위치 추적 시작"> 

<input type="button" onclick="PositionStop()" value="위치 추적 정지"><br> 

<div id="position"></div>

위치 추적을 시작하고 종료하는 버튼을 생성합니다.

var watchId; 

function PositionStart() { 

watchId = navigator.geolocation.watchPosition(MyPosition); 

} 

function MyPosition(position) { 

var lat = position.coords.latitude; 

var lng = position.coords.longitude; 

document.getElementById("position").innerHTML = "현재 위치 (위도 : " + position.coords.latitude + ", 경도 : " + position.coords.longitude + ")"; 

} 

function PositionStop() { 

navigator.geolocation.clearPosition(watchId); 

}

위치를 추적하고 종료하는 스크립트 함수입니다.

*지도 서비스

지도 서비스 관련 API 제공 사이트들은 다음과 같습니다.

•구글 맵스

https://developers.google.com/maps/?hl=ko

•Bing Maps

http://www.microsoft.com/maps/

•네이버 지도

http://dev.naver.com/openapi/apis/map

•다음 지도

http://dna.daum.net/apis/maps

지도 서비스 활용 예제1

<div id="map" style="width: 500px; height: 500px"></div>

지도가 들어갈 영역입니다.

<!-- 위치정보 API를 위한 메타태그 -->

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 

<!-- 위치정보 API를 가져오는 코드 -->

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script>

<script type="text/javascript"> 

//위치정보 API를 연동하는 코드

window.onload = function() { 

var latlng = new google.maps.LatLng(37.5634, 126.993); 

var options = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 

var map = new google.maps.Map(document.getElementById("map"), options); 

}

</script>

위 예제는 위치를 직접 입력한 코드입니다.

물론 위치를 추적해 지도를 만들수도 있습니다.

지도 서비스 활용 예제2

//위치정보 API를 연동하는 코드

window.onload = function() { 

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(MyPosition); 

} 

} 

function MyPosition(position) { 

var lat = position.coords.latitude; 

var lng = position.coords.longitude; 

var latlng = new google.maps.LatLng(lat, lng); 

var options = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 

var map = new google.maps.Map(document.getElementById("map"), options); 

}

기존 예제에서 위 부분의 코드만 수정되었습니다.

그런데 PC 에서는 위치기반 GPS가 확실히 약하네요.

모든 코드는 직접 코딩하면서 테스트를 해보세요 :)

예제파일 다운로드

23.zip