2015. 5. 29. 16:37ㆍHTML5
이제 시작하는 HTML5입니다.
책을 보면서 하나씩 정리하려고 합니다.
CANVAS, AUDIO 등등 여러가지가 있지만 우선 난 다 뛰어 넘고..ㅋㅋ
그건 나중에 다시 필요 할때..^ ^
재미 있는거 부터 해야 실증이 안나니까..요..
그래서 지도 부터 시작..........
구글 MAP을 사용하는 방식에 대해서는 따로 설명하지 않도록 하겠습니다.
전체 소스코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GEO TEST</title>
</head>
<body onload="checkBrowser()"><div class="info">
<span id="support">HTML5 지오로케이션을 지원하지 않는 브라우저 입니다.</span>
</div><div id="map_canvas" style="width:100%; height:600px"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=구글에서발급받은Key&sensor=TRUE"></script>
<script type="text/javascript">var mapOptions = {
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);function checkBrowser() {
if( navigator.geolocation ) {
document.getElementById("support").innerHTML="HTML5 지오로케이션을 지원하는 브라우저 입니다.";
navigator.geolocation.getCurrentPosition(updateLocation, handlerLocationError);
}
}function updateLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;map.setCenter(new google.maps.LatLng(latitude, longitude));
}function handlerLocationError(error) {
alert( error.code );
}
</script>
</body>
</html>
HTML5 에서 달라졌다고 할 수 있는 부분이 많지만 현 소스에서 보면 DOCTYPE 선언 부분이 가장 심플해 졌습니다.
기존 선언은
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
이런 식으로 쭉 나열 했었지만 HTML5는
<!DOCTYPE html>
이렇게 선언함으로서 끝납니다.
문자셋 역시 심플해져서
기존에는
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
이렇게 썼던것을
<meta charset="UTF-8">
이와 같이 선언합니다.
정말 심플해진거 같아요..ㅋ
그럼 넘어가서 HTML5 지오로케이션 API 사용법입니다.
HTML5에서는 navigator 를 제공하고 navigator.geolocation을 객체를 생성하여 위치정보를 가져 올 수 있도록 처리 하였습니다.
function checkBrowser() {
if( navigator.geolocation ) {
document.getElementById("support").innerHTML="HTML5 지오로케이션을 지원하는 브라우저 입니다.";
navigator.geolocation.getCurrentPosition(updateLocation, handlerLocationError);
}
}
해당 소스는 지오로케이션이 지원이 되는 Browser를 체크 하는 소스 입니다.
Geolocation 에서 위치를 가져오는 형태는 두가지가 존재 합니다.
단발성 위치 요청(getCurrentPosition()) 과 반복적인 위치요청(watchPosition()) 의 두가지가 있습니다.
단발성 위치 요청은 웹호출시 한번만 호출 되어지지만 반복적 위치 요청은 주기적으로 위치를 호출 하게 되어 있습니다.
반복적인 위치 요청을 하고자 할경우에는 getCurrentPosition을 watchPosition으로 바꿔주시기만 하면 됩니다.
단발성 위치 요청
void getCurrentPosition(PositionCallback successCallback, // 필수 입력
PositionErrorCallback errorCallback, //Error 발생시 호출 되는 Handler(옵션)
PositionOptions options); //옵션
전체 소스에서는 단발성 위치 요청을 사용하였습니다.
필수 매개변수인 successCallback을 구현한 소스입니다.
function updateLocation(position) {
var latitude = position.coords.latitude; // 위도
var longitude = position.coords.longitude; //경도
var accuracy = position.coords.accuracy; //정확도map.setCenter(new google.maps.LatLng(latitude, longitude));
}
실재 위치정보를 수신하는 handler입니다
변수로 선언된 position에 해당 위치의 정보가 담겨져 있습니다.
위치정보에 담겨 져 있는 위도와 경도를 구글MAP에 설정해 주면 완료 입니다.
참 쉽죠~~~^ ^?
errorCallback에 해당하는 소스 입니다.
function handlerLocationError(error) {
alert( error.code );
}
구찮아서 Error Code만 출력했습니다..ㅡㅡ;;
Error Code는 총 4가지가 있습니다.
UNKNOWN_ERROR(에러코드 0) : 어떠한 에러 코드에도 해당하지 않을 경우입니다. 해당내용을 확인하고자 할경우 error.message 속성으로 확인이 가능합니다.
PERMISSION_DENIED(에러코드 1) : 사용자가 위치정보 공유를 허가하지 않은경우 발생합니다.
POSITION_UNAVAILABLE(에러코드 2) : 사용자의 위치를 판단을 실팽하였을 경우 발생합니다.
TIMEOUT(에러코드 3) : 옵션에 타임아웃이 설정되어 있거나 제한범위를 벗어난 지역에서 발생합니다.
마지막 옵션은 아직 정확히 공부하지 않아 추후 하게 되면...^ ^ 그때나 해당 페이지를 수정하도록 하겠습니다..ㅋ
위의 Source를 실행해 보면
아래와 같이 나오게 됩니다..ㅋ 근데........... 오차가 좀 많이 심하군요..ㅡㅡ
'HTML5' 카테고리의 다른 글
| Websocket를 통한 Chat (0) | 2015.07.08 |
|---|---|
| 이미지 첨부시 미리보기 처리 (0) | 2015.07.06 |
| XMLHttpRequest level2를 사용하기 위한 Tomcat7 CORS 설정 (0) | 2015.06.01 |