다른 이미지로 마커 생성하기

원하는 이미지를 사용해서 더 멋진 마커를 만들 수 있습니다. 아래 예제는 마커로 사용할 이미지의 크기나 꼭지점 위치 등을 지정하여 기본 마커 대신 이용하는 예제입니다.

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

결과

Loading...

라이브 에디터

function(){ return ( <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, }, // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다. }, }} /> </Map> ) }

function(){
  return (
    <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,
            }, // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
          },
        }}
      />
    </Map>
  )
}