예제 13-5. getCurrentPosition()로 현재 위치 파악. 예제 13-6. watchPosition()으로 반복 위치 서비스
WEB/JAVASCRIPT-CONCEPT 2017. 11. 4. 17:55 |2. Geolocation 객체를 이용한 위치 정보 서비스
* 위치 정보 서비스
- 위치 정보 서비스(Geolocation)란 브라우저가 현재 위도와 경도를 자바스크립트 코드에게 공급하는 서비스이다.
* geolocation 객체
브라우저는 geolocation 이름의 객체를 통해 위치 정보 서비스를 제공한다. 이 객체는 다음 2가지 방법으로 접근할 수 있다.
navigator.geolocation
window.navigator.geolocation
* geolocation 객체의 메소드
getCurrentPosition() // 현재 위치 얻기
watchPosition() // 위치가 변경될 때마다 알려주는 반복 위치 서비스 시작
clearWatch() // 반복 위치 서비스 중단
* 현재 위치 얻기
getCurrentPosition()는 호출 즉시 현재위치를 리턴하는 것이 아니라, 위치가 파악되면 호출될 positionCallback(Position) 함수를 등록한다.
1 2 3 4 5 | navigator.geolocation.getCurrentPosition(positionCallback(필수), errorCallback(생략가능), options(생략가능)) positionCallback : 현재 위치가 파악되었을 때 호출되는 콜백 함수명, 필수 errorCallback : 위치 파악 중 오류가 발생하였을 때 호출되는 콜백 함수명, 생략가능 options : 위치 파악 허용 최대 시간, 대기 시간, 위치에 대한 정확도 등의 정보를 담은 객체. 생략가능 | cs |
* Position 타입 객체 (메소드 없음)
coords // 현재 위치를 나타내는 Coordinates 타입의 객체
timestamp // 위치가 파악된 시간 정보
* Coordinates 타입 객체 (메소드 없음)
latitude // 위도의 실수 값
longitute // 경도의 실수 값
accuracy // 위도와 경도의 정확도를 표현하는 실수 값. 미터 단위
altitude // 고도의 실수 값. 미터 단위. 제공하지 않을 때 null
altitudeAccuracy // 고도의 정확도를 표현하는 실수 값. 미터 단위
heading // 컴퓨터나 장치가 움직이는 방향 정보의 실수 값. 시계 방향의 각도(0~360)를 뜻하며,
북쪽 방향이 0도, spped 값이 0이면 이 값은 의미 없음. 제공하지 않을 때 null
speed // 초당 미터 값으로 컴퓨터나 장치가 움직이는 속도. 제공하지 않을 때 null
예제 13-5. getCurrentPosition()로 현재 위치 파악
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>getCurrentPosition()로 현재 위치 파악</title></head> <body> <h3>getCurrentPosition()로 현재 위치 파악</h3> <hr> <div id="msg">이곳에 위치 정보 출력</div> <div id="map"></div> <script> if(!navigator.geolocation) alert("지원하지 않음"); else // found() 콜백 함수 등록 navigator.geolocation.getCurrentPosition(found); // 위치 파악 시 found() 호출. // 위치 정보 들어 있는 position 객체가 매개 변수로 넘어온다. function found(position) { var now = new Date(position.timestamp); var lat = position.coords.latitude; // 위도 var lon = position.coords.longitude; // 경도 var acc = position.coords.accuracy; // 정확도 // 위도와 경도의 소수점 이하 자리가 너무 길어 유효 숫자 6자리로 짜름 lat = lat.toPrecision(6); lon = lon.toPrecision(6); var text = "현재 시간 " + now.toUTCString() + "<br>"; text += "현재 위치 (위도 " + lat + "°, 경도 " + lon + "°)<br>"; text += "정확도 " + acc + "m<br>"; document.getElementById("msg").innerHTML = text; var img = new Image(); img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + lat + "," + lon + "&zoom=13&size=400x300&sensor=false&markers=color:red%7Clabel:C%7C"+ lat +"," + lon + "&key=AIzaSyCsMeRJB-5RGwpEQi8Bqf6kTa_Hw5h1lAc"; document.getElementById("map").appendChild(img); // 구글 지도 이미지를 div의 자식으로 붙임 } </script> </body></html> | cs |
* 반복 위치 서비스
이동 중에 위치가 변경될 때마다 계속 위치 서비스를 받을 수 있다.
이것은 watchPosition() 메소드로 위치가 변경될 때마다 호출되는 콜백 함수를 등록하면 된다.
1 2 3 4 5 | id = navigator.geolocation.watchPosition(positionCallback(필수), errorCallback(생략가능), options(생략가능)) positionCallback : 현재 위치가 파악되었을 때 호출되는 콜백 함수명, 필수 errorCallback : 위치 파악 중 오류가 발생하였을 때 호출되는 콜백 함수명, 생략가능 options : 위치 파악 허용 최대 시간, 대기 시간, 위치에 대한 정확도 등의 정보를 담은 객체. 생략가능 리턴값 : 반복 위치 서비스 id | cs |
1 2 3 4 5 6 7 8 9 | var watchId = navigator.geolocation.watchPosition(changed); // changed()를 콜백 // 함수로 등록하고, 반복 위치 서비스를 시작시킨다. // 위치가 바뀌면 changed()가 호출되고, 위치 정보가 들어 있는 position 객체가 매개 변수로 넘어온다. function changed(position) { var lat = position.coords.latitude; // 변경된 위도 var lon = position.coords.longitude; // 변경된 경도 alert("(" + lat + "," + lon + ") 위치로 변경됨"); } | cs |
매개 변수 position에는 갱신된 위치 정보가 전달된다.
navigator.geolocation.clearWatch(watchID); // watchID의 반복 위치 서비스 중단
예제 13-6. watchPosition()으로 반복 위치 서비스
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>watchPosition()으로 반복 위치 서비스</title></head> <body> <h3>watchPosition()으로 반복 위치 서비스</h3> <hr> <div id="msg">이곳에 위치 정보 출력</div> <div id="map"></div> <script> if(!navigator.geolocation) alert("지원하지 않음"); else { var options = { // watchPosition()의 마지막 매개 변수로 전달 enableHighAccuracy: false, timeout: 5000, maximumAge: 0 }; var img = new Image(); var count=0; var watchID; // changed() 콜백 함수를 등록하고, 반복 위치 서비스 시작 watchID = navigator.geolocation.watchPosition(changed, null, options); } //위치가 바뀌면 changed()가 호출되고, 위치 정보가 들어 있는 position 객체가 매개 변수로 넘어온다. function changed(position) { if(count == 5) { // clearWatch() 테스트를 위해 5번만 서비스 navigator.geolocation.clearWatch(watchID); // 반복 서비스 종료 document.getElementById("msg").innerHTML = "위치 서비스 종료"; return; } var lat = position.coords.latitude; // 변경된 위도 var lon = position.coords.longitude // 변경된 경도 var text = count + ": (위도 " + lat + "°, 경도 " + lon + "°)로 변경됨<br>"; document.getElementById("msg").innerHTML = text; // 위치 정보 출력 // 지도 이미지 갱신 img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + lat + "," + lon + "&zoom=13&size=400x300&sensor=false&markers=color:red%7Clabel:C%7C"+lat +"," +lon; if(count == 0) // 처음이면 구글 지도 이미지 부착 document.getElementById("map").appendChild(img); // 지도 이미지 부착 count++; // 갱신 회수 증가 } </script> </body></html> | cs |
