지도 타입 바꾸기1

교통정보, 로드뷰 도로정보, 지형도 정보를 버튼 클릭에 따라 지도 타입을 변경합니다.

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

결과

Loading...

라이브 에디터

function(){ const Main = () => { const [mapTypeId, setMapTypeId] = useState() return ( <> <Map // 지도를 표시할 Container center={{ // 지도의 중심좌표 lat: 37.566826, lng: 126.9786567, }} style={{ width: "100%", height: "450px", }} level={7} // 지도의 확대 레벨 > {mapTypeId && <MapTypeId type={mapTypeId}/>} </Map> <button onClick={() => { setMapTypeId(kakao.maps.MapTypeId.TRAFFIC) }} > 교통정보 보기 </button> <button onClick={() => { setMapTypeId(kakao.maps.MapTypeId.ROADVIEW) }} > 로드뷰 도로정보 보기 </button> <button onClick={() => { setMapTypeId(kakao.maps.MapTypeId.TERRAIN) }} > 지형정보 보기 </button> <button onClick={() => { setMapTypeId(kakao.maps.MapTypeId.USE_DISTRICT) }} > 지적편집도 보기 </button> </> ) } return (<Main/>) }

function(){
  const Main = () => {
    const [mapTypeId, setMapTypeId] = useState()

    return (
      <>
        <Map // 지도를 표시할 Container
          center={{
            // 지도의 중심좌표
            lat: 37.566826,
            lng: 126.9786567,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={7} // 지도의 확대 레벨
        >
          {mapTypeId && <MapTypeId type={mapTypeId}/>}
        </Map>
        <button
          onClick={() => {
            setMapTypeId(kakao.maps.MapTypeId.TRAFFIC)
          }}
        >
          교통정보 보기
        </button>
        <button
          onClick={() => {
            setMapTypeId(kakao.maps.MapTypeId.ROADVIEW)
          }}
        >
          로드뷰 도로정보 보기
        </button>
        <button
          onClick={() => {
            setMapTypeId(kakao.maps.MapTypeId.TERRAIN)
          }}
        >
          지형정보 보기
        </button>
        <button
          onClick={() => {
            setMapTypeId(kakao.maps.MapTypeId.USE_DISTRICT)
          }}
        >
          지적편집도 보기
        </button>
      </>
    )
  }
  return (<Main/>)
}