[API] 카카오 지도 API 추가하기

https://developers.kakao.com/console/app

카카오계정

위 주소로 가서 카카오 아이디로 로그인을 한다.

 

 

 

 

 

로그인을 하면 해당 화면을 뜨는데, 애플리케이션을 다음과 같이 원하는 이름과 카테고리 사업자명으로 저장한다.

 

 

 

 

 

 

 

등록한 애플리케이션에 들어가서 플랫폼 카테고리로 간다. WEB 플렛폼 등록을 다음과 같이 해준다. (단순 연습이니 사이트 도메인을 localhost:8080, 127.0.0.1:8080 으로)

 

 

 

 

 

https://apis.map.kakao.com/

 

 

카카오맵 api 사이트이다. web을 선택하면

 

 

 

 

 

 

자바스크립트 api의 스크립트 부분을 복사해서 내 html 에 붙여넣기 한다. (무조건 내가 설정한 자바스크립트 태그의 위에 넣어야 한다.)

 

 

 

 

 

 

developer 사이트로 돌아가서 앱키 카테고리로 간 후, 자바스크립트키를 복붙한다. 그리고 이미 붙여넣은 태그 안에 앱키를 붙여넣기하면 된다.

 

 

 

 

 

크롬에 앱키를 포함한 주소를 주소창에 붙여넣기하고, 그것을 컨트롤 + s 로 추출하여 라이브러리 디렉터리 안에 넣는다. (라이브러리 디렉터리가 없다면 만든다)

 

 

 

 

 

 

자바스크립트 코드를 다음과 같이 설정해놓는다.

 

 

 

 

 

 

카카오 지도 API를 불러온 걸 확인할 수 있다.

 

 

 

 

 

lat과 lng는 지도의 위치. lv는 지도 확대 수준이다. 

 

 

 

 

 

navigator.geolocation.getCurrentPosition() 으로 사용자의 현재 위치를 허용할 것인지 묻고, data를 이용해 사용자의 현재 위치를 불러오게끔 한다.

 

 

 

 

지도의 위치를 옮기면 실시간으로 로컬 저장소에 값들이 저장된다.

 

 

 

 

 

다음 주소 API를 같이 사용하고 있을 경우, geocoder로 주소를 찍었으면 해당 좌표로 이동하게끔 하였고, 표시를 위한 마커도 추가하였다.