마커와 텍스트 표시하기

이미지 지도에 마커와 텍스트를 함께 표시합니다.

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

결과

라이브 에디터

function(){
  return (
    <StaticMap // 지도를 표시할 Container
      center={{
        // 지도의 중심좌표
        lat: 33.450701,
        lng: 126.570667
      }}
      style={{
        // 지도의 크기
        width: "100%",
        height: "450px",
      }}
      marker={[
        {
          position: {
            lat: 33.450001,
            lng: 126.570467
          },
          text: '텍스트를 표시할 수 있어요!' // text 옵션을 설정하면 마커 위에 텍스트를 함께 표시할 수 있습니다
        }
      ]}
      level={3} // 지도의 확대 레벨
    />
  );
}

function(){
  return (
    <StaticMap // 지도를 표시할 Container
      center={{
        // 지도의 중심좌표
        lat: 33.450701,
        lng: 126.570667
      }}
      style={{
        // 지도의 크기
        width: "100%",
        height: "450px",
      }}
      marker={[
        {
          position: {
            lat: 33.450001,
            lng: 126.570467
          },
          text: '텍스트를 표시할 수 있어요!' // text 옵션을 설정하면 마커 위에 텍스트를 함께 표시할 수 있습니다
        }
      ]}
      level={3} // 지도의 확대 레벨
    />
  );
}