-
6월 21일 수요일 TIL 회고록카테고리 없음 2023. 6. 21. 22:36
카카오 지도 API를 사용해봤다. 자꾸 지도가 안나와서 정말 고생했다..
카카오 지도 API 사용방법
먼저 지도 API를 사용하려면 아래 과정이 필요하다.
카카오 개발자사이트에 접속한다.
여기서 시작하기를 누른 후 애플리케이션 추가하기 버튼을 누른다.
앱 이름과 사업자명을 적은 후 저장을 눌러서 애플리케이션을 만든다.
만들어졌으면 클릭해서 각종 설정을 할 수 있는 화면으로 넘어간다.
여기서 앱 키가 있는데, JavaScript 키를 사용 할 것이다.
내 애플리케이션 > 앱 설정 > 플랫폼 > Web 플랫폼 등록 버튼을 눌러서 Web 플랫폼을 등록해준다.
http://localhost 등등 사이트 도메인을 적어준 후 저장 버튼을 눌러 저장한다.
이제 HTML, JS를 사용해서 API를 사용해보자.
사용법은 여기에 잘 나와있다.
1. 지도를 담을 영역 만들기
<div id="map" style="width:500px;height:400px;"></div>- 500x400 크기로 만들었다.
- 지도를 담을 영역으로 스타일이 지정된 태그를 선언했다. 태그의 id 값은 map 으로 선언했다.
2. 실제 지도를 그리는 Javascript API를 불러오기
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>- // 이라는 상대 프로토콜을 사용하면, 사용자의 http,https 환경에 따라 자동으로 해당 프로토콜을 따라가게 된다.
- API를 로딩하는 스크립트 태그는 HTML 파일안의 head, body 등 어떠한 위치에 넣어도 상관없다.
- 하지만, 반드시 실행 코드보다 먼저 선언되어야 한다.
3. 지도를 띄우는 코드 작성
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표. level: 3 //지도의 레벨(확대, 축소 정도) }; var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴- Map 객체의 두 번째 파라미터로 넣는 options 속성 중, center는 지도를 생성하는데 반드시 필요하다.
- center에 할당한 값은 LatLng 클래스를 사용하서 생성한다. 흔히 위경도 좌표라고 부르는 WGS84 좌표계의 좌표값을 넣어서 만드는데, 생성인자는 위도(latitude), 경도(longitude)순으로 넣어주면 된다.
전체 코드
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Kakao 지도 시작하기</title> </head> <body> <div id="map" style="width:500px;height:400px;"></div> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script> <script> var container = document.getElementById('map'); var options = { center: new kakao.maps.LatLng(33.450701, 126.570667), level: 3 }; var map = new kakao.maps.Map(container, options); </script> </body> </html>
학원에서 프론트엔드 부분은 vs code로 해서 인텔리제이말고 vs code로 해서 이번에도 vs code를 사용했다.
하지만 계속 흰 화면만 나와서 인텔리제이에서도 위와 같은 방법으로 해봤는데 똑같이 흰 화면만 나왔다.
앱키 문제도 아니고... 해서 구글링을 해보다 깨달았다.
https://begin-to-end-project.tistory.com/106
카카오 맵 API 실행 안되는 경우
< 문제상황 > 카카오 맵 API 가이드를 따라 지도를 띄우는 코드를 작성해도 지도가 띄워지지 않는 문제 : 가이드를 따라 애플리케이션 추가, 앱 키 발급, 사이트 도메인 추가 : 이후 index.html 작성
begin-to-end-project.tistory.com
위에 블로그를 참고해서 해결했다.
vs code에 Live Server 익스텐션을 사용해서 HTML을 불러오면, 이런식으로 주소가 나온다.
http://127.0.0.1:5500/KakaoMap.html여기서는 127.0.0.1 아이피를 사용한다. 위에 웹 플랫폼 등록에서 해당 아이피를 등록해주고 실행했더니 지도가 정상적으로 나온다.
카카오 맵 API 사이트에 샘플 버튼을 눌러 여러 기능들을 사용해 볼 수 있다.
이제 프론트엔드 부분도 하면서 열심히 해봐야겠다..