커스텀 오버레이 생성하기1

커스텀 오버레이를 생성합니다.

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

결과

카카오!

50m

라이브 에디터

function(){ return ( <> <CustomOverlay1Style /> <Map // 지도를 표시할 Container center={{ // 지도의 중심좌표 lat: 33.450701, lng: 126.570667, }} style={{ // 지도의 크기 width: "100%", height: "450px", }} level={3} // 지도의 확대 레벨 > <CustomOverlayMap // 커스텀 오버레이를 표시할 Container // 커스텀 오버레이가 표시될 위치입니다 position={{ lat: 33.450701, lng: 126.570667, }} > {/* 커스텀 오버레이에 표시할 내용입니다 */} <div className="label" style={{color: "#000"}}> <span className="left"></span> <span className="center">카카오!</span> <span className="right"></span> </div> </CustomOverlayMap> </Map> </> ) }

function(){
  return (
    <>
      <CustomOverlay1Style />
      <Map // 지도를 표시할 Container
        center={{
          // 지도의 중심좌표
          lat: 33.450701,
          lng: 126.570667,
        }}
        style={{
          // 지도의 크기
          width: "100%",
          height: "450px",
        }}
        level={3} // 지도의 확대 레벨
      >
        <CustomOverlayMap // 커스텀 오버레이를 표시할 Container
          // 커스텀 오버레이가 표시될 위치입니다
          position={{
            lat: 33.450701,
            lng: 126.570667,
          }}
        >
          {/* 커스텀 오버레이에 표시할 내용입니다 */}
          <div className="label" style={{color: "#000"}}>
            <span className="left"></span>
            <span className="center">카카오!</span>
            <span className="right"></span>
          </div>
        </CustomOverlayMap>
      </Map>
    </>
  )
}