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

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

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

결과

Loading...

라이브 에디터

function(){ const Main = () => { const [level, setLevel] = useState() return ( <> <Map // 지도를 표시할 Container center={{ // 지도의 중심좌표 lat: 33.450701, lng: 126.570667, }} style={{ width: "100%", height: "450px", }} level={3} // 지도의 확대 레벨 onZoomChanged={(map) => setLevel(map.getLevel())} > <ZoomControl /> </Map> {level && <p>{'현재 지도 레벨은 ' + level + ' 입니다'}</p>} </> ) } return (<Main/>) }

function(){
  const Main = () => {
    const [level, setLevel] = useState()
    return (
      <>
        <Map // 지도를 표시할 Container
          center={{
            // 지도의 중심좌표
            lat: 33.450701,
            lng: 126.570667,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
          onZoomChanged={(map) => setLevel(map.getLevel())}
        >
          <ZoomControl />
        </Map>
        {level && <p>{'현재 지도 레벨은 ' + level + ' 입니다'}</p>}
      </>
    )
  }
  return (<Main/>)
}