반응형

# 카카오 api 사용방법

## 카카오 개발자 가입

  • 카카오 개발자 사이트 ( https://developers.kakao.com/ ) 접속 후 가입
  • 애플리케이션 추가 클릭 후 앱 이름, 회사 이름(개인의 경우 본인 이름 등 입력) 후 저장
  • 생성된 애플리케이션 클릭하여 api 키 획득
 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

## 카카오맵(지도/로컬)

### 지도 사용

  • 상단 제품 탭 클릭 후 지도/로컬 클릭 > 문서보기 클릭 후 하단 지도 SDK의  '해당 가이드' 클릭
  • 자바스크립트 개발 가이드 클릭 후 가이드에 맞게 진행
  • 또는 왼쪽 메뉴 중 wizard 클릭 후 기본적인 카카오맵 틀을 원하는 크기 등으로 지정 후 하단에 생성된 코드 복사하여 html 문서(or .jsp)에 입력하여 사용하면 된다. (사용 시 복사 한 코드 내에 위에서 애플리케이션 등록 후 발급받은 key를 추가하여 사용하면 된다.)
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>다음 지도 API</title>
</head>
<body>
	<div id="map" style="width:750px;height:350px;"></div>

	<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
	<script>
		var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
		    mapOption = {
		        center: new kakao.maps.LatLng(37.56682, 126.97865), // 지도의 중심좌표
		        level: 3, // 지도의 확대 레벨
		        mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
		    }; 

		// 지도를 생성한다 
		var map = new kakao.maps.Map(mapContainer, mapOption); 

	</script>
</body>
</html>

### 지도에 마커 추가

  • 지도에 마커 입력 하기 위해 구글 지도에서 원하는 지점 우클릭 후 '이곳이 궁금한가요' 클릭하면 해당 지역에 대한 좌표 정보를 얻을 수 있다.
  • 1~2개의 적은 마크 생성 코드 (아래)
// 마커 1개의 경우
// 지도에 마커를 생성하고 표시한다.
var marker = new kakao.maps.Marker({
  position: new kakao.maps.LatLng(36.511513, 127.258927), // 마커의 좌표
  map: map // 마커를 표시할 지도 객체
});

var iwContent = '<div style="padding:5px;">도램마을 8단지</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwPosition = new kakao.maps.LatLng(36.511513, 127.258927), //인포윈도우 표시 위치입니다
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

// 인포윈도우를 생성하고 지도에 표시합니다
var infowindow = new kakao.maps.InfoWindow({
  map: map, // 인포윈도우가 표시될 지도
  position : iwPosition, 
  content : iwContent,
  removable : iwRemoveable
});


// 마커2 이상의 경우
// 지도에 마커를 생성하고 표시한다.
var marker2 = new kakao.maps.Marker({
  position: new kakao.maps.LatLng(36.514043, 127.263682), // 마커의 좌표
  map: map // 마커를 표시할 지도 객체
});

var iwContent2 = '<div style="padding:5px;">도담 고등학교</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

// 인포윈도우를 생성하고 지도에 표시합니다
var infowindow2 = new kakao.maps.InfoWindow({
  map: map, // 인포윈도우가 표시될 지도
  position : iwPosition, 
  content : iwContent2,
  removable : iwRemoveable
});

// 마커 위에 인포윈도우를 표시
infowindow.open(map, marker2);
  • 다수의 마커 생성하는 코드(아래)
// 다중 마커 생성
var 데이터 = [
  [36.511513, 127.258927, '<div style="padding:5px;">도램마을 8단지</div>'],
  [36.514043, 127.263682, '<div style="padding:5px;">도담 고등학교</div>'],
  [36.514494, 127.254835, '<div style="padding:5px;">늘봄 초등학교</div>'],
  [36.511590, 127.262530, '<div style="padding:5px;">도담 초등학교</div>']
];

for (var i = 0; i < 데이터.length; i++ ) {
// 지도에 마커를 생성하고 표시한다.
var marker = new kakao.maps.Marker({
  position: new kakao.maps.LatLng(데이터[i][0], 데이터[i][1]), // 마커의 좌표
  map: map // 마커를 표시할 지도 객체
});

iwPosition = new kakao.maps.LatLng(데이터[i][0], 데이터[i][1]),
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

// 인포윈도우를 생성하고 지도에 표시합니다
var infowindow = new kakao.maps.InfoWindow({
  map: map, // 인포윈도우가 표시될 지도
  position : iwPosition, 
  content : 데이터[i][2],
  removable : iwRemoveable
});

// 마커 위에 인포윈도우를 표시
infowindow.open(map, marker);
}

 

### 마커에 내용 추가(인포 윈도우)

	var iwContent = '<div style="padding:5px;">Hello World!</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
    iwPosition = new kakao.maps.LatLng(36.511513, 127.258927), //인포윈도우 표시 위치입니다
    iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

	// 인포윈도우를 생성하고 지도에 표시합니다
	var infowindow = new kakao.maps.InfoWindow({
	    map: map, // 인포윈도우가 표시될 지도
	    position : iwPosition, 
	    content : iwContent,
	    removable : iwRemoveable
	});

	// 마커 위에 인포윈도우를 표시
	infowindow.open(map, marker);

 

### 다중 마커 숫자로 표기(마커 클러스터러)

// 키 입력 뒤에 라이브러리 입력(마커 클러스터러)
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키입력&libraries=clusterer"></script>

// 마커 클러스터러를 생성합니다 
var clusterer = new kakao.maps.MarkerClusterer({
  map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 
  averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 
  minLevel: 6 // 클러스터 할 최소 지도 레벨 
});
  
// 마커들을 저장할 변수 생성(마커 클러스터러 관련)
var markers = [];
for (var i = 0; i < 데이터.length; i++ ) {
    // 지도에 마커를 생성하고 표시한다.
    var marker = new kakao.maps.Marker({
      position: new kakao.maps.LatLng(데이터[i][0], 데이터[i][1]), // 마커의 좌표
      map: map // 마커를 표시할 지도 객체
  	});

    iwPosition = new kakao.maps.LatLng(데이터[i][0], 데이터[i][1]),
    iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

    // 인포윈도우를 생성하고 지도에 표시합니다
    var infowindow = new kakao.maps.InfoWindow({
      map: map, // 인포윈도우가 표시될 지도
      position : iwPosition, 
      content : 데이터[i][2],
      removable : iwRemoveable
    });

    // 마커 위에 인포윈도우를 표시
    infowindow.open(map, marker);

    // 생성된 마커를 마커 저장하는 변수에 넣음(마커 클러스터러 관련)
 	markers.push(marker);
}	

// 클러스터러에 마커들을 추가합니다(마커 클러스터러 관련)
clusterer.addMarkers(markers);
<div class="con" id="map" style="width:100%; height:100vh;"></div>

<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키입력&libraries=clusterer"></script>
<script>
	var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new kakao.maps.LatLng(36.49334, 127.27856), // 지도의 중심좌표
        level: 6, // 지도의 확대 레벨
        mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
    }; 
    
	// 지도를 생성한다 
	var map = new kakao.maps.Map(mapContainer, mapOption); 

	// 마커 클러스터러를 생성합니다 
    var clusterer = new kakao.maps.MarkerClusterer({
        map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 
        averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 
        minLevel: 6 // 클러스터 할 최소 지도 레벨 
    });
    
	// 지도 타입 변경 컨트롤을 생성한다
	var mapTypeControl = new kakao.maps.MapTypeControl();

	// 지도의 상단 우측에 지도 타입 변경 컨트롤을 추가한다
	map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);	

	// 지도에 확대 축소 컨트롤을 생성한다
	var zoomControl = new kakao.maps.ZoomControl();

	// 지도의 우측에 확대 축소 컨트롤을 추가한다
	map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

	// 다중 마커 생성
	var 데이터 = [
		[36.511513, 127.258927, '<div style="padding:5px;">도램마을 8단지</div>'],
		[36.514043, 127.263682, '<div style="padding:5px;">도담 고등학교</div>'],
		[36.514494, 127.254835, '<div style="padding:5px;">늘봄 초등학교</div>'],
		[36.511590, 127.262530, '<div style="padding:5px;">도담 초등학교</div>']
	];

	// 마커들을 저장할 변수 생성
	var markers = [];
	for (var i = 0; i < 데이터.length; i++ ) {
		// 지도에 마커를 생성하고 표시한다.
		var marker = new kakao.maps.Marker({
			position: new kakao.maps.LatLng(데이터[i][0], 데이터[i][1]), // 마커의 좌표
			map: map // 마커를 표시할 지도 객체
		});

		iwPosition = new kakao.maps.LatLng(데이터[i][0], 데이터[i][1]),
	    iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

		// 인포윈도우를 생성하고 지도에 표시합니다
		var infowindow = new kakao.maps.InfoWindow({
		    map: map, // 인포윈도우가 표시될 지도
		    position : iwPosition, 
		    content : 데이터[i][2],
		    removable : iwRemoveable
		});

		// 마커 위에 인포윈도우를 표시
		infowindow.open(map, marker);
		// 생성된 마커를 마커 저장하는 변수에 넣음
		markers.push(marker);
	}	

	// 클러스터러에 마커들을 추가합니다
    clusterer.addMarkers(markers);
</script>

 

### 다중 마커 클러스터러 진행 시 텍스트 겹치는 현상 방지

  • 마우스를 올려놓아야지만 인포 윈도우 표시될 수 있도록 변경
  • https://apis.map.kakao.com/web/sample/ 에서 제공해주는 기능 중 여러개 마커에 이벤트 등록하기1 클릭 후 코드 복사하여 사용
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다 
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
        
        
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
function makeOverListener(map, marker, infowindow) {
	return function() {
		infowindow.open(map, marker);
	};
}

// 인포윈도우를 닫는 클로저를 만드는 함수입니다 
function makeOutListener(infowindow) {
  return function() {
  	infowindow.close();
  };
}
<div class="con" id="map" style="width:100%; height:100vh;"></div>

<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키 값 입력&libraries=clusterer"></script>
<script>
	var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new kakao.maps.LatLng(36.49334, 127.27856), // 지도의 중심좌표
        level: 6, // 지도의 확대 레벨
        mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
    }; 
    
	// 지도를 생성한다 
	var map = new kakao.maps.Map(mapContainer, mapOption); 

	// 마커 클러스터러를 생성합니다 
    var clusterer = new kakao.maps.MarkerClusterer({
        map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 
        averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 
        minLevel: 6 // 클러스터 할 최소 지도 레벨 
    });
    
	// 지도 타입 변경 컨트롤을 생성한다
	var mapTypeControl = new kakao.maps.MapTypeControl();

	// 지도의 상단 우측에 지도 타입 변경 컨트롤을 추가한다
	map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);	

	// 지도에 확대 축소 컨트롤을 생성한다
	var zoomControl = new kakao.maps.ZoomControl();

	// 지도의 우측에 확대 축소 컨트롤을 추가한다
	map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

	// 다중 마커 생성
	var 데이터 = [
		[36.511513, 127.258927, '<div style="padding:5px;">도램마을 8단지</div>'],
		[36.514043, 127.263682, '<div style="padding:5px;">도담 고등학교</div>'],
		[36.514494, 127.254835, '<div style="padding:5px;">늘봄 초등학교</div>'],
		[36.511590, 127.262530, '<div style="padding:5px;">도담 초등학교</div>']
	];

	// 마커들을 저장할 변수 생성
	var markers = [];
	for (var i = 0; i < 데이터.length; i++ ) {
		// 지도에 마커를 생성하고 표시한다.
		var marker = new kakao.maps.Marker({
			position: new kakao.maps.LatLng(데이터[i][0], 데이터[i][1]), // 마커의 좌표
			map: map // 마커를 표시할 지도 객체
		});

		iwPosition = new kakao.maps.LatLng(데이터[i][0], 데이터[i][1]),
	    iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

		// 인포윈도우를 생성하고 지도에 표시합니다
		var infowindow = new kakao.maps.InfoWindow({
		    map: map, // 인포윈도우가 표시될 지도
		    position : iwPosition, 
		    content : 데이터[i][2],
		    removable : iwRemoveable
		});

		// 생성된 마커를 마커 저장하는 변수에 넣음
		markers.push(marker);

	 	// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
	    // 이벤트 리스너로는 클로저를 만들어 등록합니다 
	    // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
	    kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
	    kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
	}	

	// 클러스터러에 마커들을 추가합니다
    clusterer.addMarkers(markers);
	
 	// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
    function makeOverListener(map, marker, infowindow) {
        return function() {
            infowindow.open(map, marker);
        };
    }

    // 인포윈도우를 닫는 클로저를 만드는 함수입니다 
    function makeOutListener(infowindow) {
        return function() {
            infowindow.close();
        };
    }
</script>

 

반응형
저작자표시

'기타' 카테고리의 다른 글

깃허브(github)에 이미지 올리기  (0) 2020.08.25
엑셀 데이터 MySQL에 등록하기  (0) 2020.08.21
챗봇이란?  (0) 2020.08.17
프레임워크, 프로그래밍 언어, 라이브러리  (0) 2020.08.17
사이트 방문자 수 측정하기  (0) 2020.08.15

+ Recent posts

티스토리툴바