지도에 교통정보 표시하기

지도에 현재 실시간 교통 정보가 컬러로 표시되어 있는 라인을 올릴 수 있습니다.

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

Result

Live Editor

function(){
  const Main = () => {
    return (
      <>
        <Map // 지도를 표시할 Container
          center={{
            // 지도의 중심좌표
            lat: 37.566826,
            lng: 126.9786567,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
        >
          {/* 지도에 교통정보를 표시하도록 지도타입을 추가합니다 */}
          <MapTypeId type={kakao.maps.MapTypeId.TRAFFIC}/>
        </Map>
      </>
    )
  }
  return (<Main/>)
}

function(){
  const Main = () => {
    return (
      <>
        <Map // 지도를 표시할 Container
          center={{
            // 지도의 중심좌표
            lat: 37.566826,
            lng: 126.9786567,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
        >
          {/* 지도에 교통정보를 표시하도록 지도타입을 추가합니다 */}
          <MapTypeId type={kakao.maps.MapTypeId.TRAFFIC}/>
        </Map>
      </>
    )
  }
  return (<Main/>)
}