지도 범위 재설정 하기

지도 범위를 재설정합니다. 어떤 좌표나 마커들이 지도에 모두 보여야 할 때 좌표들의 정보를 갖는 LatLngBounds를 사용하여 좌표들이 모두 보이게 지도의 중심좌표와 레벨을 재설정 할 수 있습니다.

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

결과

Loading...

라이브 에디터

function(){ const Main = () => { const mapRef = useRef() const [points, setPoints] = useState([ {lat: 33.452278, lng:126.567803}, {lat: 33.452671, lng:126.574792}, {lat: 33.451744, lng:126.572441}, ]) const bounds = useMemo(() => { const bounds = new kakao.maps.LatLngBounds(); points.forEach(point => { bounds.extend(new kakao.maps.LatLng(point.lat, point.lng)) }); return bounds; }, [points]) return ( <> <Map // 지도를 표시할 Container center={{ // 지도의 중심좌표 lat: 33.450701, lng: 126.570667, }} style={{ width: "100%", height: "450px", }} level={3} // 지도의 확대 레벨 ref={mapRef} > {points.map(point => <MapMarker key={`${point.lat}-${point.lng}`} position={point} />)} </Map> <button onClick={() => { const map = mapRef.current if (map) map.setBounds(bounds) }} > 지도 범위 재설정 하기 </button> </> ) } return (<Main/>) }

function(){
  const Main = () => {
    const mapRef = useRef()
    const [points, setPoints] = useState([
      {lat: 33.452278, lng:126.567803},
      {lat: 33.452671, lng:126.574792},
      {lat: 33.451744, lng:126.572441},
    ])

    const bounds = useMemo(() => {
      const bounds = new kakao.maps.LatLngBounds();

      points.forEach(point => {
        bounds.extend(new kakao.maps.LatLng(point.lat, point.lng))
      });
      return bounds;
    }, [points])

    return (
      <>
        <Map // 지도를 표시할 Container
          center={{
            // 지도의 중심좌표
            lat: 33.450701,
            lng: 126.570667,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
          ref={mapRef}
        >
          {points.map(point => <MapMarker key={`${point.lat}-${point.lng}`} position={point} />)}
        </Map>
        <button
          onClick={() => {
            const map = mapRef.current
            if (map) map.setBounds(bounds)
          }}
        >
          지도 범위 재설정 하기
        </button>
      </>
    )
  }
  return (<Main/>)
}