BOM의 navigator 내장객체란?
Jquery에는 DOM과 BOM이 있다고 했어요.
그 중에서 BOM (Browser Object Model)의 내장객체중에서 navigator이 있습니다.
인터넷 웹 서칭을 하다보면 지도를 많이 볼 수 있을거에요. 지도를 직접 웹에 불러오도록 하는 것을 아래 코드를 통해서 보여드릴게요.
우선, 이번 글에서는 navigator를 통해서 현재 ip의 위도,경도를 브라우저에 출력하도록 할게요.
버튼타입을 누름으르써, 해당 결과값이 출력되도록 설계를 할 수 있습니다.
그렇다면, 아래와 같이 input타입의 button과 결과를 받아볼 수 있도록 div를 만들어 주면 됩니다.
|
1
2
3
4
5
|
<body>
<input type='button' value='내 위치조회'><br>
<div id='result'></div>
</body>
|
기본적인 틀이 만들어 졌다면, 이제 Jquery를 통한 기능들을 작성해야겠죠?
Script태그안에서 무엇을 적으면 될까요?
navigator.geolocation API
원래 한동안 위치정보는 일반적으로 앱을 통해서만 제공되었던 특징적인 정보이었지만, HTML5을 통해 각종 모바일 장비들의 브라우져들이 직접 위치 정보를 수집하기 시작하였다. 따라서 이제는 네이티브 앱이나 하이브리드 앱을 통해서 위치 정보를 수집할 필요 없이 직접 웹에서도 위치 정보를 수집할 수 있다. 그것이 바로 navigator.geolocation API이다.
* 위치 정보 수집 함수
getCurrentPosition 함수는 위치 정보를 수집하는 API로 첫번째 인자는 요청이 성공 했을 경우의 콜백함수,
두번째 인자는 요청이 실패 했을 경우의 콜백 함수, 그리고 세번째 인자는 수집 옵션을 인자로 받고 있다. 여기서 PositionOptions는 아래와 같은 인자들을 설정할 수 있다.
따라서 아래의 코드에서, navigator.geolocation.getCurrentPosition(success, error)는 성공시 success함수가 호출되고, 실패시 error함수가 호출되도록 작성된 코드입니다.
이때, 성공했을경우, position이라는 위치정보객체를 매개변수로 사용하여
var lat = position.coords.latitude : 위도값 저장
var lon= position.coords.longitude: 경도값 저장
이를 div의 text안에 넣는다. (출력되도록)
반면에 , 실패했을경우, 오류객체 e를 매개변수로 div의 text안에 e.code와 e.message를 넣는다. (출력되도록)
| 참고할, 위치 객체 사용자의 위치는 Position 객체로 표현되며 Coordinates 객체를 참조합니다.Position 객체는 아래의 프로퍼티를 갖는 자바스크립트 객체입니다 :
Coordinates 객체는 아래의 프러퍼티를 갖는 자바스크립트 객체입니다 :
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<head>
<meta charset=UTF-8">
<script src='jquery-3.2.1.min.js'></script>
<script>
$(document).ready(function(){
$('input:button').on('click',function(){
navigator.geolocation.getCurrentPosition(success, error)
//navigator.geolocation은 위치객체생성
//(성공시 호출함수, 오류시 호출함수, (생략가능=gps/기지국[ip]))
}); //Callback은 즉각적x 때가되면 알아서 생성되도록
}); //ready-end
//getCurrentPosition에 의해 위치가 성공적으로 파악이되면 success를~ 실패하면 error를~
function success(position){ //성공객체_위치정보객체
var lat = position.coords.latitude; //위도를 저장
var lon = position.coords.longitude; //경도를 저장
$('#result').text('나의위도='+lat+'나의 경도='+lon)
}
function error(e){ //오류객체
$('#result').text(e.code+':'+e.message);
}
</script>
</head>
|
'WEB 기초 > Jquery' 카테고리의 다른 글
| 8. 지도 나타내기 (현재위치 화살표표시 & 위/경도 출력) (0) | 2018.04.21 |
|---|---|
| 6. 이미지나열 이벤트 & 타이머 (심화문제) (0) | 2018.04.21 |
| 5. 버튼클릭 이벤트 (심화문제) (0) | 2018.04.19 |
| 4. jquery 이벤트 총정리 (on, off, one, click, mouseover, mouseout) (0) | 2018.04.18 |
| 3. Css 제어_응용하기 (0) | 2018.04.16 |