JavaScript/8. 오디오 비디오 제어 및 위치 정보 서비스, 웹 워커

Day 50 : Geolocation 객체를 이용한 위치 정보 서비스

pancakemaker 2021. 12. 27. 11:17

1. 위치 정보 서비스(Geolocation)

: 브라우저가 현재 위도와 경도를 자바스크립트 코드에서 공급하는 서비스

 

2. geolocation 객체

navigator.geolocation
또는
window.navigator.geolocation

 

3. 현재 위치 얻기 : getCurrentPosition()

navigator.geolocation.getCurrentPosition(positionCallback, errorCallback, options)

- positionCallback : 현재 위치가 파악되었을 때 호출되는 콜백 함수명
- errorCallback : 위치 파악 중 오류가 발생하였을 때 호출되는 콜백 함수명. 생략 가능
- options : 위치 파악 허용 최대 시간, 대기 시간, 위치에 대한 정확도 등의 정보를 담은 객체. 생략 가능

 

<예시>

<!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>

 

4. 반복 위치 서비스 : watchPosition()

: 이동 중에 위치가 변경될 때마다 계속 위치 서비스를 받을 수 있음

id = navigator.geolocation.watchPosition(positionCallback, errorCallback, options)

- positionCallback : 위치가 변경될 때마다 호출되는 콜백 함수
- errorCallback : 위치 파악 중 오류가 발생하였을 때 호출되는 콜백 함수. 생략 가능
- options : 위치 파악 최대 시간, 대기 시간, 위치에 대한 정확도 등의 정보를 담은 객체. 생략 가능
- 리턴값 : 반복 위치 서비스 id

 

5. 반복 위치 서비스 중단 : clearWatch()

navigator.geolocation.clearWatch(watchID);

 

<예시>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>watchPosition()으로 반복 위치 서비스</title>
</head>
<body>
	<h3>watchPosition()으로 반복 위치 서비스</h3>
	<hr>
	<div id="msg">이곳에 위치 정보 출력</div>
	<div id="map"></div>
	<script>
		if(!navigator.geolocation) {
			alert("geolocation 지원하지 않음");
		} else {
			var options = {
				//3개의 값을 가진 전역 객체
				//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 = "http://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>