끊임없이 부단히

[Kakao map] Javascript API 지도 불러오기 본문

인공지능

[Kakao map] Javascript API 지도 불러오기

허구의 2022. 12. 11. 20:55

Kakao map API

이번 포스팅에서는 카카오 지도에서 제공하는 지도를 그리는 Javascipt API에 대해 소개합니다.

학습에 지도 데이터가 필요하여 찾아보던 중 카카오 지도 API가 설명도 잘되어 있어 사용하게 되었습니다.

자세한 내용은 아래 주소에서 확인할 수 있습니다.

 

https://apis.map.kakao.com/web/guide/

 

 

API 키 발급 및 웹 서버 기동

해당 API를 사용하기 위해서는 우선 API 키를 발급받아야 합니다.

키를 발급받는 방법은 위 사이트('준비하기')에 자세히 소개되어 있어서 따로 언급하진 않겠습니다.

만약 발급을 받으셨다면 https://developers.kakao.com 에서 로그인 후 '내 애플리케이션'에 들어가시면 발급받으신 키를 확인할 수 있습니다.

 

이제 발급받은 키를 이용하여 간단하게 지도를 만들어 보겠습니다.

공식 홈페이지에 많은 기능들이 구현된 예들이 있으니 참고하시면 좋을 것 같습니다.

아래 'src' 마지막 'YOURAPPKEY' 부분에 발급받으신 키를 입력하시면 됩니다.

 

크기는 가로세로 500, 400으로 하였으며, 위경도 36, 127를 중심으로 하였습니다.

지도 종류(kakao.maps.MapTypeId)는 ROADMAP, SKYVIEW, HYBRID, ROADVIEW 등이 있으며 저는 SKYVIEW로 하였습니다.

마지막으로 'level'은 zoom level을 의미합니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Kakao 지도 시작하기</title>
</head>
<body>
	<div id="map" style="width:500px;height:400px;"></div>
	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=YOURAPPKEY"></script>
	<script>
		var container = document.getElementById('map');
		var options = {
			center: new kakao.maps.LatLng(36, 127),
			mapTypeId: kakao.maps.MapTypeId.SKYVIEW,
			level: 4
		};

		var map = new kakao.maps.Map(container, options);
	</script>
</body>
</html>

 

본 코드를 실행하기 위해서 파이썬을 이용하여 웹서버를 구동합니다.

코드를 'index.html'로 저장하고 해당 폴더에서 PowerShell을 실행합니다.

(참고로 'Shift'키를 누른 상태에서 우클릭을 하시면 메뉴에 '여기에 PowerShell 창 열기'가 있습니다!)

그리고 아래와 같이 커맨드를 작성합니다.

80은 포트 예 입니다. 원하는 포트를 기입하시면 됩니다.

python -m http.server 80

 

그럼 웹을 열어서 'localhost:80'이라고 주소창에 치시면 코드로 작성한 지도가 나타납니다.

 

 

 

감사합니다!

'인공지능' 카테고리의 다른 글

[mmrotate] 나만의 데이터 셋으로 rotated RetinaNet 학습하기  (2) 2022.10.14
[mmrotate] mmrotate로 rotated RetinaNet 학습하기  (0) 2022.10.13
[mmrotate] mmrotate로 rotated RetinaNet 돌려보기  (4) 2022.10.12
[mmrotate] open-mmlab의 mmrotate docker로 실행하기  (0) 2022.07.26
[Dataset] PyTorch의 Dataset 활용하기  (0) 2022.07.22
'인공지능' Related Articles more
Comments