지도 타입 바꾸기2

지형정보, 교통정보, 자전거도로 정보를 체크박스 선택에 따라 지도타입을 겹쳐보이게 표시합니다.

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

결과

Loading...

라이브 에디터

function(){ const Main = () => { const [mapTypeIds, setMapTypeIds] = useState([]) const handler = (target, type) => { if (target.checked) { return setMapTypeIds([...mapTypeIds, type]) } setMapTypeIds( mapTypeIds.filter( (mapTypeId) => mapTypeId !== type ) ) } return ( <> <Map // 지도를 표시할 Container center={{ // 지도의 중심좌표 lat: 37.566826, lng: 126.9786567, }} style={{ width: "100%", height: "450px", }} level={7} // 지도의 확대 레벨 > {mapTypeIds.map(mapTypeId => <MapTypeId type={mapTypeId} />)} </Map> <input type="checkbox" onChange={({ target }) => handler(target, kakao.maps.MapTypeId.TERRAIN)} /> 지적편집도 정보 보기 <input type="checkbox" onChange={({ target }) => handler(target, kakao.maps.MapTypeId.TRAFFIC)} /> 지형정보 보기 <input type="checkbox" onChange={({ target }) => handler(target, kakao.maps.MapTypeId.BICYCLE)} /> 교통정보 보기 <input type="checkbox" onChange={({ target }) => handler(target, kakao.maps.MapTypeId.USE_DISTRICT)} /> 지적편집도 보기 </> ) } return (<Main/>) }

function(){
  const Main = () => {
    const [mapTypeIds, setMapTypeIds] = useState([])

    const handler = (target, type) => {
      if (target.checked) {
        return setMapTypeIds([...mapTypeIds, type])
      }
      setMapTypeIds(
        mapTypeIds.filter(
          (mapTypeId) => mapTypeId !== type
        )
      )
    }

    return (
      <>
        <Map // 지도를 표시할 Container
          center={{
            // 지도의 중심좌표
            lat: 37.566826,
            lng: 126.9786567,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={7} // 지도의 확대 레벨
        >
          {mapTypeIds.map(mapTypeId => <MapTypeId type={mapTypeId} />)}
        </Map>
        <input
          type="checkbox"
          onChange={({ target }) => handler(target, kakao.maps.MapTypeId.TERRAIN)}
        />
        지적편집도 정보 보기
        <input
          type="checkbox"
          onChange={({ target }) => handler(target, kakao.maps.MapTypeId.TRAFFIC)}
        />
        지형정보 보기
        <input
          type="checkbox"
          onChange={({ target }) => handler(target, kakao.maps.MapTypeId.BICYCLE)}
        />
        교통정보 보기
        <input
          type="checkbox"
          onChange={({ target }) => handler(target, kakao.maps.MapTypeId.USE_DISTRICT)}
        />
        지적편집도 보기
      </>
    )
  }
  return (<Main/>)
}