react & react native

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

jongviet 2022. 4. 20. 22:03

*4월20일

 

#카카오맵 sdk
-리액트용 카카오맵 SDK! 리액트 내에서 정말 편하게 쓸 수 있게 제작되어 있다. 
 
yarn add or npm install react-kakao-maps-sdk
 
-카카오 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>