[javascript] 내 위치의 경도, 위도 정보 알아보기 (navigator.geolocation.getCurrentPosition)

 

웹 브라우저에서 제공하는 위치 정보 메소드 중 아래의 메소드를 사용하면 됩니다.

navigator.geolocation.getCurrentPosition(success, error, options)

 

 

 

 

GeolocationPosition의 coords 속성 상세 설명

`coords` 객체는 사용자의 지리적 위치에 대한 상세 정보를 제공합니다. 

주요 속성은 다음과 같습니다:

1. `accuracy`: 35937.106310649929
   - 위도와 경도 값의 정확도를 미터 단위로 나타냅니다.
   - 이 경우 약 35.9km의 오차 범위를 가집니다.

2. `altitude`: null
   - 해수면 기준 고도를 미터 단위로 나타냅니다.

3. `altitudeAccuracy`: null
   - 고도 값의 정확도를 미터 단위로 나타냅니다.

4. `heading`: null
   - 기기의 이동 방향을 도(degree) 단위로 나타냅니다 (0°~360°).

5. `latitude`: 37.2310015
   - 위도를 십진수 도(degree) 단위로 나타냅니다.
   - 양수는 북위, 음수는 남위를 의미합니다.

6. `longitude`: 126.9530624
   - 경도를 십진수 도(degree) 단위로 나타냅니다.
   - 양수는 동경, 음수는 서경을 의미합니다.

7. `speed`: null
   - 기기의 이동 속도를 초당 미터(m/s) 단위로 나타냅니다.

---

 

error 코드의 종류

 

1. `PERMISSION_DENIED`: 사용자가 위치 정보 접근을 거부한 경우
2. `POSITION_UNAVAILABLE`: 위치 정보를 사용할 수 없는 경우
3. `TIMEOUT`: 위치 정보 요청 시간이 초과된 경우
4. `UNKNOWN_ERROR`: 기타 알 수 없는 오류가 발생한 경우

 

---

 

options 종류

 

1. `enableHighAccuracy`: Boolean
   - 기본값: false
   - true로 설정하면 더 정확한 위치를 요청합니다.
   - 단, 응답 시간이 더 길어지고 배터리 소모가 증가할 수 있습니다.

2. `timeout`: Number
   - 기본값: Infinity
   - 위치 정보를 반환받기까지 기다릴 최대 시간(밀리초)을 지정합니다.
   - 지정된 시간 내에 위치를 얻지 못하면 오류가 발생합니다.

3. `maximumAge`: Number
   - 기본값: 0
   - 캐시된 위치 정보를 사용할 수 있는 최대 시간(밀리초)을 지정합니다.
   - 0으로 설정하면 항상 현재 위치를 요청합니다.
   - Infinity로 설정하면 항상 캐시된 위치를 사용합니다.

 

 

react 에서 사용하려면 아래처럼 사용하면 된다. 

  useEffect(() => {
    const success = (position) => {
      const { latitude, longitude } = position.coords;
      console.log('■■■■■', position);
      const sortedPlaces = sortPlacesByDistance(
        AVAILABLE_PLACES,
        latitude,
        longitude
      );
      setAvailablePlaces(sortedPlaces);
    };
    
    const error = (err) => {
      const errorMessages = {
        1: "사용자가 위치 정보 접근을 거부했습니다.",
        2: "위치 정보를 사용할 수 없습니다.",
        3: "위치 정보 요청 시간이 초과되었습니다.",
        0: "알 수 없는 오류가 발생했습니다."
      };
      
      console.error(errorMessages[err.code] || errorMessages[0]);
    };
    
    const options = {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
    };
    
    navigator.geolocation.getCurrentPosition(success, error, options);
  }, []);

 

 

적용 후, 화면을 새로고침하면 아래처럼 내 위치 정보 확인창이 뜨게 됩니다

 

 

그리고 허용을 안하면 콘솔에 에러메세지도 정상적으로 출력되는 걸 확인할 수 있습니다.