사용자의 현재 위치를 실시간으로 업데이트, watchPosition()

 

watchPosition()

 

• watchPosition()은 사용자의 위치 변화를 지속적으로 추적하는 Geolocation API의 메서드이다.
• 즉, 사용자의 GPS 정보가 바뀔 때마다 업데이트를 받을 수 있다.

 

 

navigator.geolocation.watchPosition(
  (position) => {
    console.log("위도:", position.coords.latitude);
    console.log("경도:", position.coords.longitude);
  },
  (error) => {
    console.error("에러 발생:", error.message);
  },
  {
    enableHighAccuracy: true, // 높은 정확도 요청
    maximumAge: 0, // 항상 최신 위치 정보 요청
    timeout: 5000, // 5초 안에 응답이 없으면 오류 발생
  }
);

설명:

• position.coords.latitude: 위도
• position.coords.longitude: 경도
• enableHighAccuracy: true: 배터리를 더 소모하지만 GPS 기반의 더 정확한 위치를 요청
• maximumAge: 0: 캐시된 위치 정보 대신 항상 최신 정보를 요청
• timeout: 위치 정보를 가져오는 최대 대기 시간(ms)

 

 

중지하기

const watchId = navigator.geolocation.watchPosition((position) => {
  console.log("현재 위치:", position.coords.latitude, position.coords.longitude);
});

// 특정 조건에서 추적 중지
navigator.geolocation.clearWatch(watchId);

• watchId는 watchPosition()이 반환하는 ID로, clearWatch(watchId)를 호출하면 추적이 멈춘다.

 

 

실시간 위치 추적 예제 (React)

import { useState, useEffect } from "react";

const LocationTracker = () => {
  const [location, setLocation] = useState({ lat: null, lng: null });

  useEffect(() => {
    const watchId = navigator.geolocation.watchPosition(
      (position) => {
        setLocation({
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        });
      },
      (error) => console.error("위치 오류:", error.message),
      { enableHighAccuracy: true, maximumAge: 0, timeout: 5000 }
    );

    return () => navigator.geolocation.clearWatch(watchId); // 컴포넌트 언마운트 시 추적 중지
  }, []);

  return (
    <div>
      <h2>현재 위치</h2>
      <p>위도: {location.lat}</p>
      <p>경도: {location.lng}</p>
    </div>
  );
};

export default LocationTracker;

• 사용자가 이동할 때마다 위도/경도가 자동으로 업데이트됨! 🚀
• useEffect의 return을 이용해 컴포넌트가 언마운트될 때 위치 추적을 중지하도록 처리했다.

 

 

주의할 점

• 사용자 동의 필요
  • watchPosition()을 실행하면 사용자에게 위치 정보 접근 허용을 요청해야 함.
• 배터리 소모 많음
  • GPS를 계속 사용하므로 필요할 때만 실행하고 clearWatch()로 멈춰야 함.
• 브라우저 제한 사항
  • HTTPS 환경에서만 정상 작동하며, 일부 모바일 브라우저에서는 제한될 수 있음.