확대, 축소 이벤트 등록하기

지도를 확대, 축소하거나, 지도 API의 특정 메소드를 호출하여 지도 레벨이 변경되는 경우에는 zoom_changed 이벤트가 발생합니다. 이 예제에서는 지도 레벨이 변경되었을 때 지도 아래쪽에 변경된 지도 레벨을 뿌려주고 있습니다. 줌 컨트롤을 이용하거나 마우스 스크롤을 이용하여 지도를 확대, 축소해보세요.

original docs : https://apis.map.kakao.com/web/sample/addMapZoomChangedEvent/

import { Map, ZoomControl } from "react-kakao-maps-sdk"
import useKakaoLoader from "./useKakaoLoader"
import { useState } from "react"

export default function AddMapZoomChangedEvent() {
  useKakaoLoader()
  const [result, setResult] = useState("")

  return (
    <>
      <Map // 지도를 표시할 Container
        id="map"
        center={{
          // 지도의 중심좌표
          lat: 33.450701,
          lng: 126.570667,
        }}
        style={{
          width: "100%",
          height: "350px",
        }}
        level={3} // 지도의 확대 레벨
        onZoomChanged={(map) => {
          const level = map.getLevel()
          setResult(`현재 지도 레벨은 ${level} 입니다`)
        }}
      >
        <ZoomControl />
      </Map>
      <p>
        <em>지도를 확대 또는 축소 해주세요!</em>
      </p>
      <p id="result">{result}</p>
    </>
  )
}

Open Sandbox