アプリケーション[REACT]ココアマップAPI基準(1)🌍

現在、バックエンドと連携してWebプロジェクトを行っています.😀
これまで作成したコンテンツの中で最も扱いにくいKakao Map APIの使い方をご紹介します.
『ガイド』の使い方によって、地図を簡単に生成することができます.
基本的な地図作成と使用方法はマニュアルで詳しく説明されていますが、SampleカテゴリでKakamapを使用した様々な例はコードとともに説明されているので、あまり難しくはありません!
でもどうして一番難しい仕事なんだろう.
ココアが提供するサンプルをある程度混ぜてからカスタマイズしなければならないからです.
例が多くてよかったので、よく参考作業をしました.
その中で私が参考にしたサンプルは以下の通りです.
✔️ ココアマップAPI
✔️ クリックした場所にタグを表示
✔️ 座標を使用したアドレスの取得
以上の3つのサンプルを利用して、私が最終的にしなければならないのは:

完成本

の地図にタグを付けると、その法定動アドレス(市/区/動情報)が底部にタグを生成します.

と同じ法政洞アドレスにタグが表示された場合、タグは生成されません.

異なる法定同一アドレスは最大5個、タグも最大5個生成できる.

のタグを再度クリックすると、タグは消え、その法定アドレスを含むタグも消えます.

では、今から本格的に方法を考えましょう.👀

1.地図の作成と設定🔨

✔✔私はReact,Nextです.js環境で作業し、index.htmlにscriptを追加するのではなく、createElementで直接ファイルにscriptを作成して使用します.

const getMap = () => {
    const mapScript = document.createElement("script");
    mapScript.async = true;
    mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAOMAP_APPKEY}&autoload=false&libraries=services`;
    document.head.appendChild(mapScript);
    mapScript.addEventListener("load", onLoadKakaoMap);
  };

ここで注意しなければならないのは.envファイルに保存するアプリKEY名は勝手に保存できません.私の場合、NEXT PUBLIC KAOMAP APKEYで保存すれば良いのですが、他のブログの記事を見て、必ずREACTアプリを貼ると言っていましたが、正確に何を言ったら正しいのか分かりません.とりあえず、ここまでついてきても地図に表示されていなければ、名前の間違いかもしれないので、皆さん確認してほしいです.❗
❗また、私のように、KakaoMap APIでライブラリを使用している場合、scriptの後ろにあるlibrary=サービスは見逃せません.皆さんは私のようにそれのために長い間うろうろしないでください.❗
Kakamap APIの例を参考にし,主コードを関数に分けて動作させた.上のコードはscriptを生成しscriptのsrcでKakamap API KEYを設定する関数です.基本的な準備ができていると考えられます.次にaddEventListenerを実行し、次のコードを実行します.

const onLoadKakaoMap = () => {
    kakao.maps.load(() => {
      const container = document.getElementById("map");
      const options = {
        center: new kakao.maps.LatLng(37.56682420062817, 126.97864093976689), //지도의 중심좌표
        level: 5, //지도의 확대 레벨
      };
      const map = new kakao.maps.Map(container, options); //지도 생성
      const geocoder = new kakao.maps.services.Geocoder(); //주소-좌표 변환 객체 생성
      const marker = new kakao.maps.Marker(); //클릭한 위치를 표시할 마커

      getCenter(map); //지도의 중심좌표 얻기
      getArea(map, geocoder, marker);
    });
  };

上記の内容は、Kakamap APIサンプルで見やすいコードです.地図の中心座標をソウル市役所に設定しました.

const getCenter = (map) => {
    //사용자의 위치를 정상적으로 받아오면 해당 위치가 중심좌표
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        const lat = position.coords.latitude,
          lon = position.coords.longitude;

        const locPosition = new kakao.maps.LatLng(lat, lon);
        map.setCenter(locPosition);
      });
    }
    //아니라면 서울시청이 기본 중심좌표
    else {
      const locPosition = new kakao.maps.LatLng(
        37.56682420062817,
        126.97864093976689
      );
      map.setCenter(locPosition);
    }
  };

以上のコードは地理的にマークを参照して実現される.HTML 5 GeoLocationを使用してユーザーが場所にアクセスできるようにすると、地図をロードするときにユーザーの位置が中心座標になります.
次のヒントでは、マークを撮影し、撮影位置の住所を取得する方法を紹介します.👀