useMap

useMap()은 현재 NaverMap 인스턴스(naver.maps.Map)를 반환하는 훅입니다. NaverMap 하위 컴포넌트에서 사용합니다.

사용법

import { useMap } from 'react-naver-maps';

function ZoomControls() {
  const map = useMap();

  return (
    <div>
      <button onClick={() => map.setZoom(map.getZoom() + 1)}>+</button>
      <button onClick={() => map.setZoom(map.getZoom() - 1)}>-</button>
    </div>
  );
}

지도 이동

function MoveButton() {
  const map = useMap();

  return (
    <button onClick={() => map.panTo({ lat: 37.5666, lng: 126.9784 })}>
      서울시청으로 이동
    </button>
  );
}

center와 zoom을 동시에 변경할 때는 morph()를 사용합니다.

map.morph(new navermaps.LatLng(33.359, 126.5344), 12);

반환값

컴포넌트 구조

NaverMap 하위에서만 동작합니다.

<Container style={{ width: '100%', height: '400px' }}>
  <NaverMap>
    <ZoomControls /> {/* useMap() 사용 가능 */}
  </NaverMap>
</Container>