react-kakao-maps-sdk

Enumerations

LoaderStatus

Classes

Loader

Interfaces

Type Aliases

DrawingManagerProps

Ƭ DrawingManagerProps<T>: Partial<kakao.maps.drawing.OverlayOptions> & Pick<kakao.maps.drawing.OverlayOptions, `${T}Options`> & { children?: ReactNode ; drawingMode?: (T | `${T}`)[] ; guideTooltip?: ("draw" | "drag" | "edit")[] ; onCancle?: (drawingManager: kakao.maps.drawing.DrawingManager<T>, event: kakao.maps.drawing.MouseEvent) => void ; onCreate?: (drawingManager: kakao.maps.drawing.DrawingManager<T>) => void ; onDraw?: (drawingManager: kakao.maps.drawing.DrawingManager<T>, event: kakao.maps.drawing.MouseEvent) => void ; onDrawend?: (drawingManager: kakao.maps.drawing.DrawingManager<T>, event: kakao.maps.drawing.MouseEvent) => void ; onDrawnext?: (drawingManager: kakao.maps.drawing.DrawingManager<T>, event: kakao.maps.drawing.MouseEvent) => void ; onDrawstart?: (drawingManager: kakao.maps.drawing.DrawingManager<T>, event: kakao.maps.drawing.MouseEvent) => void ; onRemove?: (drawingManager: kakao.maps.drawing.DrawingManager<T>, event: kakao.maps.drawing.MouseEvent) => void ; onSelect?: (drawingManager: kakao.maps.drawing.DrawingManager<T>, event: kakao.maps.drawing.MouseEvent) => void ; onStateChanged?: (drawingManager: kakao.maps.drawing.DrawingManager<T>) => void }

Type parameters

Name	Type
`T`	extends `kakao.maps.drawing.OverlayType` = `kakao.maps.drawing.OverlayType`

Defined in

packages/react-kakao-maps-sdk/src/components/DrawingManager.tsx:15

Libraries

Ƭ Libraries: ("services" | "clusterer" | "drawing")[]

Defined in

packages/react-kakao-maps-sdk/src/util/kakaoMapApiLoader.ts:3

LoaderErorr

Ƭ LoaderErorr: Event | string

Defined in

packages/react-kakao-maps-sdk/src/util/kakaoMapApiLoader.ts:54

MapComponent

Ƭ MapComponent: <T>(props: MapProps<T>) => CompatibleReactElement

Type declaration

▸ <T>(props): CompatibleReactElement

Type parameters

Name	Type
`T`	extends `React.ElementType` = `"div"`

Parameters

Name	Type
`props`	`MapProps`<`T`>

Returns

CompatibleReactElement

Defined in

packages/react-kakao-maps-sdk/src/components/Map.tsx:214

MapProps

Ƭ MapProps<T>: PolymorphicComponentPropsWithOutRef<T, _MapProps> & React.RefAttributes<kakao.maps.Map>

Type parameters

Name	Type
`T`	extends `React.ElementType` = `"div"`

Defined in

packages/react-kakao-maps-sdk/src/components/Map.tsx:210

RoadViewProps

Ƭ RoadViewProps<T>: PolymorphicComponentPropsWithOutRef<T, _RoadviewProps> & React.RefAttributes<kakao.maps.Roadview>

Type parameters

Name	Type
`T`	extends `React.ElementType` = `"div"`

Defined in

packages/react-kakao-maps-sdk/src/components/Roadview.tsx:90

RoadviewComponent

Ƭ RoadviewComponent: <T>(props: RoadViewProps<T>) => CompatibleReactElement

Type declaration

▸ <T>(props): CompatibleReactElement

Type parameters

Name	Type
`T`	extends `React.ElementType` = `"div"`

Parameters

Name	Type
`props`	`RoadViewProps`<`T`>

Returns

CompatibleReactElement

Defined in

packages/react-kakao-maps-sdk/src/components/Roadview.tsx:94

StaticMapComponent

Ƭ StaticMapComponent: <T>(props: StaticMapProps<T>) => CompatibleReactElement

Type declaration

▸ <T>(props): CompatibleReactElement

Type parameters

Name	Type
`T`	extends `React.ElementType` = `"div"`

Parameters

Name	Type
`props`	`StaticMapProps`<`T`>

Returns

CompatibleReactElement

Defined in

packages/react-kakao-maps-sdk/src/components/StaticMap.tsx:75

StaticMapProps

Ƭ StaticMapProps<T>: PolymorphicComponentPropsWithOutRef<T, _StaticMapProps> & React.RefAttributes<kakao.maps.StaticMap>

Type parameters

Name	Type
`T`	extends `React.ElementType` = `"div"`

Defined in

packages/react-kakao-maps-sdk/src/components/StaticMap.tsx:71

ToolboxProps

Ƭ ToolboxProps: Object

Type declaration

Name	Type	Description
`position?`	`kakao.maps.ControlPosition` \| keyof typeof `kakao.maps.ControlPosition`	Toolbox의 Position를 정의 한다.

Defined in

packages/react-kakao-maps-sdk/src/components/Toolbox.tsx:11

_MapProps

Ƭ _MapProps: Object

Type declaration

Name	Type	Description
`center`	{ `lat`: `number` ; `lng`: `number` } \| { `x`: `number` ; `y`: `number` }	중심으로 설정할 위치 입니다.
`children?`	`React.ReactNode`	-
`disableDoubleClick?`	`boolean`	더블클릭 이벤트 및 더블클릭 확대 가능 여부
`disableDoubleClickZoom?`	`boolean`	더블클릭 확대 가능 여부
`draggable?`	`boolean`	마우스 드래그, 휠, 모바일 터치를 이용한 시점 변경(이동, 확대, 축소) 가능 여부
`isPanto?`	`boolean`	중심을 이동시킬때 Panto를 사용할지 정합니다. `Default` `ts false`
`keyboardShortcuts?`	`boolean` \| { `speed`: `number` }	키보드의 방향키와 +, – 키로 지도 이동,확대,축소 가능 여부 (기본값: false)
`level?`	`number`	확대 수준 (기본값: 3)
`mapTypeId?`	`kakao.maps.MapTypeId` \| keyof typeof `kakao.maps.MapTypeId`	지도 종류 (기본값: 일반 지도)
`maxLevel?`	`number`	최대 확대 수준
`minLevel?`	`number`	최소 확대 수준
`onBoundsChanged?`	(`target`: `kakao.maps.Map`) => `void`	지도 영역이 변경되면 발생한다.
`onCenterChanged?`	(`target`: `kakao.maps.Map`) => `void`	중심 좌표가 변경되면 발생한다.
`onClick?`	(`target`: `kakao.maps.Map`, `mouseEvent`: `kakao.maps.event.MouseEvent`) => `void`	지도를 클릭하면 발생한다.
`onCreate?`	(`map`: `kakao.maps.Map`) => `void`	map 생성 후 해당 객체를 전달하는 함수
`onDoubleClick?`	(`target`: `kakao.maps.Map`, `mouseEvent`: `kakao.maps.event.MouseEvent`) => `void`	지도를 더블클릭하면 발생한다.
`onDrag?`	(`target`: `kakao.maps.Map`, `mouseEvent`: `kakao.maps.event.MouseEvent`) => `void`	드래그를 하는 동안 발생한다.
`onDragEnd?`	(`target`: `kakao.maps.Map`, `mouseEvent`: `kakao.maps.event.MouseEvent`) => `void`	드래그가 끝날 때 발생한다.
`onDragStart?`	(`target`: `kakao.maps.Map`, `mouseEvent`: `kakao.maps.event.MouseEvent`) => `void`	드래그를 시작할 때 발생한다.
`onIdle?`	(`target`: `kakao.maps.Map`) => `void`	중심 좌표나 확대 수준이 변경되면 발생한다. 단, 애니메이션 도중에는 발생하지 않는다.
`onMaptypeidChanged?`	(`target`: `kakao.maps.Map`) => `void`	지도 기본 타일(일반지도, 스카이뷰, 하이브리드)이 변경되면 발생한다.
`onMouseMove?`	(`target`: `kakao.maps.Map`, `mouseEvent`: `kakao.maps.event.MouseEvent`) => `void`	지도에서 마우스 커서를 이동하면 발생한다.
`onRightClick?`	(`target`: `kakao.maps.Map`, `mouseEvent`: `kakao.maps.event.MouseEvent`) => `void`	지도를 마우스 오른쪽 버튼으로 클릭하면 발생한다.
`onTileLoaded?`	(`target`: `kakao.maps.Map`) => `void`	확대수준이 변경되거나 지도가 이동했을때 타일 이미지 로드가 모두 완료되면 발생한다. 지도이동이 미세하기 일어나 타일 이미지 로드가 일어나지 않은경우 발생하지 않는다.
`onZoomChanged?`	(`target`: `kakao.maps.Map`) => `void`	확대 수준이 변경되면 발생한다.
`onZoomStart?`	(`target`: `kakao.maps.Map`) => `void`	확대 수준이 변경되기 직전 발생한다.
`padding?`	`number`	중심 좌표를 지정한 좌표 또는 영역으로 부드럽게 이동한다. 필요하면 확대 또는 축소도 수행한다. 만약 이동할 거리가 지도 화면의 크기보다 클 경우 애니메이션 없이 이동한다. padding 만큼 제외하고 영역을 계산하며, padding 을 지정하지 않으면 기본값으로 32가 사용된다.
`projectionId?`	`string`	투영법 지정 (기본값: kakao.maps.ProjectionId.WCONG)
`scrollwheel?`	`boolean`	마우스 휠, 모바일 터치를 이용한 확대 및 축소 가능 여부
`tileAnimation?`	`boolean`	지도 타일 애니메이션 설정 여부 (기본값: true)
`zoomable?`	`boolean`	마우스 휠이나 멀티터치로 지도 확대, 축소 기능을 막습니다. 상황에 따라 지도 확대, 축소 기능을 제어할 수 있습니다.

Defined in

packages/react-kakao-maps-sdk/src/components/Map.tsx:15

Variables

DrawingManagerContext

• Const DrawingManagerContext: Context<DrawingManager<OverlayType>>

Defined in

packages/react-kakao-maps-sdk/src/components/DrawingManager.tsx:10

KakaoMapContext

• Const KakaoMapContext: Context<Map>

Defined in

packages/react-kakao-maps-sdk/src/components/Map.tsx:11

KakaoMapMarkerClustererContext

• Const KakaoMapMarkerClustererContext: Context<MarkerClusterer>

Defined in

packages/react-kakao-maps-sdk/src/components/MarkerClusterer.tsx:11

KakaoRoadviewContext

• Const KakaoRoadviewContext: Context<Roadview>

Defined in

packages/react-kakao-maps-sdk/src/components/Roadview.tsx:11

Functions

AbstractOverlay

▸ AbstractOverlay(props): ReactNode

API 사용자가 직접 정의할 수 있는 오버레이. AbstractOverlay를 상속 받아 사용할 객체를 생성하고 prototype을 연결해 준다. 온전히 동작하는 오버레이를 만들고자 한다면 3가지 인터페이스 메소드( onAdd, draw, onRemove )를 구현해야 한다.

해당 Component 내부에서 ReactAbstractOveraly class를 만들어 onAdd, draw, onRemove 를 연결한 후 React Life Cycle에 맞춰 setMap 를 자동으로 호출 합니다.

경고 draw, onAdd, onRemove 의 경우 반드시 익명함수가 아닌 형태로 만들어서 전달해야 합니다. this.~ 를 통한 접근이 가능하니 해당 부분을 이용해서 구현 해주세요!

Example Code

결과

라이브 에디터

function () {
 const TooltipMarker = ({
   position,
 }) => {
   const node = useRef(document.createElement("div"))

   const positionLatlng = useMemo(() => {
     return new kakao.maps.LatLng(position.lat, position.lng)
   }, [position.lat, position.lng])

   function onAdd() {
     const panel = this.getPanels()
       .overlayLayer
     panel.appendChild(node.current)
   }

   function onRemove() {
     node.current.parentNode.removeChild(node.current)
   }

   function draw() {
     var projection = this.getProjection()
     var point = projection.pointFromCoords(positionLatlng)
     var width = node.current.offsetWidth
     var height = node.current.offsetHeight

     console.log(point, width, height)

     node.current.style.left = point.x - width / 2 + "px"
     node.current.style.top = point.y - height / 2 + "px"
   }

   useEffect(() => {
     node.current.style.position = "absolute"
     node.current.style.whiteSpace = "nowrap"
   }, [])

   return (
     <>
       <AbstractOverlay onAdd={onAdd} onRemove={onRemove} draw={draw} />
       {ReactDOM.createPortal(
         <div
           style={{
             color: "#000",
             backgroundColor: "#fff",
             padding: "5px",
             borderRadius: "15px",
           }}
         >
           Hello Marker!
         </div>,
         node.current
       )}
     </>
   )
 }

 return (
   <>
     <Map // 지도를 표시할 Container
       center={{
         // 지도의 중심좌표
         lat: 37.54699,
         lng: 127.09598,
       }}
       style={{
         // 지도의 크기
         width: "100%",
         height: "450px",
       }}
       level={3} // 지도의 확대 레벨
     >
       <TooltipMarker
         position={{
           lat: 37.54699,
           lng: 127.09598,
         }}
       />
     </Map>
   </>
 )
}

function () {
 const TooltipMarker = ({
   position,
 }) => {
   const node = useRef(document.createElement("div"))

   const positionLatlng = useMemo(() => {
     return new kakao.maps.LatLng(position.lat, position.lng)
   }, [position.lat, position.lng])

   function onAdd() {
     const panel = this.getPanels()
       .overlayLayer
     panel.appendChild(node.current)
   }

   function onRemove() {
     node.current.parentNode.removeChild(node.current)
   }

   function draw() {
     var projection = this.getProjection()
     var point = projection.pointFromCoords(positionLatlng)
     var width = node.current.offsetWidth
     var height = node.current.offsetHeight

     console.log(point, width, height)

     node.current.style.left = point.x - width / 2 + "px"
     node.current.style.top = point.y - height / 2 + "px"
   }

   useEffect(() => {
     node.current.style.position = "absolute"
     node.current.style.whiteSpace = "nowrap"
   }, [])

   return (
     <>
       <AbstractOverlay onAdd={onAdd} onRemove={onRemove} draw={draw} />
       {ReactDOM.createPortal(
         <div
           style={{
             color: "#000",
             backgroundColor: "#fff",
             padding: "5px",
             borderRadius: "15px",
           }}
         >
           Hello Marker!
         </div>,
         node.current
       )}
     </>
   )
 }

 return (
   <>
     <Map // 지도를 표시할 Container
       center={{
         // 지도의 중심좌표
         lat: 37.54699,
         lng: 127.09598,
       }}
       style={{
         // 지도의 크기
         width: "100%",
         height: "450px",
       }}
       level={3} // 지도의 확대 레벨
     >
       <TooltipMarker
         position={{
           lat: 37.54699,
           lng: 127.09598,
         }}
       />
     </Map>
   </>
 )
}

Parameters

Name	Type
`props`	`AbstractOverlayProps` & `RefAttributes`<`AbstractOverlay`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

Circle

▸ Circle(props): ReactNode

Map 상에 원을 그립니다.

Parameters

Name	Type
`props`	`CircleProps` & `RefAttributes`<`Circle`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

CustomOverlayMap

▸ CustomOverlayMap(props): ReactNode

Map에 CustomOverlay를 올릴 때 사용하는 컴포넌트 입니다. onCreate 이벤트 또는 ref 객체를 통해서 CustomOverlay 객체에 직접 접근 및 초기 설정 작업을 지정할 수 있습니다.

Parameters

Name	Type
`props`	`CustomOverlayMapProps` & { `children?`: `ReactNode` } & `RefAttributes`<`CustomOverlay`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

CustomOverlayRoadview

▸ CustomOverlayRoadview(props): ReactNode

Roadview에 CustomOverlay를 올릴 때 사용하는 컴포넌트 입니다. onCreate 이벤트 또는 ref 객체를 통해서 CustomOverlay 객체에 직접 접근 및 초기 설정 작업을 지정할 수 있습니다.

Parameters

Name	Type
`props`	`CustomOverlayRoadviewProps` & { `children?`: `ReactNode` } & `RefAttributes`<`CustomOverlay`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

DrawingManager

▸ DrawingManager<T>(_props): null

그리기 관리자 객체를 생성하는 컴포넌트 입니다.

초기 생성자에 필요한 Props는 최초 렌더링에만 반영을 하고 이후에는 값이 변경되더라도 적용되지 않습니다.

on~ 시리즈를 제외한 props는 초기 렌더링 이후 작동 안함

DrawingManager는 이전 Map, Marker, CustomOverlay와 달리 Props를 통해 제어를 하는 것이 아닌 직접 DrawingManager 객체를 이용하여 제어를 해야 합니다.

이를 위해 ref 객체를 통해 DrawingManager 객체를 접근 할 수 있으며, 이를 활용하여 여러 이벤트 처리 및 제어가 가능합니다.

TypeScript 사용자를 위한 Generic이 적용되어 있으므로, ref 객체에 대한 typing 및 drawingMode에 대해 확실하게 정의해야 합니다.

const Main = () => {
    const managerRef = useRef<kakao.maps.drawing.DrawingManager<
      kakao.maps.drawing.OverlayType.POLYLINE
    >>(null);

    function selectOverlay(type: string) {
      const manager = managerRef.current;
      manager.cancel();
      manager.select(kakao.maps.drawing.OverlayType.POLYLINE);
    }

    return (
      <>
        <Map
          center={{
            // 지도의 중심좌표
            lat: 33.450701,
            lng: 126.570667,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
        >
          <DrawingManager
            ref={managerRef}
            drawingMode={[
              kakao.maps.drawing.OverlayType.POLYLINE,
            ]}
            guideTooltip={['draw', 'drag', 'edit']}
            polylineOptions={{
              draggable: true,
              removable: true,
              editable: true
            }}
          />
        </Map>
        <button onClick={(e) => {
          selectOverlay('POLYLINE')
        }}>선</button>
      </>
    )
  }

JavaScript 코드 버전

결과

라이브 에디터

function() {
  const Main = () => {
    const managerRef = useRef(null);

    function selectOverlay() {
      const manager = managerRef.current;
      manager.cancel();
      manager.select(kakao.maps.drawing.OverlayType.POLYLINE);
    }

    return (
      <>
        <Map
          center={{
            // 지도의 중심좌표
            lat: 33.450701,
            lng: 126.570667,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
        >
          <DrawingManager
            ref={managerRef}
            drawingMode={[
              kakao.maps.drawing.OverlayType.POLYLINE,
            ]}
            guideTooltip={['draw', 'drag', 'edit']}
            polylineOptions={{
              draggable: true,
              removable: true,
              editable: true
            }}
          />
        </Map>
        <button onClick={selectOverlay}>선</button>
      </>
    )
  }
  return (<Main />)
}

function() {
  const Main = () => {
    const managerRef = useRef(null);

    function selectOverlay() {
      const manager = managerRef.current;
      manager.cancel();
      manager.select(kakao.maps.drawing.OverlayType.POLYLINE);
    }

    return (
      <>
        <Map
          center={{
            // 지도의 중심좌표
            lat: 33.450701,
            lng: 126.570667,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
        >
          <DrawingManager
            ref={managerRef}
            drawingMode={[
              kakao.maps.drawing.OverlayType.POLYLINE,
            ]}
            guideTooltip={['draw', 'drag', 'edit']}
            polylineOptions={{
              draggable: true,
              removable: true,
              editable: true
            }}
          />
        </Map>
        <button onClick={selectOverlay}>선</button>
      </>
    )
  }
  return (<Main />)
}

Type parameters

Name	Type
`T`	extends `OverlayType` = `OverlayType`

Parameters

Name Type

_props Partial<OverlayOptions> & Pick<OverlayOptions, `${T}Options`> & { children?: ReactNode ; drawingMode?: (T | `${T}`)[] ; guideTooltip?: ("drag" | "draw" | "edit")[] ; onCancle?: (drawingManager: DrawingManager<T>, event: MouseEvent) => void ; onCreate?: (drawingManager: DrawingManager<T>) => void ; onDraw?: (drawingManager: DrawingManager<T>, event: MouseEvent) => void ; onDrawend?: (drawingManager: DrawingManager<T>, event: MouseEvent) => void ; onDrawnext?: (drawingManager: DrawingManager<T>, event: MouseEvent) => void ; onDrawstart?: (drawingManager: DrawingManager<T>, event: MouseEvent) => void ; onRemove?: (drawingManager: DrawingManager<T>, event: MouseEvent) => void ; onSelect?: (drawingManager: DrawingManager<T>, event: MouseEvent) => void ; onStateChanged?: (drawingManager: DrawingManager<T>) => void } & RefAttributes<DrawingManager<T>>

Name	Type
`_props`	`Partial`<`OverlayOptions`> & `Pick`<`OverlayOptions`, `${T}Options`> & { `children?`: `ReactNode` ; `drawingMode?`: (`T` \| `${T}`)[] ; `guideTooltip?`: (`"drag"` \| `"draw"` \| `"edit"`)[] ; `onCancle?`: (`drawingManager`: `DrawingManager`<`T`>, `event`: `MouseEvent`) => `void` ; `onCreate?`: (`drawingManager`: `DrawingManager`<`T`>) => `void` ; `onDraw?`: (`drawingManager`: `DrawingManager`<`T`>, `event`: `MouseEvent`) => `void` ; `onDrawend?`: (`drawingManager`: `DrawingManager`<`T`>, `event`: `MouseEvent`) => `void` ; `onDrawnext?`: (`drawingManager`: `DrawingManager`<`T`>, `event`: `MouseEvent`) => `void` ; `onDrawstart?`: (`drawingManager`: `DrawingManager`<`T`>, `event`: `MouseEvent`) => `void` ; `onRemove?`: (`drawingManager`: `DrawingManager`<`T`>, `event`: `MouseEvent`) => `void` ; `onSelect?`: (`drawingManager`: `DrawingManager`<`T`>, `event`: `MouseEvent`) => `void` ; `onStateChanged?`: (`drawingManager`: `DrawingManager`<`T`>) => `void` } & `RefAttributes`<`DrawingManager`<`T`>>

Returns

null

Defined in

packages/react-kakao-maps-sdk/src/components/DrawingManager.tsx:318

Ellipse

▸ Ellipse(props): ReactNode

Map 상에 타원을 그립니다.

Parameters

Name	Type
`props`	`EllipseProps` & `RefAttributes`<`Ellipse`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

Map

▸ Map<T>(props): ReactNode

기본적인 Map 객체를 생성하는 Comeponent 입니다. props로 받는 on* 이벤트는 해당 kakao.maps.Map 객체를 함께 인자로 전달 합니다.

ref를 통해 map 객체에 직접 접근하여 사용 또는 onCreate 이벤트를 이용하여 접근이 가능합니다.

주의 사항 Map, RoadView 컴포넌트에 한하여, ref 객체가 컴포넌트 마운트 시점에 바로 초기화가 안될 수 있습니다.
컴포넌트 마운트 시점에 useEffect 를 활용하여, 특정 로직을 수행하고 싶은 경우 ref 객체를 사용하는 것보다 onCreate 이벤트와 useState를 함께 활용하여 제어하는 것을 추천 드립니다.

Type parameters

Name	Type
`T`	extends `ElementType`<`any`> = `"div"`

Parameters

Name	Type
`props`	`MapProps`<`T`>

Returns

ReactNode

Defined in

packages/react-kakao-maps-sdk/src/components/Map.tsx:214

MapInfoWindow

▸ MapInfoWindow(props): ReactNode

Map 컴포넌트에서 InfoWindow를 그릴 때 사용됩니다. onCreate 이벤트를 통해 생성 후 infoWindow 객체에 직접 접근하여 초기 설정이 가능합니다.

Parameters

Name	Type
`props`	`MapInfoWindowProps` & { `children?`: `ReactNode` } & `RefAttributes`<`InfoWindow`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

MapMarker

▸ MapMarker(props): ReactNode

Map에서 Marker를 생성할 때 사용 합니다. onCreate 이벤트를 통해 생성 후 maker 객체에 직접 접근하여 초기 설정이 가능합니다.

Parameters

Name	Type
`props`	`MapMarkerProps` & { `children?`: `ReactNode` } & `RefAttributes`<`Marker`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

MapTypeControl

▸ MapTypeControl(props): ReactNode

일반 지도/하이브리드 간 지도 타입 전환 컨트롤을 생성한다. 현재는 일반 지도/하이브리드 간 전환 컨트롤만 지원되며 다른 지도 타입을 제어하는 컨트롤이 필요할 경우에는 직접 구현해야 한다.

Parameters

Name	Type
`props`	`MapTypeControlProps` & `RefAttributes`<`MapTypeControl`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

MapTypeId

▸ MapTypeId(props, context?): ReactNode

추가적으로 보이고 싶은 지도 타입을 추가 할 때 사용한다.

Parameters

Name	Type
`props`	`MapTypeIdProps`
`context?`	`any`

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:563

MarkerClusterer

▸ MarkerClusterer(props): ReactNode

NOTE: Exotic components are not callable.

Parameters

Name	Type
`props`	`MarkerClustererProps` & { `children?`: `ReactNode` } & `RefAttributes`<`MarkerClusterer`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

Polygon

▸ Polygon(props): ReactNode

Map 상에 다각형을 그립니다.

Parameters

Name	Type
`props`	`PolygonProps` & `RefAttributes`<`Polygon`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

Polyline

▸ Polyline(props): ReactNode

Map 상에 폴리라인을 그립니다.

Parameters

Name	Type
`props`	`PolylineProps` & `RefAttributes`<`Polyline`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

Rectangle

▸ Rectangle(props): ReactNode

Map 상에 사각형을 그립니다.

Parameters

Name	Type
`props`	`RectangleProps` & `RefAttributes`<`Rectangle`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

Roadview

▸ Roadview<T>(props): ReactNode

Roadview를 Roadview를 생성하는 컴포넌트 입니다. props로 받는 on* 이벤트는 해당 kakao.maps.Map 객체를 반환 합니다. onCreate 이벤트를 통해 생성 후 Roadview 객체에 직접 접근하여 초기 설정이 가능합니다.

Type parameters

Name	Type
`T`	extends `ElementType`<`any`> = `"div"`

Parameters

Name	Type
`props`	`RoadViewProps`<`T`>

Returns

ReactNode

Defined in

packages/react-kakao-maps-sdk/src/components/Roadview.tsx:94

RoadviewInfoWindow

▸ RoadviewInfoWindow(props): ReactNode

Map 컴포넌트에서 InfoWindow를 그릴 때 사용됩니다. onCreate 이벤트를 통해 생성 후 infoWindow 객체에 직접 접근하여 초기 설정이 가능합니다.

Parameters

Name	Type
`props`	`RoadviewInfoWindowProps` & { `children?`: `ReactNode` } & `RefAttributes`<`InfoWindow`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

RoadviewMarker

▸ RoadviewMarker(props): ReactNode

Map에서 Marker를 생성할 때 사용 합니다. onCreate 이벤트를 통해 생성 후 maker 객체에 직접 접근하여 초기 설정이 가능합니다.

Parameters

Name	Type
`props`	`RoadviewMarkerProps` & { `children?`: `ReactNode` } & `RefAttributes`<`Marker`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

StaticMap

▸ StaticMap<T>(props): ReactNode

Type parameters

Name	Type
`T`	extends `ElementType`<`any`> = `"div"`

Parameters

Name	Type
`props`	`StaticMapProps`<`T`>

Returns

ReactNode

Defined in

packages/react-kakao-maps-sdk/src/components/StaticMap.tsx:75

Toolbox

▸ Toolbox(props): ReactNode

그리기 툴박스를 생성합니다.

해당 컴포넌트는 반드시 DrawingManager 컴포넌트의 자식으로 존재해야 합니다.

Parameters

Name	Type
`props`	`ToolboxProps` & `RefAttributes`<`Toolbox`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

ZoomControl

▸ ZoomControl(props): ReactNode

확대·축소 컨트롤을 생성한다.

Parameters

Name	Type
`props`	`ZoomControlProps` & `RefAttributes`<`ZoomControl`>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

useInjectKakaoMapApi

▸ useInjectKakaoMapApi(options): [loading: boolean, error: ErrorEvent]

Parameters

Name	Type
`options`	`LoaderOptions`

Returns

[loading: boolean, error: ErrorEvent]

Deprecated

useKakaoLoader를 사용해주세요.

Defined in

packages/react-kakao-maps-sdk/src/hooks/useKakaoLoader.tsx:13

useKakaoLoader

▸ useKakaoLoader(options): [loading: boolean, error: ErrorEvent]

Kakao Map Api를 Loading 합니다.

해당 hook은 cleanup 시점에도 Kakao Map Api를 제거 하지 않고, 동일한 hook를 여러 위치에서 호출 하더라도 최초 한번만 Loading 됩니다.

내부에서 반환하는 loading state는 hook를 통해 제어할 때 사용하도록 제공하는 state 입니다.

loading를 통한 Map 컴포넌트를 conditional rendering를 하지 않아도 됩니다.

Parameters

Name	Type
`options`	`LoaderOptions`

Returns

[loading: boolean, error: ErrorEvent]

Defined in

packages/react-kakao-maps-sdk/src/hooks/useKakaoLoader.tsx:13

useMap

▸ useMap(componentName?): Map

kakao map 객체를 가져오는 hook 입니다. Map 객체 내부가 아니라면 Error를 발생 시킵니다.

Parameters

Name	Type
`componentName?`	`string`

Returns

Map

Defined in

packages/react-kakao-maps-sdk/src/hooks/useMap.tsx:8

useRoadview

▸ useRoadview(componentName?): Roadview

kakao roadview 객체를 가져오는 hook 입니다. Roadview 객체 내부가 아니라면 Error를 발생 시킵니다.

Parameters

Name	Type
`componentName?`	`string`

Returns

Roadview

Defined in

packages/react-kakao-maps-sdk/src/hooks/useRoadview.tsx:8

Enumerations​

Classes​

Interfaces​

Type Aliases​

DrawingManagerProps​

Type parameters​

Defined in​

Libraries​

Defined in​

LoaderErorr​

Defined in​

MapComponent​

Type declaration​

Type parameters​

Parameters​

Returns​

Defined in​

MapProps​

Type parameters​

Defined in​

RoadViewProps​

Type parameters​

Defined in​

RoadviewComponent​

Type declaration​

Type parameters​

Parameters​

Returns​

Defined in​

StaticMapComponent​

Type declaration​

Type parameters​

Parameters​

Returns​

Defined in​

StaticMapProps​

Type parameters​

Defined in​

ToolboxProps​

Type declaration​

Defined in​

_MapProps​

Type declaration​

Defined in​

Variables​

DrawingManagerContext​

Defined in​

KakaoMapContext​

Defined in​

KakaoMapMarkerClustererContext​

Defined in​

KakaoRoadviewContext​

Defined in​

Functions​

AbstractOverlay​

Example Code​

Parameters​

Returns​

Defined in​

Circle​

Parameters​

Returns​

Defined in​

CustomOverlayMap​

Parameters​

Returns​

Defined in​

CustomOverlayRoadview​

Parameters​

Returns​

Defined in​

DrawingManager​

Type parameters​

Parameters​

Returns​

Defined in​

Ellipse​

Parameters​

Returns​

Defined in​

Enumerations

Classes

Interfaces

Type Aliases

DrawingManagerProps

Type parameters

Defined in

Libraries

Defined in

LoaderErorr

Defined in

MapComponent

Type declaration

Type parameters

Parameters

Returns

Defined in

MapProps

Type parameters

Defined in

RoadViewProps

Type parameters

Defined in

RoadviewComponent

Type declaration

Type parameters

Parameters

Returns

Defined in

StaticMapComponent

Type declaration

Type parameters

Parameters

Returns

Defined in

StaticMapProps

Type parameters

Defined in

ToolboxProps

Type declaration

Defined in

_MapProps

Type declaration

Defined in

Variables

DrawingManagerContext

Defined in

KakaoMapContext

Defined in

KakaoMapMarkerClustererContext

Defined in

KakaoRoadviewContext

Defined in

Functions

AbstractOverlay

Example Code

Parameters

Returns

Defined in

Circle

Parameters

Returns

Defined in

CustomOverlayMap

Parameters

Returns

Defined in

CustomOverlayRoadview

Parameters

Returns

Defined in

DrawingManager

Type parameters

Parameters

Returns

Defined in

Ellipse

Parameters

Returns

Defined in