[작성일: 2023. 03. 04]

 

목차

     

    KaKao 개발자 사이트 등록하기

    1.  카카오 개발자 사이트(http://developer.kakao.com)접속하기
    2. 개발자 등록 및 앱 생성
    3. 웹 플랫폼 추가
      • 앱 선택 - [플랫폼] - [Web 플랫폼 등록] - 사이트 도메인 등록
    4. 사이트 도메인 등록
      • [웹] 플랫폼 선택 후 [사이트 도메인] 등록 (예: http://127.0.0.1:5500)
    5. 페이지 상단의 [Javascript 키]를 지도 API의 appkey로 사용
    6. 앱 실행

     

     

    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 에서 확인할 수 있습니다.

     

    저작자표시 비영리 변경금지

    티스토리툴바