이미지 마커와 커스텀 오버레이

지도에 커스텀 오버레이와 마커 이미지를 이용해 다른 이미지로 마커를 표시합니다.

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

결과

Loading...

라이브 에디터

function(){ return ( <> <MarkerWithCustomOverlayStyle /> <Map // 지도를 표시할 Container center={{ // 지도의 중심좌표 lat: 37.54699, lng: 127.09598, }} style={{ // 지도의 크기 width: "100%", height: "450px", }} level={4} // 지도의 확대 레벨 > <MapMarker // 마커를 생성합니다 position={{ lat: 37.54699, lng: 127.09598 }} image={{ src: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png", // 마커이미지의 주소입니다 size: { width: 64, height: 69, }, // 마커이미지의 크기입니다 options: { offset: { x: 27, y: 69, }, // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다. }, }} /> <CustomOverlayMap position={{ lat: 37.54699, lng: 127.09598 }} yAnchor={1} > <div className="customoverlay"> <a href="https://map.kakao.com/link/map/11394059" target="_blank" rel="noreferrer" > <span className="title">구의야구공원</span> </a> </div> </CustomOverlayMap> </Map> </> ) }

function(){
 return (
    <>
      <MarkerWithCustomOverlayStyle />
      <Map // 지도를 표시할 Container
        center={{
          // 지도의 중심좌표
          lat: 37.54699,
          lng: 127.09598,
        }}
        style={{
          // 지도의 크기
          width: "100%",
          height: "450px",
        }}
        level={4} // 지도의 확대 레벨
      >
        <MapMarker // 마커를 생성합니다
          position={{ lat: 37.54699, lng: 127.09598 }}
          image={{
            src: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png", // 마커이미지의 주소입니다
            size: {
              width: 64,
              height: 69,
            }, // 마커이미지의 크기입니다
            options: {
              offset: {
                x: 27,
                y: 69,
              }, // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
            },
          }}
        />
        <CustomOverlayMap
          position={{ lat: 37.54699, lng: 127.09598 }}
          yAnchor={1}
        >
          <div className="customoverlay">
            <a
              href="https://map.kakao.com/link/map/11394059"
              target="_blank"
              rel="noreferrer"
            >
              <span className="title">구의야구공원</span>
            </a>
          </div>
        </CustomOverlayMap>
      </Map>
    </>
  )
}