2023.06.08 Today I Learned(TIL)
"카카오맵 마커 여러 개 표시" 만들기
1. 'kakaomap_1st.html' 파일 생성하기
{% 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>
let json_data = JSON.parse('{{ json_data|safe }}');
console.log(json_data.map_data[0].place)
console.log(json_data.map_data[1].coord.x)
console.log(json_data.map_data[1].coord.y)
</script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(36.601659208879646, 127.29777601594054), // 지도의 중심좌표
level: 4 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커를 표시할 위치와 title 객체 배열입니다
var positions = [
{
content: json_data.map_data[0].place,
latlng: new
kakao.maps.LatLng(json_data.map_data[0].coord.x,
json_data.map_data[0].coord.y)
},
{
content: json_data.map_data[1].place,
latlng: new kakao.maps.LatLng(json_data.map_data[1].coord.x, json_data.map_data[1].coord.y)
},
{
content: json_data.map_data[2].place,
latlng: new kakao.maps.LatLng(json_data.map_data[2].coord.x, json_data.map_data[2].coord.y)
}
];
for (var i = 0; i < positions.length; i ++) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng // 마커의 위치
});
// 마커에 표시할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: positions[i].content // 인포윈도우에 표시할 내용
});
// 마커에 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();
};
}
</script>
</body>
</html>2. 'views.py'에 함수 추가하기
def kakaomap_1st(request):
data = {
"map_data" : {
"0":{
"place": "조치원역",
"coord": {
"x" : 36.601659208879646,
"y" : 127.29777601594054
}
},
"1":{
"place": "그대랑 닭갈비",
"coord": {
"x" : 36.602816,
"y" : 127.298170
}
},
"2":{
"place": "수구레국밥",
"coord": {
"x" : 36.600082,
"y" : 127.297920
}
}
},
"map_key": "890eb7fd7b55736becc3388f215623f7"
}
json_data = json.dumps(data)
return render(request, 'kakaomap_app/kakaomap_1st.html',{"json_data": json_data})3. 'urls.py'에 코드 추가하기
from django.contrib import admin
from django.urls import path
from kakaomap_app import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index, name = 'index'),
// 아래 코드 추가하기
path('kakaomap_1st/', views.kakaomap_1st, name = 'kakaomap_1st'),
]위의 과정들을 모두 거치면 아래의 화면이 생긴다 !!!
마무리
10주차 활동을 마지막으로 1학기 멋사 수업이 끝났다. 오예 (❁´◡`❁)
중간에 코로나 때문에 못 나왔었는데, 진도를 따라갈 수 있어서 다행이었다. 마지막에 배운 Django 부분은 조금 더 공부해야 될 것 같지만, 이번 학기에 배운 HTML, CSS, JavaScript에 대해서 잘 알아갈 수 있는 시간을 가질 수 있어서 좋았다.
