ルートページにココアマップを表示
ルーティングページ
ルーティングページ
ということで.
理由は.
すべてのルーティング・ページを受信し、ルーティング・ページでボタンをクリックします.
ルーティングページに直接移動します.だからクリックするとページの移動速度が非常に速くなります
これは
client side routingと言います.まだscriptを受け取っていないので、userEffectはすでに実行されています.
kakaoマップがないからエラー
この問題を解決する方法はscriptのダウンロードが完了するまで待つことです
画面に表示すればいいです
Kakaoはこの機能を提供しています
load<=ここに入る
<script type="text/javascript" src="http://dapi.kakao.com/v2/maps/sdk.js?autoload=false"></script>
<script type="text/javascript">
kakao.maps.load(function() {
// v3가 모두 로드된 후, 이 콜백 함수가 실행됩니다.
var map = new kakao.maps.Map(node, options);
});
</script>userEffectにはscriptと書かれている部分はありません.したがって、戻り文で作成したheadのscriptを削除します.
const script = documnet.createElement("script")
// script라는 태그를 만든걸 script에 할당
script.src = "//dapi.kakao.com/v2/maps/sdk.js?appkey=552947432f4385179f4725684702506d"
// script의 scr 속성에 "//dapi.kakao.com/v2/maps/sdk.js?appkey=552947432f4385179f4725684702506d" 할당
document.head.appendChild(script)
// html문서에서 head부분에다가 자식으로 script를 추가해준다.これは私たちがさっき
<Head>のラベルに入れたスクリプトと同じです.useEffect(()=>{
const script = documnet.createElement("script")
// script라는 태그를 만든걸 script에 할당
script.src = "//dapi.kakao.com/v2/maps/sdk.js?appkey=552947432f4385179f4725684702506d"
// script의 scr 속성에 "//dapi.kakao.com/v2/maps/sdk.js?appkey=552947432f4385179f4725684702506d" 할당
document.head.appendChild(script)
// html문서에서 head부분에다가 자식으로 script를 추가해준다.
script.onload = () => {
kakao.maps.load( () => {
const container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스
const options = {
//지도를 생성할 때 필요한 기본 옵션
center: new window.kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 3, //지도의 레벨(확대, 축소 정도)
};
const map = new window.kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
console.log(map);
});
}
},[])中に地図を受け取るコードを書いてください.
このまま実行すると、このような間違いが発生します.
この部分が漏れているからです.
"//dapi.kakao.com/v2/maps/sdk.js?appkey=552947432f4385179f4725684702506d"appkeyセクションにautoload=falseを追加する必要があります"//dapi.kakao.com/v2/maps/sdk.js?appkey=**autoload=false&**552947432f4385179f4725684702506d"前後シール**これは쿼리 스트링と言って、appkeyがあって、前にautoload=falseをプラスしましたautoload = key
false = value
次に、これらのオブジェクトを接続するときに&を使用します.
実際にはapiを要求するオブジェクトを含めることができますが、上記のクエリーリストの形式でアドレスを要求することができます.
クリックした場所にタグを表示
ここでコードをコピー
もう少し加えればいいです.
interface IMouseEvent {
latLng : any
}Reference
この問題について(ルートページにココアマップを表示), 我々は、より多くの情報をここで見つけました https://velog.io/@byungjin0120/routed-페이지에서-카카오-맵-지도-띄워보기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol