MapContainer3.js

import React, { useRef } from "react";

const { kakao } = window;
// 스크립트로 kakao maps api를 심어서 가져오면 window 전역 객체에 들어가게 된다.
// 그리고 그걸 사용하려면 window에서 kakao 객체를 뽑아서 사용하면 된다.

// 정기적으로 위치 정보 얻기
const MapContainer3 = props => {
  const [latitude, setLatitude] = React.useState();
  const [longtitude, setLogintitude] = React.useState();

  React.useEffect(() => {
    const timer = setTimeout(() => {
      if (!latitude && !longtitude) {
        window.location.reload();
      }
    }, 500);

    // Geolocation API에 액세스할 수 있는지를 확인
    if (navigator.geolocation) {
      //위치 정보를 정기적으로 얻기
      navigator.geolocation.watchPosition(function (pos) {
        setLatitude(pos.coords.latitude);
        setLogintitude(pos.coords.longitude);
      });
    } else {
      alert("이 브라우저에서는 Geolocation이 지원되지 않습니다.");
    }

    const MARKER_WIDTH = 33, // 기본, 클릭 마커의 너비
      MARKER_HEIGHT = 36, // 기본, 클릭 마커의 높이
      OFFSET_X = 12, // 기본, 클릭 마커의 기준 X좌표
      OFFSET_Y = MARKER_HEIGHT, // 기본, 클릭 마커의 기준 Y좌표
      OVER_MARKER_WIDTH = 40, // 오버 마커의 너비
      OVER_MARKER_HEIGHT = 42, // 오버 마커의 높이
      OVER_OFFSET_X = 13, // 오버 마커의 기준 X좌표
      OVER_OFFSET_Y = OVER_MARKER_HEIGHT, // 오버 마커의 기준 Y좌표
      SPRITE_MARKER_URL =
        "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markers_sprites2.png", // 스프라이트 마커 이미지 URL
      SPRITE_WIDTH = 126, // 스프라이트 이미지 너비
      SPRITE_HEIGHT = 146, // 스프라이트 이미지 높이
      SPRITE_GAP = 10; // 스프라이트 이미지에서 마커간 간격

    const markerSize = new kakao.maps.Size(MARKER_WIDTH, MARKER_HEIGHT), // 기본, 클릭 마커의 크기
      markerOffset = new kakao.maps.Point(OFFSET_X, OFFSET_Y), // 기본, 클릭 마커의 기준좌표
      overMarkerSize = new kakao.maps.Size(
        OVER_MARKER_WIDTH,
        OVER_MARKER_HEIGHT
      ), // 오버 마커의 크기
      overMarkerOffset = new kakao.maps.Point(OVER_OFFSET_X, OVER_OFFSET_Y), // 오버 마커의 기준 좌표
      spriteImageSize = new kakao.maps.Size(SPRITE_WIDTH, SPRITE_HEIGHT); // 스프라이트 이미지의 크기

    let positions = [
        // 마커의 위치
        new kakao.maps.LatLng(latitude, longtitude),
        new kakao.maps.LatLng(37.453924, 126.7171398),
        new kakao.maps.LatLng(37.454824, 126.7171358),
      ],
      selectedMarker = null; // 클릭한 마커를 담을 변수

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

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

    // 지도 위에 마커를 표시합니다
    for (var i = 0, len = positions.length; i < len; i++) {
      const gapX = MARKER_WIDTH + SPRITE_GAP, // 스프라이트 이미지에서 마커로 사용할 이미지 X좌표 간격 값
        originY = (MARKER_HEIGHT + SPRITE_GAP) * i, // 스프라이트 이미지에서 기본, 클릭 마커로 사용할 Y좌표 값
        overOriginY = (OVER_MARKER_HEIGHT + SPRITE_GAP) * i, // 스프라이트 이미지에서 오버 마커로 사용할 Y좌표 값
        normalOrigin = new kakao.maps.Point(0, originY), // 스프라이트 이미지에서 기본 마커로 사용할 영역의 좌상단 좌표
        clickOrigin = new kakao.maps.Point(gapX, originY), // 스프라이트 이미지에서 마우스오버 마커로 사용할 영역의 좌상단 좌표
        overOrigin = new kakao.maps.Point(gapX * 2, overOriginY); // 스프라이트 이미지에서 클릭 마커로 사용할 영역의 좌상단 좌표

      // 마커를 생성하고 지도위에 표시합니다
      addMarker(positions[i], normalOrigin, overOrigin, clickOrigin);
    }

    // 마커를 생성하고 지도 위에 표시하고, 마커에 mouseover, mouseout, click 이벤트를 등록하는 함수입니다
    function addMarker(position, normalOrigin, overOrigin, clickOrigin) {
      // 기본 마커이미지, 오버 마커이미지, 클릭 마커이미지를 생성합니다
      const normalImage = createMarkerImage(
          markerSize,
          markerOffset,
          normalOrigin
        ),
        overImage = createMarkerImage(
          overMarkerSize,
          overMarkerOffset,
          overOrigin
        ),
        clickImage = createMarkerImage(markerSize, markerOffset, clickOrigin);

      // 마커를 생성하고 이미지는 기본 마커 이미지를 사용합니다
      const marker = new kakao.maps.Marker({
        map: map,
        position: position,
        image: normalImage,
      });

      // 마커 객체에 마커아이디와 마커의 기본 이미지를 추가합니다
      marker.normalImage = normalImage;

      // 마커에 mouseover 이벤트를 등록합니다
      kakao.maps.event.addListener(marker, "mouseover", function () {
        // 클릭된 마커가 없고, mouseover된 마커가 클릭된 마커가 아니면
        // 마커의 이미지를 오버 이미지로 변경합니다
        if (!selectedMarker || selectedMarker !== marker) {
          marker.setImage(overImage);
        }
      });

      // 마커에 mouseout 이벤트를 등록합니다
      kakao.maps.event.addListener(marker, "mouseout", function () {
        // 클릭된 마커가 없고, mouseout된 마커가 클릭된 마커가 아니면
        // 마커의 이미지를 기본 이미지로 변경합니다
        if (!selectedMarker || selectedMarker !== marker) {
          marker.setImage(normalImage);
        }
      });

      // 마커에 click 이벤트를 등록합니다
      kakao.maps.event.addListener(marker, "click", function () {
        // 클릭된 마커가 없고, click 마커가 클릭된 마커가 아니면
        // 마커의 이미지를 클릭 이미지로 변경합니다
        if (!selectedMarker || selectedMarker !== marker) {
          // 클릭된 마커 객체가 null이 아니면
          // 클릭된 마커의 이미지를 기본 이미지로 변경하고
          !!selectedMarker &&
            selectedMarker.setImage(selectedMarker.normalImage);

          // 현재 클릭된 마커의 이미지는 클릭 이미지로 변경합니다
          marker.setImage(clickImage);
        }

        // 클릭된 마커를 현재 클릭된 마커 객체로 설정합니다
        selectedMarker = marker;
      });
    }

    // MakrerImage 객체를 생성하여 반환하는 함수입니다
    function createMarkerImage(markerSize, offset, spriteOrigin) {
      const markerImage = new kakao.maps.MarkerImage(
        SPRITE_MARKER_URL, // 스프라이트 마커 이미지 URL
        markerSize, // 마커의 크기
        {
          offset: offset, // 마커 이미지에서의 기준 좌표
          spriteOrigin: spriteOrigin, // 스트라이프 이미지 중 사용할 영역의 좌상단 좌표
          spriteSize: spriteImageSize, // 스프라이트 이미지의 크기
        }
      );

      return markerImage;
    }

    map.relayout();

    return () => {
      clearTimeout(timer);
    };
  }, [latitude, longtitude]);
  // useEffect를 이용하여 렌더링 될 때 지도를 띄우는 데, 2번째 인자로 []를 줘서 처음 렌더링 될 때 한번만 띄우게 한다.

  return (
    <div>
      <div
        style={{ margin: "auto", width: "500px", height: "500px" }}
        id="myMap"
      ></div>
      <p>위도 : {latitude}</p>
      <p>경도 : {longtitude}</p>
    </div>
  );
};

export default MapContainer3;