브라우저는 navigator.geolocation 객체를 노출 시켜 모든 지리적 위치 작업을 수행합니다.

https://flaviocopes.com/geolocation-api/ 

보안을 위해 HTTPS를 사용하여 제공되는 페이지에서만 사용할 수 있으며 모든 최신 브라우저에서 사용할 수 있습니다.

navigator.geolocation

window는 전역 객체이므로 window를 지정하지 않고 탐색기에 액세스 할 수 있습니다. 

브라우저에 의해 노출 된 window.navigator 속성은 많은 웹 플랫폼 API를 사용할 수 있게 하는 컨테이너 객체인 Navigator 객체를 가리킵니다.

geolocation 객체는 다음 방법을 제공합니다.

• getCurrentPosition()
• watchPosition()
• clearWatch()

첫 번째는 현재 위치 좌표를 얻는 데 사용됩니다. 이 메소드를 처음 호출하면 브라우저는 사용자에게 이 정보를 공유 할 수 있는 권한을 자동으로 요청합니다.

이 인터페이스는 Chrome에서 다음과 같이 표시됩니다.

Firefox에서 :

Safari에서 :

원산지 당 한 번만 수행하면 됩니다. 결정을 변경하고 권한 결정을 되돌릴 수 있습니다. 도메인 근처에 있는 자물쇠 아이콘을 클릭하여 Chrome을 사용하는 방법은 다음과 같습니다.

이 권한이 부여되면 계속 진행할 수 있습니다.

사용자 위치 얻기 

이 샘플 코드부터 시작하겠습니다 :

navigator.geolocation.getCurrentPosition(() => {})

권한 패널이 나타납니다. 권한을 허용하십시오.

함수가 콜백 함수를 원하기 때문에 빈 화살표 함수를 어떻게 전달했는지 주목하십시오.

이 함수에는 실제 위치가 포함 된 Position 객체가 전달됩니다.

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
})

이 객체에는 2 가지 속성이 있습니다.

• coords, Coordinates 객체
• timestamp, 위치가 검색된 UNIX 타임 스탬프 좌표 객체에는 위치를 정의하는 여러 속성이 있습니다.
• accuracy 측정 된 위치의 정확도 (미터 단위)
• altitude 측정 된 고도 값
• altitudeAccuracy 고도 측정 된 고도의 정확도 (미터 단위로 표시)
• heading 장치가 이동하는 방향을 향하고 있습니다. 도 단위로 표시 (0 = 북쪽, 동쪽 = 90, 남쪽 = 180, 서쪽 = 270)
• latitude 측정 된 위도 값
• longitude 측정 된 경도 값
• speed 초당 미터 단위로 표시되는 장치의 이동 속도

구현 및 장치에 따라 일부는 null입니다. 예를 들어 MacBook Air에서 실행되는 Chrome의 경우 정확성, 위도 및 경도 값만 얻었습니다.

navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude)
  console.log(position.coords.longitude)
})

변화의 위치를 ​​관찰 

getCurrentPosition()을 사용하여 수행 할 수 있는 사용자 위치를 한 번 얻는 것 외에도 navigator.geolocation의 watchPosition() 메서드를 사용하여 장치가 통신 할 때마다 변경 될 때마다 호출 될 콜백 함수를 등록 할 수 있습니다. 

navigator.geolocation.watchPosition(position => {
	console.log(position)
})

물론 권한이 부여되지 않은 경우 브라우저는 이 방법으로도 권한을 요청합니다.

navigator.geolocation.clearWatch() 메소드를 호출하여 watchPosition()에서 반환 한 id를 전달하여 위치 감시를 중지 할 수 있습니다.

const id = navigator.geolocation.watchPosition(position => {
	console.log(position)
})

//stop watching after 10 seconds
setTimeout(() => {
  navigator.geolocation.clearWatch(id)
}, 10 * 1000)

사용자가 위치를 거부하면 

위치를 얻기 위해 메소드 중 하나를 호출 할 때 브라우저가 표시하는 권한 팝업 창을 기억하십니까?

사용자가 이를 거부하면 getCurrentPosition() 및 watchPosition() 메소드에 두 번째 매개 변수로 오류 처리 함수를 추가하여 이 시나리오를 가로 챌 수 있습니다.

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
})

두 번째 매개 변수에 전달 된 오브젝트에는 오류 유형을 구별하기 위한 코드 특성이 있습니다.

• 1은 권한이 거부되었음을 의미합니다.
• 2는 위치를 사용할 수 없음을 의미합니다
• 3은 시간 초과를 의미합니다

더 많은 옵션 추가 

이전에 오류에 대해 이야기했을 때 시간 초과 오류에 대해 언급했습니다. 위치를 찾는 데 시간이 걸릴 수 있으며 옵션으로 작업을 수행 할 수 있는 최대 시간을 설정할 수 있습니다.

getCurrentPosition() 및 watchPosition() 메소드에 세 번째 매개 변수를 추가하여 시간 종료를 추가 할 수 있습니다.

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {

})

이 객체 내부에서 속성을 전달할 수 있습니다.

• timeout  요청 오류가 발생하기 전의 밀리 초 수 설정
• maximumAge 브라우저에 의해 캐시 된 위치의 최대 "나이"를 설정합니다. 설정된 밀리 초보다 오래된 것은 허용되지 않습니다.
• enableHighAccuracy 기본적으로 부울 값인 false는 가능한 최고 수준의 정확도를 요구합니다 (더 많은 시간과 전력이 소요될 수 있음)

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {
  timeout: 1000,
  maximumAge: 10000,
  enableHighAccuracy: true
})