kakao developer page(지도)

https://apis.map.kakao.com/web/guide/ 여기로 들어가자.
카카오 맵을 이용하고 싶어서 가이드데로 하나씩 따라해볼 예정임.

https://developers.kakao.com/ 여기서 카카오톡 로그인(혹은 회원가입)하고

내 애플리케이션 -> 애플리케이션 추가하기 누른다음에 앱 이름을 아무렇게나 지정하자

여기서 나는 JavaSeript키를 사용할거임.

그다음 가이드에 보니 플랫폼으로 가서 웹 플랫폼에 도메인을 등록하라고 한다.

https://apis.map.kakao.com/web/guide/ 다시 보자.
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 검색 */}
        </>

    )
}

이렇게 넣어줘서 테스트가 잘 되는지 보자.
참고로, 위도 경도를 바꾸려면 구글 지도를 활용하자.

구글 지도에는 지도 좌표가 있음!

center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.

이부분을 바꿔 넣으면 되겠다.

Start learning Docker
스프링 메시지, 국제화

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage