-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcovid2.html
105 lines (95 loc) · 7.93 KB
/
covid2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>코로나 맵(용인)</title>
</head>
<body>
<div id="map" style="width:100%;height:100vh;"></div>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=12aee64aa6ba805b8b79589b7e6060cd&libraries=clusterer"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.274382, 127.137165), // 지도의 중심좌표
level: 13, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10 // 클러스터 할 최소 지도 레벨
});
var 데이터 = [
//1번 확진자
[37.326684, 127.091420, '<div style="padding: 5px">1번 확진자 08:00~08:30 자택에서 회사로 출근 수지구풍덕천동 출발 / 2/23 16:00 경기도 의료원 수원병원으로 격리</div>'],
[37.314068, 127.113700, '<div style="padding: 5px">1번 확진자 기흥구 보정동 한국153유통 도착(아버지 자가용 이용)</div>'],
[37.314397, 127.088933, '<div style="padding: 5px">1번 확진자 12:00~13:00 회사동료와 점심식사 수지구상현동 소재 다경식당</div>'],
//2번 확진자
[37.358907, 127.039448, '<div style="padding: 5px"> 2, 3(2번의 배우자) 번 확진자 2월 22일(토) 11:20 처가(동천동 소재)에 들러 아이맡김(자차로 이동)</div>'],
[37.256132, 127.077682, '<div style="padding: 5px"> 2, 3번 확진자 2월 22일(토) 11:20 ~ 12:30 인테리어 상담을 위해 자차로 오성인테리어(풍덕천동 소재) 방문</div>'],
[37.358907, 127.039448, '<div style="padding: 5px"> 2, 3번 확진자 2월 22일(토) 18:00 이후 처가(동천동 소재)에서 처가 식구들과 함께 저녁식사</div>'],
[37.332554, 127.112033, '<div style="padding: 5px"> 2, 3번 확진자 2월 22일(토) 20:00 자택(수지구 죽전동 소재)도착</div>'],
[37.332554, 127.112033, '<div style="padding: 5px"> 2, 3번 확진자 2월 23일(일) 자택 거취</div>'],
[37.338833, 127.109376, '<div style="padding: 5px"> 2, 3번 확진자 2월24일(월) 11:11 열린이비인후과 방문(구미동 소재/ 자차로 이동)</div>'],
[37.338948, 127.109247, '<div style="padding: 5px"> 2, 3번 확진자 2월24일(월) 11:25 오렌지약국 방문(구미동 소재) 후 자택 이동(자차로 이동)</div>'],
[37.331122, 127.111979, '<div style="padding: 5px"> 2, 3번 확진자 2월24일(월) 17:20 이마트에브리데이(죽전동 소재/자차로 자택 이동 후 거취)</div>'],
[37.320919, 127.113895, '<div style="padding: 5px"> 2, 3번 확진자 2월25일(화) 12:14 김재한내과(기흥구 소재/ 자차로 이동)</div>'],
[37.319426, 127.118048, '<div style="padding: 5px"> 2, 3번 확진자 2월25일(화) 12:18 주연약국(기흥구 소재)</div>'],
[37.319426, 127.118048, '<div style="padding: 5px"> 2, 3번 확진자 2월25일(화) 12:34 ~ 13:20 수지구 보건소 방문 해 검체 채취(자차로 자택 이동 후 거취)</div>'],
[37.754919, 126.779774, '<div style="padding: 5px"> 2, 3번 확진자 2월26일(수) 13:15~15:00 병상배정 이후 병원이송(경기 의료원 파주병원)</div>'],
//4번 확진자
[37.296414, 127.115682, '<div style="padding: 5px"> 4, 6(4번의 배우자) 번 확진자 2.22(토) 10:32 GS25 구성 효성점(도보이동) : 접촉자 1인(계산원 A)</div>'],
[37.303002, 127.106318, '<div style="padding: 5px"> 4, 6 번 확진자 2.22(토) 14:38 마트킹 구성점(자차이동) : 접촉자 1인(계산원)</div>'],
[37.294989, 127.115938, '<div style="padding: 5px"> 4, 6 번 확진자 2.22(토) 18:28 롯데리아 구성점(자차이동) : 접촉자 없음</div>'],
[37.306944, 127.105467, '<div style="padding: 5px"> 4, 6 번 확진자 2.22(토) 22:13 트레이더스(자차이동) : 접촉자 없음</div>'],
[37.296414, 127.115682, '<div style="padding: 5px"> 4, 6 번 확진자 2.23(일) 18:28(시간 정정) GS25 구성 효성점(도보이동) : 접촉자 없음</div>'],
[37.293682, 127.119914, '<div style="padding: 5px"> 4, 6 번 확진자 2.25(화) 10:10 우리들청소년과 : 접촉자 1인(진료의사)</div>'],
[37.293772, 127.119888, '<div style="padding: 5px"> 4, 6 번 확진자 2.25(화) 10:16 셀메드주오약국 : 접촉자 없음(배우자만 방문)</div>'],
[37.322470, 127.097701, '<div style="padding: 5px"> 4, 6 번 확진자 2.26(수) 11:00 수지구보건소(자차이동)</div>'],
[37.272617, 127.106750, '<div style="padding: 5px"> 4, 6 번 확진자 2.26(수) 11:38 기흥구보건소(자차이동) : 접촉자 없음</div>'],
[37.296414, 127.115682, '<div style="padding: 5px"> 4, 6 번 확진자 2.26(수) 23:54 GS25 구성 효성점 : 접촉자 1인(계산원 B)</div>'],
[37.754847, 126.779729, '<div style="padding: 5px"> 4 번 확진자 2.27(목) 14:00 경기도의료원 파주병원 이송</div>'],
//5번 확진자
[37.266174, 127.105993, '<div style="padding: 5px"> 2.24.(월) 19:40~19:59 홈플러스익스프레스 상갈점 (도보) : 접촉자 없음 </div>'],
[37.273279, 127.108138, '<div style="padding: 5px"> 2.24.(월) 20:20 신갈동 자택 도착(도보)</div>'],
[37.272322, 127.108267, '<div style="padding: 5px"> 2.25.(화) 16:30~17:05 롯데마트 신갈점 (도보) : 접촉자 없음</div>'],
[37.272668, 127.106739, '<div style="padding: 5px"> 2.26.(수) 21:23 기흥구 보건소 선별진료소 방문 검사 : 접촉자 없음</div>'],
[37.291823, 126.996295, '<div style="padding: 5px"> 2.27.(목) 14:30 : 경기도의료원 수원병원 이송</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 // 마커를 표시할 지도 객체
});
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: 데이터[i][2]
});
markers.push(marker);
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
// 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
infowindow.open(map, marker);
}
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
</script>
</body>
</html>