kakao Developerページ(地図)

3313 ワード
テキストリンク
ここから入りましょう.
KakaoMapを使いたいのでガイドさんのリクエスト通りにするつもりです
https://apis.map.kakao.com/web/guide/ここでKakaoTalkに登録(または会員加入)
「マイアプリケーション->アプリケーションの追加」を押して、アプリケーションに任意の名前を付けます.

ここでJavaSeriptキーを使います
それからガイドは私にプラットフォームにドメイン名を登録させました.

https://developers.kakao.com/を見てみましょう.
6番のアプリケーションは無視します.
基本的な設定が終わりましたので、最初の部分を見てみましょう.

地図を含む領域をreturn、実際の地図を描くJavaScript apiをhead、vscodeに移動します.
// 테스트 페이지

import Head from 'next/head'
import { useEffect } from 'react';

export default function KakaoMapPage(){
     useEffect(() => {

    const container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
    const options = { //지도를 생성할 때 필요한 기본 옵션
	center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
	level: 3 //지도의 레벨(확대, 축소 정도)
    };

    const map = new kakao.maps.Map(container, options); 
    }, [])

    return (
        <>
        <Head>
            <script 
            type="text/javascript" 
            src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c1573b07307af25f6bb7415ff47e92fc"></script>
        </Head>
        <div id="map" style={{width:"500px", height:"400px"}}></div>
        {/* // style 중괄호가 두개인 이유는 변수가 두개여서. 저 style 태그는 자바스크립트 css이다. html css, javascript css 문법마다 다 다름. markup language 검색 */}
        </>

    )
}
このように入れてテストできるかどうか見てみましょう.
ちなみに緯度を変えたいならグーグルマップを利用します.

Googleマップには地図座標があります!
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
この部分を入れればいいです
指令のcp
スプリングメッセージ、国際化