🔻API 사용 준비
- kakao developers 에서 내 애플리케이션 생성
- 사이드 메뉴 > 앱 설정 > 플랫폼 > Web 사이트 도메인 설정
- 일반적으로 테스트는 로컬에서 하니 https://127.0.0.1 로 설정해주면 된다.
- 사이드 메뉴 > 제품 설정 > 카카오맵
- 활성화 설정 ON : 한참을 왜 지도가 안 나오지 헤매다가 이 설정을 활성화해야 한다는 사실을 알게 되었다;;
4. 사이드 메뉴 > 앱 설정 > 앱 키
- 'JavaScript 키' 를 복사해둔다.
🔸script
- kakao maps API 라이브러리 가이드를 참고하면 내가 불러와야할 라이브러리를 알 수 있다. 나는 그중에서 Places라는 검색 관련 기능을 사용해야 하므로 services 라이브러리를 추가했다.
<!-- services 라이브러리 불러오기 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY&libraries=services&autoload=false"></script>- autoload=false : Kakao Maps API가 동적으로 로드될 수 있도록 설정한다.
- 이 옵션은 kakao.maps.load() 구문과 함께 사용해야 한다. 이 함수는 내부에서 비동기식으로 라이브러리를 가져오고, 라이브러리 로드가 끝나면 콜백 함수 안의 코드를 실행한다.
- 처음에 많이 헤매서 다른 블로그나 카카오 개발자 커뮤니티도 다 참고했는데 계속해서 무한 로딩에 빠지는 어려움을 겪었다. 알고보니 내가 작성한 kakao.maps.load()의 콜백함수로 실행한 커스텀 함수인 initMap()이 반환값이 없어 콜백함수가 끝나질 않았던 것이었다;;
그런데 콜백함수가 반환값이 없다고 종료되진 않는데, 정확한 문제와 해결방법은 모르겠다. 어쨋든 initMap() 함수의 끝에 return undefined; 추가했더니 갑자기 모든 문제가 해결됐다;;
🔻Code
🔸index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI-Lab-13 MLOps-2 GPTeam5</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<!-- services 라이브러리 불러오기 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR_APP_KEY&libraries=services&autoload=false"></script>
<script type="text/javascript" src="js/script.js"></script>
<script>
// DOM 로드 후 실행
document.addEventListener('DOMContentLoaded', function() {
kakao.maps.load(() => { // kakao maps api script가 모두 로드되면 실행되는 콜백함수
initMap();
});
});
</script>
</head>
<body>
<div id="map"></div>
<div id="menu_wrap" class="bg_white">
<div class="option">
<div>
<!-- <form onsubmit="searchPlaces(); return false;">
키워드 : <input type="text" value="용산역" id="keyword" size="15">
<button type="submit">검색하기</button>
</form> -->
<form id="searchForm">
키워드 : <input type="text" value="용산역" id="keyword" size="15">
<button type="button" onclick="searchPlaces()">검색하기</button>
</form>
</div>
</div>
<hr>
<ul id="placesList"></ul>
<div id="pagination"></div>
</div>
</body>
</html>
🔸script.js
아래의 코드들은 kakao maps api 문서의 샘플들을 참고하여 작성했습니다.
활용한 샘플들은 주석으로 첨부했습니다.
전체 script.js와 index.html, app.py는 깃헙 링크 참고하시길 바랍니다~
// 모든 함수에서 접근할 수 있도록 변수 선언
let map;
let markers;
let ps;
let infowindow;
let activeOverlay;
function initMap(lat=37.555946,lng=126.972317) {
// #지도 생성하기 : https://apis.map.kakao.com/web/sample/basicMap/
const mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(lat, lng), // 지도의 중심좌표
level: 5 // 지도의 확대 레벨
};
// 지도를 생성합니다
map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 담을 div 태그에 지도객체를 추가
// #키워드로 장소검색하고 목록으로 표출하기 : https://apis.map.kakao.com/web/sample/keywordList/
// 장소 검색 객체를 생성합니다
ps = new kakao.maps.services.Places();
// 검색 결과 목록이나 마커를 클릭했을 때 장소명을 표출할 인포윈도우를 생성합니다
infowindow = new kakao.maps.InfoWindow({zIndex:1});
markers = [];
activeOverlay = null; // 현재 열려있는 오버레이를 추적
window.addEventListener('resize', function() {
const mapElement = document.getElementById("map");
mapElement.style.width = `${window.innerWidth}px`;
mapElement.style.height = `${window.innerHeight}px`;
map.relayout();
});
return undefined; //신기하게도 반환문이 없으면 로딩 지옥에 빠집니다.
}
// >>>>>>>>> Search Engine >>>>>>>>>
// #키워드로 장소검색하고 목록으로 표출하기 : https://apis.map.kakao.com/web/sample/keywordList/
// 키워드 검색을 요청하는 함수입니다
function searchPlaces() {
var keyword = document.getElementById('keyword').value;
console.log(`search keyword ${keyword}`)
if (!keyword.replace(/^\s+|\s+$/g, '')) {
alert('키워드를 입력해주세요!');
return false;
}
// 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
ps.keywordSearch(keyword, placesSearchCB);
}
// ...
// <<<<<<<<< Search Engine <<<<<<<<<
// >>>>>>>>> Marker >>>>>>>>>
// #여러개 마커 제어하기 : https://apis.map.kakao.com/web/sample/multipleMarkerControl/
// #닫기가 가능한 커스텀 오버레이 : https://apis.map.kakao.com/web/sample/removableCustomOverlay/
function drawMarker(lat,lng,road_address_name) {
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(lat, lng);
// 마커를 생성합니다
addMarker(markerPosition, road_address_name);
}
// ...
// <<<<<<<<< Marker <<<<<<<<<
'컴퓨터 > 프로그래밍' 카테고리의 다른 글
| [PyTorch] torch.compile을 통한 실행 속도 향상 (3) | 2024.09.07 |
|---|---|
| Kaggle Notebook 200% 활용하고 잠 편하게 자기!!! (0) | 2024.02.26 |
| [Web Scraping] Netflix news scraping with Selenium4 & newspaper library (3) | 2024.02.06 |
| [Web Scraping] Netflix news scraping with Selenium4 (0) | 2024.01.30 |
