반응형
# 카카오 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);
}
### 마커에 내용 추가(인포 윈도우)
- https://apis.map.kakao.com/web/sample/ 에서 제공해주는 기능 중 마커 인포 윈도우 생성하기 클릭 후 코드 복사하여 사용
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);
### 다중 마커 숫자로 표기(마커 클러스터러)
- https://apis.map.kakao.com/web/sample/ 에서 제공해주는 기능 중 마커 클러스터러 클릭 후 코드 복사하여 사용
// 키 입력 뒤에 라이브러리 입력(마커 클러스터러)
<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 |
