<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 모바일 연습</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<style>
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
window.onload = function(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(onSuccess, onError, {
enableHighAccuracy : true,
maximumAge :0,
timeout:30000
});
}else{
alert("현재 브라우저는 GeoLocation을 지원하지 않습니다!!!");
}
}
function onSuccess(position){
var lat = position.coords.latitude;
console.log(lat);
var lng = position.coords.longitude;
console.log(lng);
document.querySelector("#div1").innerHTML = "위도 : "+lat + "<br/> 경도 : "+lng;
}
function onError(error){
alert(error.code+" : "+error.message);
}
</script>
<!-- GeoLocation 객체 : 위도/경도를 얻을 수 있는 HTML5의 스펙 중의 하나로 navigator객체의 하위 객체 geolocation객체를 의미
위치정보를 얻어올 때 navigator.geolocation 객체 하위에 getCurrentPosition()메소드를 이용한다.
getCurrentPosition()메소드에는 세가지의 파라미터가 전달되는데,
첫번째 파라미터 : 위치 정보 조회 성공시에 실제 위치 정보를 처리하기위한 콜백함수
두번째 파라미터 : 위치 정보 조회 실패시에 실행되는 예외 처리 콜백 함수
세번째 파라미터 : 위치 정보 취득에 사용되는 옵션 값에 대한 JSON 형식의 데이터
getCurrentPosition(
function successCallback, function errorCallback, [json options]
)
** 위치 정보 취득에 사용되는 옵션 값에
enableHighAccuracy : true설정을 할 경우에 정확도가 높은 위치 정보를 요청
timeout : 위치 정보 확인에 시간제한을 설정하고, 시간을 초과할 경우에 Timeout
error 발생
maximumAge :위치정보의 유효기간을 설정. 유효기간 값이 0이면 항상 새로운 위치 정보를 요청함.
geolocation객체의 getCurrentPosition()메소드를 호출하면 브라우저는 사용자에게 위치정보 사용 승인 여부를 묻는 팝업창을 띄운다.
** 예외처리 콜백 함수에 전달되는 error 객체에는 code 프로퍼티(속성)가 있는데, 이속성은 에러상황에 대한 정보를 나타내는 0~3까지의 값을 갖는다.
0 : UNKNOWN_ERROR - 알 수 없는 에러상황에
1 : PERMISSION_DENIED - 권한 없음
2 : POSITION_UNAVAILABLE - 위치 정보 취득 실패시에
3 : TIMEOUT -시간초과 에러
-->
</head>
<body>
<div data-role="page" id="firstPg">
<div data-role="header" data-position="fixed" id="header">
<h3>GeoLocation</h3>
</div><!-- header -->
<div role="main" class="ui-content">
<div id="div1"></div>
</div><!-- main -->
<div data-role="footer" data-position="fixed">
<h3>footer</h3>
</div><!-- footer -->
</div><!-- page1 -->
</div>
</body>
</html>
'기존카테고리 > 하이브리드앱' 카테고리의 다른 글
| [jQuery Mobile] 미디어 플레이어 조작 (0) | 2017.11.04 |
|---|---|
| 구글 MAP API (0) | 2017.11.04 |
| [jQuery Mobile] 세션스토리지, 로컬스토리지 (0) | 2017.11.03 |
| [jQuery Mobile] pagebeforehide (0) | 2017.11.03 |
| [jQuery Mobile] pagebeforecreate (0) | 2017.11.03 |