react/caka地図API

本プロジェクトで地図APIを使用することになりました
地図APIの種類は大体KacNaverGoogleがあります
地図APIココアグーグルNAVER価格地図API:30万/日、300万/月無料1000万/月無料$200/月無料サービス地域韓国グローバル
その中で、KACAは例が詳しいと思ったので、KACAを使うことにしました
正式なドキュメントでは、jsオフセットマップの使用方法について説明します.
これを反応に変えて地図を置かなければなりません.

react-kakao-maps-sdk

KaKao Maps APIをreactionのライブラリに移植します.
react-kakao-maps-sdkが存在し、本プロジェクトで試用
react-kakao-maps-sdkホームページへ
Tutorialについていくと、適用しやすいです

1.鍵リリース

https://developers.kakao.com/
ログイン後に[マイアプリケーション]をクリックして追加

情報のJavaScriptキーをコピーすると、鍵のリリースが完了します.

2. Usage

KaKaoマップAPIにjsキーpublic/indexを入力します.jsファイルのheadラベルに入れればいいです.

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

3. install

npm install react-kakao-maps-sdk

4. Simple Usage

地図を使用するファイルからインポートし、地図をロードすればいいです.

import { Map, MapMarker } from "react-kakao-maps-sdk";

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>
  )
}

簡単に地図を置けます!