지도 정보 얻어오기
지도 레벨, 중심좌표, 지도 타입, 지도 영역정보를 얻어와 표출합니다.
original docs : https://apis.map.kakao.com/web/sample/mapInfo/
Result
Loading...
Live Editor
function(){const Main = () => {const mapRef = useRef();const [info, setInfo] = useState();return (<><Map // 지도를 표시할 Containercenter={{ lat: 33.452613, lng: 126.570888 }}style={{// 지도의 크기width: "100%",height: "450px",}}level={3} // 지도의 확대 레벨ref={mapRef}><button onClick={() => {const map = mapRef.currentsetInfo({center: {lat: map.getCenter().getLat(),lng: map.getCenter().getLng(),},level: map.getLevel(),typeId: map.getMapTypeId(),swLatLng: {lat: map.getBounds().getSouthWest().getLat(),lng: map.getBounds().getSouthWest().getLng(),},neLatLng: {lat: map.getBounds().getNorthEast().getLat(),lng: map.getBounds().getNorthEast().getLng(),},})}}>정보 가져 오기!</button>{info && (<div><p>위도 : {info.center.lat}</p><p>경도 : {info.center.lng}</p><p>레벨 : {info.level}</p><p>타입 : {info.typeId}</p><p>남서쪽 좌표 : {info.swLatLng.lat}, {info.swLatLng.lng}</p><p>북동쪽 좌표 : {info.neLatLng.lat}, {info.neLatLng.lng}</p></div>)}</Map></>)}return (<Main/>)}