[React] Kakao Map - 폴리곤 (카카오맵)

 

 

 

 

---

 

 

선택지역을 polygon으로 표시하는 map

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

기본 Kakao Map 설정

 

 

https://developers.kakao.com

 

1. 카카오 개발자 사이트에서 카카오 로그인
2. 내 에플리케이션 - 애플리케이션 추가하기 - 앱이름 등록
3. 생성한 앱클릭 - 플랫폼 - 사용할 플랫홈 선택 후 도메인 설정

 

• html파일에 추가

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

 

 

 

---

 

 

 

지도 생성하기

• javaScript로만 할 경우

import React, { useEffect } from 'react';
const { kakao } = window;

export const KakaoMap = () => {
  useEffect(() => {
    const container = document.getElementById('map');
    const options = {
      center: new kakao.maps.LatLng(33.450701, 126.570667),
      level: 3,
    };
    const map = new kakao.maps.Map(container, options);
  }, []);

  return (
    <>
      <div id="map" style={{ width: '100%', height: '100vh' }}></div>
    </>
  );
};

 

 

 

• kakao-maps-sdk 사용할 경우

Install

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

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

function App() {
  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>
  );
}

export default App;

 

 

 

 

 

 

 

 

---

 

 

 

 

 

컨트롤 올리기

 

 

• javascript 사용

import React, { useEffect } from 'react';
const { kakao } = window;

export const KakaoMap = () => {
  useEffect(() => {
    const container = document.getElementById('map');
    const options = {
      center: new kakao.maps.LatLng(33.450701, 126.570667),
      level: 3,
    };
    const map = new kakao.maps.Map(container, options);

    // 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
    var mapTypeControl = new kakao.maps.MapTypeControl();

    // 지도에 컨트롤을 추가해야 지도위에 표시됩니다
    // kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
    map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);

    // 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
    var zoomControl = new kakao.maps.ZoomControl();
    map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
  }, []);

  return (
    <>
      <div id="map" style={{ width: '100%', height: '100vh' }}></div>
    </>
  );
};

 

구현 화면

 

 

 

• kakao-maps-sdk 사용할 경우

sdk사이트에서 작성되있는 코드에서 kakao는 window이다.

const {kakao} = window 추가

export function KakaoMap() {

  const { kakao } = window;
  
return (
    <Map
      center={{ lat: 33.5563, lng: 126.79581 }}
      style={{ width: '100%', height: '360px' }}
    >
    
 // 지도에 컨트롤을 추가해야 지도위에 표시됩니다
 // kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
      <ZoomControl position={kakao.maps.ControlPosition.TOPRIGHT} />
      <MapTypeControl position={kakao.maps.ControlPosition.TOPRIGHT} />
    </Map>
  );
}

 

 

 

 

 

---

 

 

 

 

 

 

폴리곤 생성

 

 

  return (
    <Map
      center={{ lat: 33.45133510810506, lng: 126.57159381623066 }}
      style={{ width: '100%', height: '100vh' }}
    >

      <Polygon
        path={[
          { lat: 33.45133510810506, lng: 126.57159381623066 },
          { lat: 33.44955812811862, lng: 126.5713551811832 },
          { lat: 33.449986291544086, lng: 126.57263296172184 },
          { lat: 33.450682513554554, lng: 126.57321034054742 },
          { lat: 33.451346760004206, lng: 126.57235740081413 },
        ]}   //위도 경도를 넣어준다.
        strokeWeight={2} // 선의 두께입니다
        strokeColor={`${colors.green}`} // 선의 색깔입니다
        strokeOpacity={1} // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
        strokeStyle={'solid'} // 선의 스타일입니다
        fillColor={`${colors.green}`} // 채우기 색깔입니다
        fillOpacity={0.2} // 채우기 불투명도 입니다
      />
    </Map>
  );
}

 

 

 

 

 

---

 

 

 

폴리곤 생성시 지도범위 재설정

 

 

export function KakaoMap() {
  const { kakao } = window;
  const [map, setMap] = useState();
  //생성된 polygonData 좌표데이터
  const polygonData = useSelector((state) => state.polygon.polygon);

  const bounds = useMemo(() => {
    //지도 재설정할 범위정보 가질 LatLngBounds객체
    const bounds = new kakao.maps.LatLngBounds();  
    polygonData.forEach((point, i) => {     //LatLngBounds객체에 좌표추가
      bounds.extend(new kakao.maps.LatLng(point.lat, point.lng));
    });
    return bounds;
  }, [polygonData]);

  useEffect(() => {    //polygonData 변경시 bounds 재설정
    if (map) map.setBounds(bounds);
  }, [polygonData]);


}

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

참고사이트

 

 

https://react-kakao-maps-sdk.jaeseokim.dev/docs/intro

 

Tutorial | react-kakao-maps-sdk docs

 

https://apis.map.kakao.com/web/guide/