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