카카오맵으로 내 현재 위치 좌표 띄우기

나는 팀프로젝트로 지도부분을 담당하였다.
그래서 오늘 기능을 처음 만들어 보기로 하였다.

가장 먼저 리액트용 카카오 라이브러리를 깔았다.
yarn add react-kakao-maps-sdk

그리고 카카오맵을 내 api 키를 이용하여 띄웠다.

declare const window: typeof globalThis & {
  kakao?: any;
};

export default function MainUI()  {

  const [isOpen, setIsOpen] = useState(false);




useEffect(() => {
      const script = document.createElement("script");
      script.async = true;
      script.src =
        "//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=api키&libraries=services";

      document.head.appendChild(script);
      script.onload = () => {
        window.kakao.maps.load(function () {
          setIsOpen(true);
        });
      };
    }, []);

return(
  {isOpen && (<Map
          center={{
            lat: 33.5563,
            lng: 126.79581
          }}
          style={{ width: "1200px", height: "800px" }}
        >
          <MapMarker
            position={{ lat:33.5563, lng: 126.79581 }}
          ></MapMarker>
        </Map>) }
        )
  }

이렇게 카카오맵을 띄웠다.
일단 한페이지에서 적고 나중에 hooks 패턴을 사용하여 나누려고 한다.
리액트용 카카오맵 라이브러리는 일반 카카오맵 라이브러리보다 조작이 편하다.
isOpen이 트루면 왜 map을 띄우게 했나면 script.onload 안에 아무것도 안적으면 카카오맵이 첫 화면이 마운트되고 리렌더링이 되어야 나오기 때문에
페이지 들어가자마자 띄우게 하려고 하였다.

그리고 이제 현재 위치 좌표를 얻어와야 한다.
현재 위치 좌표를 얻기위해서는 Geolocation API를 사용해야 한다.
Geolocation API는 사용자의 현재 위치를 가져오는 api이다.
Geolocation API를 사용하려면 navigator.geolocation 객체를 이용해야한다.

const [position, setPosition] = useState(null);

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        setPosition(position);
        console.log(position);
      },
      (error) => {
        console.error(error);
      },
      { enableHighAccuracy: true }
    );
  }, []);

현재 위치 좌표를 받기 위해서 useEffect안에서 Geolocation API를 호출하였다.
Geolocation API에는 여러 콜백함수가 있다.
나는 그 중에서 getCurrentPosition 함수를 사용하였다.
getCurrentPosition 함수는 현재 사용자 위치를 가져와준다.
navigator.geolocation.getCurrentPosition(success, error, [options])
이 함수는 3개의 매개 변수를 받는다.
success자리에 사용자 현재 위치가 들어오고, 에러는 error자리에 들어오게 된다. 또 추가적으로 지원해주는 옵션이 있는데
enableHighAccuracy 이 옵션은 사용자 현재 위치를 더 정확하게 수신하고 싶을 때 사용하는 거다.
그래서 enableHighAccuracy: true를 해주면 더 정확한 현재 위치를 가져오게 된다.
하지만 단점으로는 응답 속도가 느려지며, 장치의 전력 소모량이 증가한다.
그리고 position으로 받아온 현재 위치 좌표값 setPosition(position) setState에 담는다.

마지막으로

<MapMarker
           position={{ lat: position?.coords.latitude, lng: position?.coords.longitude }}
         ></MapMarker>

마커 태그에 위도와 경도를 등록해주면 현재 내 위치 좌표가 지도에 찍히게 된다!!