중심좌표 변경 이벤트 등록하기

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

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

결과

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} // 지도의 확대 레벨 onCenterChanged={(map) => setState({ level: map.getLevel(), center: { lat: map.getCenter().getLat(), lng: map.getCenter().getLng(), } })} > </Map> {!!state && ( <> <p>{'지도 레벨은 ' + state.level + ' 이고'}</p> <p>{'중심 좌표는 위도 ' + state.center.lat + ', 경도 ' + state.center.lng +' 입니다'}</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} // 지도의 확대 레벨
          onCenterChanged={(map) => setState({
            level: map.getLevel(),
            center: {
              lat: map.getCenter().getLat(),
              lng: map.getCenter().getLng(),
            }
          })}
        >
        </Map>
        {!!state && (
          <>
            <p>{'지도 레벨은 ' + state.level + ' 이고'}</p>
            <p>{'중심 좌표는 위도 ' + state.center.lat + ', 경도 ' + state.center.lng +' 입니다'}</p>
          </>
        )}
      </>
    )
  }
  return (<Main/>)
}