영역 변경 이벤트 등록하기

지도를 이동 또는 확대/축소 하거나, 지도 API의 특정 메소드를 호출하여 지도 영역이 변경되는 경우에는 bounds_changed 이벤트가 발생합니다. 이 예제에서는 지도 영역이 변경되었을 때 지도 아래쪽에 변경된 지도 영역의 좌표를 뿌려주고 있습니다. 지도를 움직여서 확인해보세요.

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

결과

Loading...

라이브 에디터

function(){ const Main = () => { const [state, setState] = useState() return ( <> <Map // 지도를 표시할 Container center={{ // 지도의 중심좌표 lat: 33.450701, lng: 126.570667, }} style={{ width: "100%", height: "450px", }} level={3} // 지도의 확대 레벨 onBoundsChanged={(map) => setState({ sw: map.getBounds().getSouthWest().toString(), ne: map.getBounds().getNorthEast().toString(), })} > </Map> {!!state && ( <> <p> {'영역좌표는 남서쪽 위도, 경도는 ' + state.sw + ' 이고'}<br/> {'북동쪽 위도, 경도는 ' + state.ne + '입니다'} </p> </> )} </> ) } return (<Main/>) }

function(){
  const Main = () => {
    const [state, setState] = useState()
    return (
      <>
        <Map // 지도를 표시할 Container
          center={{
            // 지도의 중심좌표
            lat: 33.450701,
            lng: 126.570667,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
          onBoundsChanged={(map) => setState({
            sw: map.getBounds().getSouthWest().toString(),
            ne: map.getBounds().getNorthEast().toString(),
          })}
        >
        </Map>
        {!!state && (
          <>
            <p>
              {'영역좌표는 남서쪽 위도, 경도는  ' + state.sw + ' 이고'}<br/>
              {'북동쪽 위도, 경도는  ' + state.ne + '입니다'}
            </p>
          </>
        )}
      </>
    )
  }
  return (<Main/>)
}