11/08 38-4 [HTML] Geolocation_1(현재위치)

위치정보를 가져올 때

[navigator.geolocation] 이용!

현재 위치를 일회성으로 가져올 땐  getCurrentPosition()

현재 위치를 갱신할 땐  watchPosition() 메소드를 각각 호출 한다.

두 메소드 다 인자로 (successCallback [, errorCallback, options] ) 가능

successCallback: 성공할 때 콜백 함수 (필수)

errorCallback : 에러 났을 때 콜백 함수 (선택)

options : 위치값, 최대시간, 요청 대기시간,정확도 등등 (선택)

 

successCallback함수에 Position 객체가 첫 번째 파라미터로 전달

[Position  속성들]
coords: Coordinates 객체(여기에 위도/경도가 들어있음  latitude / longitude  )
timestamp:위치를 수집한 시간을 표현하는 숫자

 

 

1. 현재 위치정보를 한 번만 얻어올 것

getCurrentPosition() 메소드 호출

 

우선 콘솔에 찍어보면

console.log(navigator.geolocation);   /// Geolocation { } 객체구만

var span = documen.getElementById('display');
if(navigator.geolocation){   // 브라우저의 geolocation 지원 여부 판단
	span.innerHTML="Geolocation API를 지원하는 브라우저 입니다.";
	  // positionoption객체
	 var options = {'timeout':3000, 'maximumAge':5000}; 
      // 현재 위치 정보 한 번만 얻기 (인자들인 콜백 함수는 밖으로 다 뺌)
    navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);    
}

  function successCallback(position){
    console.log(position);  // GeolocationPosition { coords: GeolocationCoordinates, timestamp: 1667900553940 }
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    span.textContent = '위도:'+lat+'경도:'+lng
 }
 
 function errorCallback(error){
    console.log(error);
    switch(error.code){
        case 0:span.textContent='허용이 거부됨'; break;
        case 1:span.textContent='위치확인 불가'; break;
        case 2:span.textContent='시간 초과'; break;
        default :span.textContent=error.message;
     }
  }

 

Geolocation API : 현재 위치의 위도와 경도 얻기