April 20, 2022 - react-kakao-map-sdk

*4월20일

 

#카카오맵 sdk

-리액트용 카카오맵 SDK! 리액트 내에서 정말 편하게 쓸 수 있게 제작되어 있다. 

 

yarn add or npm install react-kakao-maps-sdk

source: https://react-kakao-maps-sdk.jaeseokim.dev/

 

-카카오 developers에서 javascript key만 발급 받고 localhost 혹은 별도 도메인을 등록 후 사용하면 된다!

 

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_APP_KEY%&libraries=services,clusterer"></script>

 

 

-현재 위치 확인 및 간단한 옵션 설정

 

  const geoOption = {

    enableHighAccuracy: true, // literally accuracy

    timeout: 10000, // gps 값 요청 후 최대 대기 시간

  };

    if (navigator.geolocation) {

      navigator.geolocation.getCurrentPosition(

        (position) => {

// position이라는 state를 활용하여 내 위치 값을 가져와 저장

          setPosition({

            lat: position.coords.latitude,

            lng: position.coords.longitude,

            title: "현재 위치",

          });

        },

        (e) => {

          console.log(e);

        },

        geoOption

      );

    }

 

 

-간편하게 import 후, JSX 형태로 <Map>을 불러와서 편하게 사용

 

import {
  CustomOverlayMap,
  MapMarker,
  MarkerClusterer,
} from "react-kakao-maps-sdk";

 

<Map

              id={"map"}

              isPanto={true}

              center={{ lat: position.lat, lng: position.lng }}

              level={mapLevel}

              onCenterChanged={() => {

                // 지도 위치 이동되었을 때 발동, 이동된 위도, 경도 값을 기준으로 다른 이벤트 작동 시킬 때 활용

              }}

              onDragEnd={(map) => {

                   // 지도에 대한 드래그를 마쳤을 때 발동

              }}

              onZoomChanged={(map) => {

                setViewPoint({

                  level: map.getLevel(), // 줌인 또는 줌아웃 했을 때 발동, 지도의 레벨을 확인할 때 활용

                });

              }}

              tileAnimation={true}

            >

              <MarkerClusterer averageCenter={true} minLevel={10}> // 클러스터 형태로 띄우기 위해 활용, MapMarker를 감싸주면됨

                    <MapMarker

                      image={{

                        src: img, // 원하는 커스텀 이미지 사이즈에 맞게 적용 가능

                        size: {

                          width: 32,

                          height: 40,

                        },

                      }}

                      position={position.latlng}

                      key={index}

 

                      onClick={(marker) => {

                        const location = marker.getPosition();

                        // 특정 마커 클릭 시 해당 마커에 대한 좌표값 획득 가능 -> 추가적인 이벤트 처리

                      }}

                    />

                  ))}

              </MarkerClusterer>

            </Map>