| sitelink1 | http://kiara77.tistory.com/226 |
|---|
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가 확실히 약하네요.
모든 코드는 직접 코딩하면서 테스트를 해보세요 :)
예제파일 다운로드
