현재 위치 좌표 요청 | navigator의 geolocation 객체

 

사~실 이건 자바스크립트인데요, 카카오맵 하면서 진행했던 거라서 뭔가 같이 있으면 좋겠다 싶음.....

 

const center = ref({ lat: 37.5291904, lng: 126.9202944 })

/**
 * 현재 위치 좌표 요청
 */
const setCurrentLocation = () => {
  if ('geolocation' in navigator) {
    navigator.geolocation.getCurrentPosition((position) => {
      const { latitude, longitude } = position.coords
      center.value = { lat: latitude, lng: longitude }
    })
  }
}

 

 

Navigator: geolocation 속성 - Web API | MDN

장치의 위치 정보에 접근할 수 있는 Geolocation 객체 반환

 

Geolocation

• getCurrentPosition()
  • 장치의 현재 위치 조사 후 GeolocationPosition 객체로 반환
  • GeolocationPosition 객체
    • coords : 주어진 시간의 위치 (latitude, longitude 등 반환)
    • timestamp : 위치를 기록한 시간
• watchPosition()
  • 장치의 위치가 변경될 때마다 호출하는 콜백 등록
• clearWatch()
  • watchPosition()을 이용해 등록한 콜백을 삭제

 

---

이후 변경사항

 

navigator.geolocation.getCurrentPosition 의 비동기적인 특성에 따라 함수 로직 변경

재사용성을 위해 공통 함수로 분리

 

/**
 * 현재 위치 좌표 요청
 */
export const getCurrentLocation = (): Promise<{ lat: number; lng: number }> => {
  return new Promise((resolve) => {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const { latitude, longitude } = position.coords
          resolve({ lat: latitude, lng: longitude })
        },
        () => {
          resolve({ lat: 37.492925, lng: 127.02811 })
        },
      )
    } else {
      resolve({ lat: 37.492925, lng: 127.02811 })
    }
  })
}

 

반환 값은 무조건 { lat: number, lng: number } 타입이지만, Promise 반환 값의 타입을 선언해줘야 변수에 할당해줄 때 타입 에러가 나지 않음