오늘은 카카오맵을 사용하여 내가 원하는 위치를 보여주는 페이지를 만들어보았다.
오늘 매니저님의 깃허브에서 카카오맵_장고를 들고와서 코드를 작성해보았다.
먼저 django_kakaomap폴더를 만들어 open folder를 해준다.
그 후 python -m venv_django_kakaomap을 cmd창에 입력해준다.
pip install django //장고를 설치해준다
pip install -r requirements.txt
위의 두 명령어를 입력해준다
그 후 open folder->vsproj->django_kakaomap(내가만든파일)을 선택하여 폴더를 열어준다.
그리고 secret키를 작성해준다. //우리의 코드를 타인이 사용하지 못하도록 하기 위함.
{
"SECRET_KEY": "django-insecure-+*=ofk8zw264b24fy1c#a-+v=s7&jdi$&%-((xqe)zk&fmox"
}이 코드를 secrets.json파일로 작성해주고 django_kakaomap프로젝트안에 만들어준다.
static파일을 만들어주고(아무것도 안들어감)
templates/kakaomap_app 파일에 index.html파일에 카카오맵API를 사용하여 html파일을 작성해준다.
그렇게 하고
//이 코드는 html+js 파일 이다.
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>카카오맵 첫번째 랜딩페이지입니다</h1>
<div id="map" style="width:500px;height:400px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=890eb7fd7b55736becc3388f215623f7"></script>
<script>
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new kakao.maps.Map(container, options);
// 마커를 표시할 위치입니다
var position = new kakao.maps.LatLng(33.450701, 126.570667);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: position,
clickable: true // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
});
// 아래 코드는 위의 마커를 생성하는 코드에서 clickable: true 와 같이
// 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
// marker.setClickable(true);
// 마커를 지도에 표시합니다.
marker.setMap(map);
// 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다
var iwContent = '<div style="padding:5px;">Hello World!</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);
});
</script>
</body>
</html>코드를 모두 작성한 후
python manage.py makemigrations
python manage.py migrate
python manage.py runserver //이 명령어는 페이지를 띄워주는 명령어이다
명령어를 입력해준다.
python manage.py runserver
이 명령어는 페이지를 띄워주는 명령어이니 외워두도록 하자.
이 명령어를 입력하면 cmd창에 ex) http://127.0.0.1:8000/ 와 같은 주소가 뜨는데
ctrl+click 으로 페이지가 뜬다.
https://apis.map.kakao.com/web/sample/addMarkerClickEvent/ 이 링크를 참조하면
카카오맵 API에 대한 설명과 코드가 매우 구체적으로 친절하게 작성되어있다.
참고하자!
