Notable Peru Mariachis

    react-kakao-maps-sdk
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.3 • Public • Published

    react-kakao-maps-sdk

    Kakao Maps API를 react에 맞게 포팅한 라이브러리 입니다.

    version license docs build status npm dm GitHub issues

    Usage

    이 라이브러리를 사용하기 위해서는 필수적으로 Kakao 지도 API를 불러와야 합니다.

    Kakao 지도 Javscript API

    <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다.&libraries=services,clusterer"
    ></script>

    TypeScript

    타입스크립트 사용자를 위해 kakao.maps.d.ts 패키지를 제공합니다.

    tsconfig.jsoncompilerOptions.types 속성에 kakao.maps.d.ts 패키지를 추가하시면 됩니다.

    {
      ...,
      "compilerOptions": {
        ...,
        "types": [
          ...,
          "kakao.maps.d.ts"
        ]
      }
    }

    Install

    npm install react-kakao-maps-sdk
    # or
    yarn add react-kakao-maps-sdk

    Simple Usage

    맵위에 마커와 인포윈도우 올리기

    function(){
      return (
        <Map
          center={{ lat: 33.5563, lng: 126.79581 }}
          style={{ width: "100%", height: "360px" }}
        >
          <MapMarker position={{ lat: 33.55635, lng: 126.795841 }}>
            <div style={{color:"#000"}}>Hello World!</div>
          </MapMarker>
        </Map>
      )
    }

    맵위에 커스텀오버레이 올리기

    function(){
      return (
        <Map
          center={{ lat: 33.5563, lng: 126.79581 }}
          style={{ width: "100%", height: "360px" }}
        >
          <CustomOverlayMap position={{ lat: 33.55635, lng: 126.795841 }}>
            <div
              style={{padding:"42px", backgroundColor:"#fff", color:"#000"}}
            >
              Custom Overlay!
            </div>
          </CustomOverlayMap>
        </Map>
      )
    }

    맵위에 마커 클러스터 올리기

    function(){
      return (
        <Map
          center={{ lat: 36.2683, lng: 127.6358 }}
          style={{ width: "100%", height: "360px" }}
          level={14}
        >
          <MarkerClusterer
            averageCenter={true}
            minLevel={10}
          >
            {clusterPositionsData.positions.map((pos) => (
              <MapMarker
                key={`${pos.lat}-${pos.lng}`}
                position={pos}
              />
            ))}
          </MarkerClusterer>
        </Map>
      )
    }

    Documentation

    Working list

    • Map
      • Marker
      • InfoWindow
      • CustomOverlay
      • MarkerClusterer
      • AbstractOverlay
      • Shape
        • Circle, Polyline, Polygon, Rectangle, Ellipse
      • DrawingBox
    • Roadview
      • Marker
      • InfoWindow
      • CustomOverlay
    • StaticMap

    Contribute

    ISSUE와 PR 대환영 입니다..!!

    Install

    npm i react-kakao-maps-sdk

    DownloadsWeekly Downloads

    1,464

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    807 kB

    Total Files

    41

    Last publish

    Collaborators

    • jaeseokim