ディレクトリマッピングをNext+Type Scriptネストされたアイテムに関連付ける

24244 ワード
next typescript kakaomap テキストリンク

現在進行中のプロジェクトはコカソ地図をバインドしています.
しかし調べてみると、kakaomap公式サイトに展示されている例はES 5文法のバニラJavaScriptで書かれているようです.
これをnextとtypeスクリプトに適用する過程で、様々なブログと文章を参考にして、next+typeスクリプト環境で成功に適用する方法を理解しました.

マカオ地図APIはマカオ地図APIサイトで接続して使用することができます

ただし、その前に、カナダ地図APIを使用する場合は、ココア開発者のWebサイトに移動し、まず私のアプリケーションを登録し、API鍵を取得します.


ではこのように鍵を得ることができ、ここでJavaScript鍵を使えばいいのでサイトドメインを登録すればいいです.

正式な分類マッピングAPIを使用して地図を描く


1.APIキー環境変数の登録


上記のJavascriptキーをコピーし、環境変数としてプロジェクトに登録します.
// .env.local
NEXT_PUBLIC_KAKAOMAP_APPKEY="JavaScript key를 여기다가 붙입니다."
nextプロジェクトは.env.localファイルに環境変数を登録します.NEXT_PUBLIC_KAKAOMAP_APPKEYapiキーを後ろに貼り付けます.ここでは引用符で囲みます.

2.リンクディレクトリマッピングJavaScriptスクリプト


kaoマッピングapiを正式に登録するには、JavaScriptの<script>を貼り付ける必要があります.

ただし、Nextには別の<script>はありません.
Reactの場合はindexを使用します.htmlがあるので、そこにscriptタグを貼ればいいのですが、nextではどこに貼ればいいのでしょうか?
// _app.tsx
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <script src={ `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAOMAP_APPKEY}&autoload=false&libraries=services`}></script>
      </Head>
      <ThemeProvider theme={themeOptions}>
        <GlobalStyles />
        <AppLayout>
          <Component {...pageProps} />
        </AppLayout>
      </ThemeProvider>
    </>
  )
}
私の場合はこのような_app.tsxがファイル中<Head>タグに<script>タグが貼り付けられています.
srcではappkeyの後ろに先ほど.env.localに登録した環境変数の値があります.
ただし、この場合、次のようにnext自体から赤い下線にエラーがエクスポートされます.
External synchronous scripts are forbidden.
外部シナリオは禁止という意味らしい.
この問題を解決するために、以下のコードを修正しました.
// _app.tsx
import Script from 'next/script';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script 
        strategy='beforeInteractive' 
        src={ `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAOMAP_APPKEY}&autoload=false&libraries=services`}
      />
      <ThemeProvider theme={themeOptions}>
        <GlobalStyles />
        <AppLayout>
          <Component {...pageProps} />
        </AppLayout>
      </ThemeProvider>
    </>
  )
}
外部スクリプトを使用するには、'next/sript'からScriptをインポートし、既存の<Script>と同様に使用します.<script>では、'next/script'プロパティとNextを定義できます.js最適化スクリプトロード
  • strategy:botが検出または管理に同意したような重要なスクリプトに使用され、ページのインタラクションの前にインポートおよび実行する必要があるスクリプト
    これらのスクリプトは、サーバの初期HTMLに挿入され、独自のバンドルJavaScriptが実行される前に
    • が実行されます.
  • beforeInteractive:(デバッガ)ページインタラクション後にスクリプトをインポートおよび実行するためのラベルマネージャまたは分析ツール
    これらのスクリプトはクライアント(client-side)に挿入され、水和後に
    • が実行されます.
  • afterInteractive:WeChatやSNSコンポーネントなどのアイドル時間ロードをサポートするためのスクリプトです.
    • また、KACA公式文書によると、スクリプトのロードが完了する前にv 3のオブジェクトにアクセスしようとするとエラーが発生します.lazyOnloadを使用して、ロード終了時にコールバックしてオブジェクトにアクセスします.
    この場合、v 3ロードスクリプトアドレスにパラメータwindow.kakao.maps.loadを指定する必要があります.
    最後のautoload=falseは、アドレスを座標に変換するために追加されたライブラリです.

    3. Map.tsxファイルを作成してKakaアドレスに接続

    import { FC, useEffect } from "react";
import styled from "@emotion/styled";

const MapContainer = styled.div`
  aspect-ratio: 16 / 9;
`
declare global {
  interface Window {
    kakao: any;
  }
}
const Map: FC<{address: string}> = ({ address }) => {
  useEffect(() => {
    const onLoadKakaoMap = () => {
      window.kakao.maps.load(() => {
        const geocoder = new window.kakao.maps.services.Geocoder() // 주소-좌표 반환 객체를 생성
        // 주소로 좌표를 검색
        geocoder.addressSearch(address, (result: any, status: any) => {
          if (status === window.kakao.maps.services.Status.OK) { // 정상적으로 검색이 완료됐으면
            var coords = new window.kakao.maps.LatLng(result[0].y, result[0].x)
            // 지도를 생성
            const container = document.getElementById("map")
            const options = {
              center: coords,
              level: 3,
            }
            const map = new window.kakao.maps.Map(container, options)
            // 결과값으로 받은 위치를 마커로 표시
            new window.kakao.maps.Marker({
              map: map,
              position: coords,
            })
          } else { // 정상적으로 좌표가 검색이 안 될 경우 디폴트 좌표로 검색
            const container = document.getElementById("map")
            const options = {
              center: new window.kakao.maps.LatLng(33.450701, 126.570667),
              level: 3,
            }
            // 지도를 생성
            const map = new window.kakao.maps.Map(container, options)
            new window.kakao.maps.Marker({
              map: map,
              position: coords,
            })
          }
        })
      })
    }
    onLoadKakaoMap()
  }, [address])

  return (
    <MapContainer id="map" />
  )
}

export default Map
    まず、グローバルインタフェースlibraries=servicesの使用を宣言します.
    位置はどこでも構いません.
    アドレスを座標に変換して使うので、ネットで見たように緯度や経度を受け入れず、ハングルアドレスだけをpropsとして受け入れます.window.kakaoは、関数onLoadKakaoMapで実行されます.
    まずアドレス-座標を生成してオブジェクトを返し、受信したアドレスを座標に変換します.座標が正常に変換された場合、地図を生成してタグにマークします.そうしないと、基本座標を登録します.
    (基本座標は済州島ココア社…)

    ディレクトリマッピングの使用


    現在使用されている場所は、以下のように使用できます.
    import Map from "parts/Map"

<Map address={address} />
    その後、受信したpropsアドレスは、このように自動的に変換される.
    addressには、アドレスとして認識できる文字列を入力すればよい.

    これでスクリーンの地図がとてもきれいに表示されます.
    2つのWordファイルの内容が一致しているかどうかを比較するC#解決方法
    collections.Counter(), defaultdict()