[재활용 프로젝트][리액트] 카카오 api Typescript 맵 구현

목차

 

카카오 api를 통해 리액트로 맵을 구현해 보았다.

 

usegeolocation을 이용해 내 위치를 띄우는 코드

import useGeolocation from 'utils/useGeolocation';
import { Map, MapMarker } from 'react-kakao-maps-sdk';

const { kakao } = window;


export default function KaKaoMap() {
  const location = useGeolocation();  //불러온 내 위치

  return (
      <Map
        center={{
          lat: location.coordinates.latitude,
          lng: location.coordinates.longitude,
        }} // 지도의 중심 좌표
        style={{ width: '800px', height: '600px' }} // 지도 크기
        level={3} // 지도 확대 레벨
      >
        );
}

 

useGeolocation 페이지

import { useState, useEffect } from 'react';

interface locationType {
  loaded: boolean;
  coordinates: { latitude: number; longitude: number };  //무조건 정보를 받아옴
  error?: { code: number; message: string };   //error는 발생할 수도있으므로 ?
}

function useGeolocation() {
  const [location, setLocation] = useState<locationType>({
    loaded: false,
    coordinates: { latitude: 0, longitude: 0 },
  });

  // 성공에 대한 로직
  const onSuccess = (location: {
    coords: { latitude: number; longitude: number };
  }) => {
    setLocation({
      loaded: true,
      coordinates: {
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
      },
    });
  };

  // 에러에 대한 로직
  const onError = (error: { code: number; message: string }) => {
    setLocation({
      loaded: true,
      coordinates: {
        latitude: error.code,
        longitude: error.code,
      },
      error,
    });
  };

  useEffect(() => {
    // navigator 객체 안에 geolocation이 없다면
    // 위치 정보가 없는 것.
    if (!('geolocation' in navigator)) {
      onError({
        code: 0,
        message: 'Geolocation not supported',
      });
    }
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
    console.log(location);
  }, []);

  return location;
}

export default useGeolocation;

 

 

완성된 지도 모습

위치가 반영되어 지도가 띄어진 모습

 

 

 

 

 

 

참고

 

https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/overlay/categoryMarker

다양한 이미지 마커 표시하기 | react-kakao-maps-sdk docs