[typescript] kakao map API

kakao map API

1. kakao map API 접속

2. 준비하기에 따라 kakao developers 에서 회원가입 후
   API 발급 받기.

3. index.html head 에 script 추가

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

4. kakao global 선언

// 최상단
declare global {
  interface Window {
    kakao: any;
  }
}

5. react-kakao-maps-sdk 설치

yarn add react-kakao-maps-sdk

6. tsconfig.json 수정(안해도 됨! 했다가 에러 조심)

// tsconfig.json

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

7. 실 사용 예제

// latitude = 위도, longitude=경도 :number,
// Marker 도 MapMarker 로 자유롭게 사용가능.
import { MapMarker, Map } from "react-kakao-maps-sdk";

declare global {
  interface Window {
    kakao: any;
  }
}

interface props {
  longitude: number;
  latitude: number;
  marker: string;
}
const Location = (props: props) => {
  const { longitude, latitude, marker } = props;
  return (
    <Map
      center={{ lat: latitude, lng: longitude }}
      style={{ width: "360px", height: "360px" }}
    >
      <MapMarker position={{ lat: latitude, lng: longitude }}>
        <div style={{ color: "#000" }}>{marker}</div>
      </MapMarker>
    </Map>
  );
};

export default Location;