지도 이동 막기

마우스 드래그로 지도를 이동시키는 기능을 막습니다. 모바일 기기에서 터치스크롤시 지도가 이동되는 것을 막고싶거나 지도가 이동되면 안되는 경우 등 상황에 따라 지도의 이동 기능을 제어할 수 있습니다.

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

import { Map } from "react-kakao-maps-sdk"
import useKakaoLoader from "./useKakaoLoader"
import { useState } from "react"

export default function DisableMapDragMove() {
  useKakaoLoader()
  const [draggable, setDraggable] = useState<boolean>(true)

  return (
    <Map // 지도를 표시할 Container
      id="map"
      center={{
        // 지도의 중심좌표
        lat: 33.450701,
        lng: 126.570667,
      }}
      style={{
        // 지도의 크기
        width: "100%",
        height: "350px",
      }}
      level={3} // 지도의 확대 레벨
      draggable={draggable}
    >
      <p>
        <button onClick={() => setDraggable(false)}>
          지도 드래그 이동 끄기
        </button>{" "}
        <button onClick={() => setDraggable(true)}>
          지도 드래그 이동 켜기
        </button>
      </p>
    </Map>
  )
}