본문으로 건너뛰기

react-kakao-maps-sdk

Enumerations​

Classes​

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​

NameType
Textends 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​
NameType
Textends React.ElementType = "div"
Parameters​
NameType
propsMapProps\<T>
Returns​

CompatibleReactElement

Defined in​

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

MapProps​

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

Type parameters​

NameType
Textends React.ElementType = "div"

Defined in​

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

MarkerClustererProps​

Ƭ MarkerClustererProps: React.PropsWithChildren\<{ averageCenter?: boolean ; calculator?: number[] | (size: number) => number[] ; clickable?: boolean ; disableClickZoom?: boolean ; gridSize?: number ; hoverable?: boolean ; minClusterSize?: number ; minLevel?: number ; onClusterclick?: (target: kakao.maps.MarkerClusterer, cluster: kakao.maps.Cluster) => void ; onClusterdblclick?: (target: kakao.maps.MarkerClusterer, cluster: kakao.maps.Cluster) => void ; onClustered?: (target: kakao.maps.MarkerClusterer, clusters: kakao.maps.Cluster[]) => void ; onClusterout?: (target: kakao.maps.MarkerClusterer, cluster: kakao.maps.Cluster) => void ; onClusterover?: (target: kakao.maps.MarkerClusterer, cluster: kakao.maps.Cluster) => void ; onClusterrightclick?: (target: kakao.maps.MarkerClusterer, cluster: kakao.maps.Cluster) => void ; onCreate?: (target: kakao.maps.MarkerClusterer) => void ; styles?: React.CSSProperties[] | object[] ; texts?: string[] | (size: number) => string }>

Defined in​

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

RoadViewProps​

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

Type parameters​

NameType
Textends 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​
NameType
Textends React.ElementType = "div"
Parameters​
NameType
propsRoadViewProps\<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​
NameType
Textends React.ElementType = "div"
Parameters​
NameType
propsStaticMapProps\<T>
Returns​

CompatibleReactElement

Defined in​

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

StaticMapProps​

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

Type parameters​

NameType
Textends React.ElementType = "div"

Defined in​

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

ToolboxProps​

Ƭ ToolboxProps: Object

Type declaration​

NameTypeDescription
position?kakao.maps.ControlPosition | keyof typeof kakao.maps.ControlPositionToolbox의 Position를 정의 한다.

Defined in​

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

_MapProps​

Ƭ _MapProps: Object

Type declaration​

NameTypeDescription
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키보드의 방향키와 +, – 키로 지도 이동,확대,축소 가능 여부 (기본값: 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) => voidmap 생성 후 해당 객체를 전달하는 함수
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:16

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:12

KakaoMapMarkerClustererContext​

• Const KakaoMapMarkerClustererContext: Context\<MarkerClusterer>

Defined in​

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

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​

결과
Loading...
라이브 에디터

Parameters​

NameType
propsAbstractOverlayProps & RefAttributes\<AbstractOverlay>

Returns​

ReactNode

Defined in​

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

Circle​

▸ Circle(props): ReactNode

Map 상에 원을 그립니다.

Parameters​

NameType
propsCircleProps & RefAttributes\<Circle>

Returns​

ReactNode

Defined in​

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

CustomOverlayMap​

▸ CustomOverlayMap(props): ReactNode

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

Parameters​

NameType
propsCustomOverlayMapProps & { children?: ReactNode } & RefAttributes\<CustomOverlay>

Returns​

ReactNode

Defined in​

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

CustomOverlayRoadview​

▸ CustomOverlayRoadview(props): ReactNode

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

Parameters​

NameType
propsCustomOverlayRoadviewProps & { children?: ReactNode } & RefAttributes\<CustomOverlay>

Returns​

ReactNode

Defined in​

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

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 코드 버전

결과
Loading...
라이브 에디터

Type parameters​

NameType
Textends OverlayType = OverlayType

Parameters​

NameType
_propsPartial\<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​

NameType
propsEllipseProps & RefAttributes\<Ellipse>

Returns​

ReactNode

Defined in​

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

Map​

▸ Map\<T>(props): ReactNode

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

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

주의 사항 Map, RoadView 컴포넌트에 한하여, ref 객체가 컴포넌트 마운트 시점에 바로 초기화가 안될 수 있습니다.

컴포넌트 마운트 시점에 useEffect 를 활용하여, 특정 로직을 수행하고 싶은 경우 ref 객체를 사용하는 것보다 onCreate 이벤트와 useState를 함께 활용하여 제어하는 것을 추천 드립니다.

Type parameters​

NameType
Textends ElementType\<any, keyof IntrinsicElements> = "div"

Parameters​

NameType
propsMapProps\<T>

Returns​

ReactNode

Defined in​

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

MapInfoWindow​

▸ MapInfoWindow(props): ReactNode

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

Parameters​

NameType
propsMapInfoWindowProps & { children?: ReactNode } & RefAttributes\<InfoWindow>

Returns​

ReactNode

Defined in​

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

MapMarker​

▸ MapMarker(props): ReactNode

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

Parameters​

NameType
propsMapMarkerProps & { children?: ReactNode } & RefAttributes\<Marker>

Returns​

ReactNode

Defined in​

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

MapTypeControl​

▸ MapTypeControl(props): ReactNode

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

Parameters​

NameType
propsMapTypeControlProps & RefAttributes\<MapTypeControl>

Returns​

ReactNode

Defined in​

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

MapTypeId​

▸ MapTypeId(props, deprecatedLegacyContext?): ReactNode

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

Parameters​

NameTypeDescription
propsMapTypeIdProps-
deprecatedLegacyContext?anyDeprecated See React Docs

Returns​

ReactNode

Defined in​

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

MarkerClusterer​

▸ MarkerClusterer(props): ReactNode

Parameters​

NameType
props{ averageCenter?: boolean ; calculator?: number[] | (size: number) => number[] ; clickable?: boolean ; disableClickZoom?: boolean ; gridSize?: number ; hoverable?: boolean ; minClusterSize?: number ; minLevel?: number ; onClusterclick?: (target: MarkerClusterer, cluster: Cluster) => void ; onClusterdblclick?: (target: MarkerClusterer, cluster: Cluster) => void ; onClustered?: (target: MarkerClusterer, clusters: Cluster[]) => void ; onClusterout?: (target: MarkerClusterer, cluster: Cluster) => void ; onClusterover?: (target: MarkerClusterer, cluster: Cluster) => void ; onClusterrightclick?: (target: MarkerClusterer, cluster: Cluster) => void ; onCreate?: (target: MarkerClusterer) => void ; styles?: CSSProperties[] | object[] ; texts?: string[] | (size: number) => string } & { children?: ReactNode } & RefAttributes\<MarkerClusterer>

Returns​

ReactNode

Defined in​

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

Polygon​

▸ Polygon(props): ReactNode

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

Parameters​

NameType
propsPolygonProps & RefAttributes\<Polygon>

Returns​

ReactNode

Defined in​

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

Polyline​

▸ Polyline(props): ReactNode

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

Parameters​

NameType
propsPolylineProps & RefAttributes\<Polyline>

Returns​

ReactNode

Defined in​

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

Rectangle​

▸ Rectangle(props): ReactNode

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

Parameters​

NameType
propsRectangleProps & RefAttributes\<Rectangle>

Returns​

ReactNode

Defined in​

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

Roadview​

▸ Roadview\<T>(props): ReactNode

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

Type parameters​

NameType
Textends ElementType\<any, keyof IntrinsicElements> = "div"

Parameters​

NameType
propsRoadViewProps\<T>

Returns​

ReactNode

Defined in​

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

RoadviewInfoWindow​

▸ RoadviewInfoWindow(props): ReactNode

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

Parameters​

NameType
propsRoadviewInfoWindowProps & { children?: ReactNode } & RefAttributes\<InfoWindow>

Returns​

ReactNode

Defined in​

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

RoadviewMarker​

▸ RoadviewMarker(props): ReactNode

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

Parameters​

NameType
propsRoadviewMarkerProps & { children?: ReactNode } & RefAttributes\<Marker>

Returns​

ReactNode

Defined in​

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

StaticMap​

▸ StaticMap\<T>(props): ReactNode

Type parameters​

NameType
Textends ElementType\<any, keyof IntrinsicElements> = "div"

Parameters​

NameType
propsStaticMapProps\<T>

Returns​

ReactNode

Defined in​

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

Toolbox​

▸ Toolbox(props): ReactNode

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

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

Parameters​

NameType
propsToolboxProps & RefAttributes\<Toolbox>

Returns​

ReactNode

Defined in​

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

ZoomControl​

▸ ZoomControl(props): ReactNode

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

Parameters​

NameType
propsZoomControlProps & RefAttributes\<ZoomControl>

Returns​

ReactNode

Defined in​

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

useInjectKakaoMapApi​

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

Parameters​

NameType
optionsLoaderOptions

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​

NameType
optionsLoaderOptions

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​

NameType
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​

NameType
componentName?string

Returns​

Roadview

Defined in​

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