카카오 지도 api 사용하기

2차 프로젝트 클론코딩에는 비교적 자유로웠다.
이번에 하게 된 홈페이지는 펫 플래닛이라는 강아지를 맡길 수 있는 사람을 매칭시켜주는 프로그램이다.

그 안에 펫시터의 위치를 표시하는 지도가 있다.

카카오 디벨로퍼를 들어가 보았는데, 생각보다 잘 되어 있어서 놀랐다.

1. 카카오 디벨로퍼에 회원가입을 한다.(그냥 카카오 아이디로 가능하다.)
2. 내 애플리케이션에 들어가서 애플리케이션을 추가한다.

• 앱 이름과 사업자명을 쓰라고 하는데, 나는 앱 이름에는 프로젝트 이름, 사업자명에는 그냥 내 이름을 썼다.

3. 이렇게 애플리케이션을 추가하게 되면 각 앱 별 키를 받을 수 있게 된다.

• 나는 javascript 키를 사용하였다.

4. 플랫폼에 들어가서 사이트 도메인을 추가한다.(나는 npm을 사용하므로 http://localhost:3000, 3001, 3002를 다 추가하였다.
5. javascript키를 가지고, index.html 파일에 javascript태그를 추가한다.

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=이 부분에 본인의 App key를 넣어주세요" ></script>

6. import React, { useEffect } from 'react';
   import styled from 'styled-components';
   
   	const { kakao } = window;
   
   	const LocationMap = ({ location }) => {
    const { latitude, longitude } = location;
    // 상위 컴포넌트에서 위도와 경도를 props로 가져왔다.
    
    useEffect(() => {
      const mapcontainer = document.getElementById('Sittermap');
   
      const options = {
        center: new kakao.maps.LatLng(latitude, longitude),
        // 지도의 중심 위치를 위도와 경도로 설정한다.
        level: 4,
      };
   
      const map = new kakao.maps.Map(mapcontainer, options);
      map.addOverlayMapTypeId(kakao.maps.MapTypeId.TERRAIN);

//지도 위에 마커를 설정합니다. 저는 지도의 중심 위치(펫시터의 위치)로 설정하였습니다.
const markerPosition = new kakao.maps.LatLng(latitude, longitude);
const marker = new kakao.maps.Marker({
  position: markerPosition,
});
marker.setMap(map);

// 마커를 중심으로 한 원을 설정합니다.
const circle = new kakao.maps.Circle({
  center: new kakao.maps.LatLng(latitude, longitude), // 원의 중심좌표 입니다
  radius: 130, // 미터 단위의 원의 반지름입니다
  strokeWeight: 1, // 선의 두께입니다
  strokeColor: '#75B8FA', // 선의 색깔입니다
  strokeOpacity: 1, // 선의 불투명도 입니다 1에서 0 사이의 값	이며 0에 가까울수록 투명합니다
  strokeStyle: 'solid', // 선의 스타일 입니다
    fillColor: '#CFE7FF', // 채우기 색깔입니다
    fillOpacity: 0.4, // 채우기 불투명도 입니다
  });
  circle.setMap(map);
  });

  return <MapDiv id="Sittermap" />;
};

  export default LocationMap;

  const MapDiv = styled.div`
width: 100%;
height: 300px;
border-radius: 5%;
  `;

7. 지도 사이즈를 설정해야 한다. 이거 안하면 지도가 나타나지 않는다.(나도 화면을 꽉 채워서 나오지 않을까 했는데 안나온다.)