REACT KAKAO MAP

프로젝트 중에 특정한 지역의 맵을 지도에서 찾고 길찾기를 넣기 위해서 처음으로 카카오맵 사이트를 들어갔다.

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

다른 곳보다는 설명이 자세하게 나와있다고 하여 들어가봤는데 그래도 많은 어려움을 느꼈다.

일단 지도 생성을 하고 다른 코드들을 따서 약간 섞어쓴다는 생각으로 해보았다.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      type="text/javascript"
      src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js"
      charset="utf-8"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <!-- <div id="map" style="width: 800px; height: 1000px"></div> -->
    <!-- css 위에 잡아야 할 것 같음 -->
    <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키값&libraries=services"
    ></script>
  </body>
</html>

React

/*global kakao*/
import React, { useEffect, useState } from "react";

const { kakao } = window as any;

const Map = ({ address, name }: any) => {
  const [area, setArea] = useState<any>({}); // 좌표 따는 state

  useEffect(() => {
    const container = document.getElementById("map");
    const options = {
      center: new kakao.maps.LatLng(37.365264512305174, 127.10676860117488),
      level: 3,
    };
    const map = new kakao.maps.Map(container, options); //지도 생성

    // 주소-좌표 변환 객체를 생성합니다
    const geocoder = new kakao.maps.services.Geocoder();

    // 주소로 좌표를 검색합니다
    geocoder.addressSearch(`${address}`, function (result: any, status: any) {
      // 정상적으로 검색이 완료됐으면
      if (status === kakao.maps.services.Status.OK) {
        const coords = new kakao.maps.LatLng(result[0].y, result[0].x); //좌표따는 것
        setArea(coords);
        // 결과값으로 받은 위치를 마커로 표시합니다
        const marker = new kakao.maps.Marker({
          map: map,
          position: coords,
        });

        // 인포윈도우로 장소에 대한 설명을 표시합니다
        const infowindow = new kakao.maps.InfoWindow({
          content: `<div style="width:150px;text-align:center;padding:6px 0;">${name}</div>`,
        });
        infowindow.open(map, marker);

        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
      }
    });
  }, [address, name]); //react에서 쓸 거면 useEffect로 꼭 감싸야함(이유 모름..)

  return (
    <div>
      <div id="map" style={{ width: "500px", height: "400px" }}></div>
      <a
        href={`https://map.kakao.com/link/to/${name},${area.Ma},${area.La}`}
        target="_blank"
        rel="noreferrer"
      >
        <button type="button">길찾기</button>

      </a>
      {/* 길찾기 */}
    </div>
  );
};
export default Map;

문제는 useState를 사용하는 것이었는데, 쓰지 않으면 오류가 나서 검색을 해보니 HTML에서 map을 만들어서 보여주는 것이 script보다 위에 있어야 한다는 것이었는데, component에서 지도를 만들고 싶었고 이것에 대해서 오류를 어떻게 잡아야 하나 검색해보았는데 useEffect를 사용하여 해결을 하였다.

이유는 잘 모르겠으나, 일단 지금 project가 기간이 정해져있기 때문에 끝내고 다시 찾아보아야겠다.

Author And Source

이 문제에 관하여(2022 03 30 kakao map), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hongwr/2022-03-30-kakao-map

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

2022 03 30 kakao map

REACT KAKAO MAP

HTML

React

Author And Source

좋은 웹페이지 즐겨찾기