우선 카카오 developers에 로그인을 해줍니다. 없으면 회원가입 하시구요~
처음엔 npm의 vue-daum-map인가.. 그런걸 쓰려고 했는데 안되더라구여 -_-
오늘은 좀 친절하고 디테일 하게 설명 해드리겠습니당.
알만한 분들은 코드만 보시면 될듯 하네여 ㅋ
아래의 사용방법을 따라서
우선 기본 세팅을 똑같이 진행해 주세요 ~~키 발급 받는거에여.
(카카오 개발자 사이트에서 퍼왔습니다..혼선이 있을까 일부 수정했어요.)
1. 카카오 개발자사이트 (https://developers.kakao.com) 접속
2. 개발자 등록 및 앱 생성
3. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록
4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080)
5. 페이지 상단의 [키]를 지도 API의 appkey로 사용합니다.
그리고 뷰 폴더 최상단에 보면 (src 폴더 아래에 있을거에요)
index.html 또는 index.template.html 이라고... 그 헤드에서 메타태그 설정하고 그러는데가 있을꺼에요.
모르시겠다 하시믄 vs code나 inteliJ(webstorm 또는 android studio) 기준으로
단축키 Ctrl + Shift + f로 전체파일에서 검색해서 meta name이나 meta charset 이라고 검색해보세요.
거기다 <head>사이에 아래 코드를 추가해줍니다.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은RESTAPI키"></script>
넣고싶은 html 위치에 아래 코드를 넣어줍니다.
<div id="map" style="width:100%;height:100%;"></div>
<!--width, height 값은 px 단위를 사용하여도 무관 -->
그런담에 해당 페이지를 바라보고 있는 script의 mounted()에 아래 코드를 넣어줍니다.
저는 타입스크립트 쓰고있어서 구조가 좀 다를 수 있습니다.
private mounted(): void {
const container = document.getElementById('map');
const mapOptions = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 4 //지도의 레벨(확대, 축소 정도)
};
const map = new kakao.maps.Map(container, mapOptions);
}
전 중간에 뭐 401에러가 떴다가..정의되지 않은거라던가... 에러가 발생해서 보니까
RESTFUL API의 키값을 받아 넣으니 동작하네요.
'개발관련' 카테고리의 다른 글
| javascript object find하기 초간단 예제 (0) | 2020.09.11 |
|---|---|
| css 말줄임(text-overflow:ellipsis) 이 적용되지 않을때. (0) | 2020.08.21 |
| 애드센스를 달고나서 티스토리 본문내 버튼이 안눌릴때 (0) | 2020.08.09 |
| node.js homebrew 설치후 node-v가 안 보일때 (0) | 2020.07.31 |
| JIRA 알림 메일 수신 거부, 지메일 필터(차단)하기 (0) | 2020.07.12 |
댓글