카카오맵 API와 Geolocation API을 이용하여 실시간 동선 그리기 feat. React

if (navigator.geolocation) {
  // Geolocation API를 사용할 수 있는 경우
  navigator.geolocation.getCurrentPosition(
    (position) => {
      // 위치 정보를 가져오는데 성공한 경우

      // position 객체에서 좌표 정보를 가지고 옵니다
      const lat = position.coords.latitude; // 위도
      const lon = position.coords.longitude; // 경도
    },
    (error) => {
      // 위치 정보를 가져오는데 실패한 경우`
    }
  );
} else {
  // Geolocation API를 사용할 수 없는 경우
}

const mapContainer = document.getElementById("map"); // 지도를 표시할 div
const mapOption = {
  center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
  level: 3, // 지도의 확대 레벨
};

const map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 선을 구성하는 좌표 배열입니다. 이 좌표들을 이어서 선을 표시합니다
const linePath = [
  new kakao.maps.LatLng(33.452344169439975, 126.56878163224233),
  new kakao.maps.LatLng(33.452739313807456, 126.5709308145358),
  new kakao.maps.LatLng(33.45178067090639, 126.5726886938753),
];

// 지도에 표시할 선을 생성합니다
const polyline = new kakao.maps.Polyline({
  path: linePath, // 선을 구성하는 좌표배열 입니다
  strokeWeight: 5, // 선의 두께 입니다
  strokeColor: "#FFAE00", // 선의 색깔입니다
  strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
  strokeStyle: "solid", // 선의 스타일입니다
});

// 지도에 선을 표시합니다
polyline.setMap(map);

const [map, setMap] = useState(null);
const [positionArr, setPositionArr] = useState([]);

const successHandler = (position) => {
  // 초기 맵 셋팅
  let mapContainer = document.getElementById("map"), // 지도를 표시할 div
    mapOption = {
      center: new kakao.maps.LatLng(
        position.coords.latitude, // 현재 위치 기반 위도
        position.coords.longitude // 현재 위치 기반 경도
      ), // 지도의 중심좌표
      level: 3, // 지도의 확대 레벨
    };

  let kakaoMap = new kakao.maps.Map(mapContainer, mapOption); // 지도 생성

  // 라인을 그리기 위해 Map 객체를 state에 저장
  setMap(kakaoMap);
};

const errorHandler = (error) => {
  // Geolocation API를 사용할 수 없는 경우
  alert("GPS를 사용할 수 없습니다. 위치정보 설정을 확인해주세요.");
};

useEffect(() => {
  const getCurLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(successHandler, errorHandler);
    } else {
      alert("GPS를 사용할 수 없습니다. 위치정보 설정을 확인해주세요.");
    }
  };
  getCurLocation();
}, []);

// 라인을 그리는 함수
const makeLine = useCallback(
  (position) => {
    let linePath = position;

    var polyline = new kakao.maps.Polyline({
      path: linePath,
      strokeWeight: 5,
      strokeColor: "#FFAE00",
      strokeOpacity: 0.7,
      strokeStyle: "solid",
    });

    // 지도에 선을 표시합니다
    polyline.setMap(map);
  },
  [map]
);

// 라인을 그리기 위한 좌표 배열을 만들어주는 함수
const setLinePathArr = (position) => {
  const moveLatLon = new kakao.maps.LatLng(
    position.coords.latitude,
    position.coords.longitude
  );
  const newPosition = positionArr.concat(moveLatLon);
  setPositionArr(newPosition);

  // 라인을 그리는 함수
  makeLine(newPosition);
};

useEffect(() => {
  // map이 변경될 시 확인하고 map이 존재하면 5초마다 현재 위치를 가져오는 함수를 실행
  if (map) {
    let interval = setInterval(() => {
      navigator.geolocation.getCurrentPosition(setLinePathArr);
    }, 5000);

    return () => {
      clearInterval(interval);
    };
  }
}, [map]);