[작성일: 2023. 03. 04]
목차
KaKao 개발자 사이트 등록하기
- 카카오 개발자 사이트(http://developer.kakao.com)접속하기
- 개발자 등록 및 앱 생성
- 웹 플랫폼 추가
- 앱 선택 - [플랫폼] - [Web 플랫폼 등록] - 사이트 도메인 등록
- 사이트 도메인 등록
- [웹] 플랫폼 선택 후 [사이트 도메인] 등록 (예: http://127.0.0.1:5500)
- 페이지 상단의 [Javascript 키]를 지도 API의 appkey로 사용
- 앱 실행
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
지도를 담을 영역 만들기
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Current Location</title>
</head>
<body>
<h1>getCurrentPosition으로 위치 감시하기</h1>
<hr>
<div id="msg"></div>
<div id="map" style="width: 500px; height: 500px;"></div>
</body>
Javascript API 불러오기
- 카카오 로그인 후 회원가입 - 시작하기
- 애플리케이션 추가 후 앱 이름, 사업자명 작성(편한대로 적어도 됨)
- 추가된 애플리케이션을 들어가보면 다양한 앱 키가 발급되어 있음.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 본인의 앱 키 넣기"></script>
지도를 띄우는 코드 작성
<script>
navigator.geolocation.getCurrentPosition(function(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var acc = position.coords.accuracy;
var now = new Date(position.timestamp);
const msg = document.getElementById("msg");
msg.innerHTML = "<h2> 현재 latitude : " + lat.toPrecision(2) + "</h2>"
+ "<h2> 현재 longitude : " + lon.toPrecision(6) + "</h2>"
+ "<h2> 현재 accuracy : " + acc.toPrecision(4) + "(m)</h2>"
+ "<h2> 측정시간: " + now.toLocaleDateString() + " " + now.toLocaleTimeString() + "</h2>"
+ "<h2> 측정시간: " + position.timestamp + "</h2>"
var mapDiv = document.getElementById("map");
mapOption = {
center: new kakao.maps.LatLng(lat, lon),
level: 3 // 지도의 확대 레벨
}
var map = new kakao.maps.Map(mapDiv, mapOption);
//Marker
markerOption = {
position: new kakao.maps.LatLng(lat, lon)
};
var marker = new kakao.maps.Marker(markerOption);
marker.setMap(map);
});
</script>
🐣 해당 게시글은 입문 개발자가 요약/정리한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.
🐣 더 자세한 사용방법은 https://apis.map.kakao.com/web/guide/#ready 에서 확인할 수 있습니다.