KakaoMap API

17969 ワード
テキストリンク
🧻 Preboardの中古市場部分では、商品登録時に取引先を設定するため、KACAが提供する「KACA地図API」を学びます.🚽

ココア地図


  • Kakamap API接続を受信するためhttps://apis.map.kakao.com/

  • アプリケーションを作成し、JavaScript Key値を使用するアプリケーションキーを生成します.

  • 使用中のサイトドメインアドレスを入力します.

  • マニュアルを見てコードを書きにくい.サーバ側レンダリングをサポートする「Next JS」では、ドキュメントオブジェクトが画面を追加する前に生成されない値(=undefined)を持つため、異なる方法で実装できます.

    • ココアマップ登録ページ


  • KakaoMapが提供したscriptを私のプロジェクトに適用する必要があります.
    ▶ラベルに|𐥊𐥊4|を入れる.srcプロパティを使用してcaoマッピングのスクリプトを取得し、JavaScript Key値を入力します.これによりcaoマッピングのスクリプトファイルを呼び出すことができます.
    見出しラベル
    Next(次のステップ)は、HTMLからHeadタグに他の機能を呼び出します.jsのscriptコンポーネントを使用して、同じ機能を使用できます.
  • Headを使用して、ページをレンダリングし、ドキュメントオブジェクトを作成した後に、コカソマッピングを呼び出すことができます.
  • Head:地図を含む領域を設定し、useEffect:初期位置値を設定

  • 地図をダウンロードしてブラウザに保存します.したがって、サーバは存在しません.window.kakaoでみんなに伝えなきゃ
    • import Head from "next/head";
import { useEffect } from "react";

declare const window: typeof globalThis & {
  kakao: any;
};

export default function KakaoMapPage() {
  useEffect(() => {
    // 카카오 맵을 호출하는 JS
    const container = document.getElementById("map"); // 지도를 담을 영역의 DOM 레퍼런스
    const options = {
      // 지도를 생성할 때 필요한 기본 옵션
      center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표.
      level: 3, // 지도의 레벨(확대, 축소 정도)
    };

    const map = new window.kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴
    console.log(map);
  }, []);

  return (
    <>
      <Head>
        <script
          type="text/javascript"
          src="//dapi.kakao.com/v2/maps/sdk.js?appkey=5c3f3b5fa1a016d4a491f6dc430152fe"
        ></script>
      </Head>
      
      // 카카오 맵을 출력하는 HTML
      <div id="map" style={{ width: "500px", height: "400px" }}></div>
    </>
  );
}

  • containeeroptionsを指定する必要があります.この場合、&roscript.srcに接続されます.
    • クリックした場所にタグを表示
    https://apis.map.kakao.com/web/sample/addMapClickEventWithMarker/
    このコードを追加します.
    export default function KakaoMapRoutedPage() {
  useEffect(() => {
    const script = document.createElement("script"); // script 태그를 만든다.
    script.src =
      "//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=---f-b5-a1a-1-d4-4-1-6-c-30--2-e";
    document.head.appendChild(script); // appendChild 자식으로 추가
    script.onload = () => {
      window.kakao.maps.load(() => {
        const container = document.getElementById("map"); // 지도를 담을 영역의 DOM 레퍼런스
        const options = {
          // 지도를 생성할 때 필요한 기본 옵션
          center: new window.kakao.maps.LatLng(
            37.51719553992789,
            126.95962070083127
          ), // 지도의 중심좌표.
          level: 3, // 지도의 레벨(확대, 축소 정도)
        };

        const map = new window.kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴
        console.log(map);

        //마커
        // 지도를 클릭한 위치에 표출할 마커입니다
        const marker = new window.kakao.maps.Marker({
          // 지도 중심좌표에 마커를 생성합니다
          position: map.getCenter(),
        });
        // 지도에 마커를 표시합니다
        marker.setMap(map);

        // 지도에 클릭 이벤트를 등록합니다
        // 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
        window.kakao.maps.event.addListener(
          map,
          "click",
          function (mouseEvent: { latLng: any }) {
            // 클릭한 위도, 경도 정보를 가져옵니다
            const latlng = mouseEvent.latLng;

            // 마커 위치를 클릭한 위치로 옮깁니다
            marker.setPosition(latlng);
          }
        );
      });
    };
  }, []);

  return (
    <>
      <div id="map" style={{ width: "500px", height: "400px" }}></div>
    </>
  );
    注:kakaomap
    PackageInfoノート[ネットワーク整理]
    エンクロージャを通過するファイバモード