index.ejs
7.83 KB
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>코로나 백신 의료기관 조회</title>
<%if(typeof(info)!="undefined"){%>
<script>
try {
if('<%=info%>'.length==0) throw new error();
} catch (error) {
alert("해당 지역 주변에 가능한 의료기관이 존재하지 않습니다.");
location.href='/';
}
</script>
<% }%>
</head>
<body style="background-color: ivory;">
<center>
<h1>
<span style="font-family:verdana;color:black">COVID-19 </span>
<span style="font-family:verdana; color:blue; border:black"> 예방접종 위탁 의료기관 조회</span>
<!-- <span style="font-family:verdana; color:black"> </span> -->
</h1>
<hr>
<form action="/" method="post">
<p>
<div style="float:right; width:40%; margin-bottom:10px; margin-right: 5px;">
<input type="text" style="height:25px;font-size:15px;" name="region" placeholder="지역을 입력하세요" size="20"/>
<button type="submit" style="height:30px;font-size:15px;" class="btn btn-info" >검색</button>
</div>
</p>
</form>
</center>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
<% if(typeof(info) != "undefined"){ %>
<div id="map" style="width:65%;height:550px;float:left; margin-left: 2%; border-radius: 2%; border:1px solid black" ></div>
<div style="overflow:scroll; width:25%; height:550px;float:left; margin-left:2%; border:1px solid black;">
<ol id="placelist">
<% for(i=0; i<info.length; i++){%>
<li class="item" style="font-size: 13px; ">
<div class="info" onmouseover="displayinfowindow('<%=info[i].orgZipaddr%>', '<%=info[i].orgnm%>', true)" onmouseout="displayinfowindow('<%=info[i].orgZipaddr%>', '<%=info[i].orgnm%>', false)">
<span><strong><%= info[i].orgnm%></strong></span>
<%if(info[i].hldyYn=='N') {%>
<span style="color:red"> (당일 휴무) </span>
<%}else { %>
<span style="color:green"> (정상운영) </span>
<%}%>
<br>
<% if(timeList[i][4]!="" && timeList[i][5]!="" && timeList[i][6]!="" && timeList[i][7]!=""){%>
<span>진료시간 : <%=timeList[i][4]%>:<%=timeList[i][5]%>~<%=timeList[i][6]%>:<%=timeList[i][7] %></span><br>
<%}%>
<% if(timeList[i][0]!="" && timeList[i][1]!="" && timeList[i][2]!="" && timeList[i][3]!=""){%>
<span>점심시간 : <%=timeList[i][0]%>:<%=timeList[i][1]%>~<%=timeList[i][2]%>:<%=timeList[i][3] %></span><br>
<%}%>
<span style="color:gray" class="jibun gray; font-style: oblique;" ><%=info[i].orgZipaddr%></span><br>
<span style="color:blue" class="tel"><%=info[i].orgTlno%></span><br>
</div>
<hr>
</li>
<%} %>
</ol>
</div>
<%}%>
<% if(typeof(result) != "undefined"){ %>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
var listData = "<%= result %>";
listData = listData.replaceAll('"','\"');
listData = JSON.parse(listData);
var count = 0;
//입력되는 배열명이 listData로 들어오면 됨.
listData.forEach(function(addr, index) {
var tmpaddr = ((addr.orgZipaddr).split(','))[0];
console.log(tmpaddr);
geocoder.addressSearch(tmpaddr, function(result, status) {
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
count += 1;
var marker = new kakao.maps.Marker({
position: coords,
clickable: true
});
// 마커를 지도에 표시합니다.
marker.setMap(map);
var num=1;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="border-radius:3%; width:200px;text-align:center;padding:3px 0; font-size:12px">' + addr.orgnm + '</div>',
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
if(count == 1){
map.setCenter(coords);
}
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
//console.log(listData.length);
}
});
});
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
var infowindows = [];
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
var infowindows = [];
function displayinfowindow(address,name,flag){
if(flag){
var tmpaddr = (address.split(','))[0];
geocoder.addressSearch(tmpaddr, function(result, status) {
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
map.setCenter(coords);//인포윈도우 생성 마커로 이동
var marker = new kakao.maps.Marker({
position: coords,
clickable: true
});
infowindow = new kakao.maps.InfoWindow({
content: '<div style="border-radius:3%; width:200px;text-align:center;padding:3px 0; font-size:12px">' + name + '</div>',
});
infowindows.push(infowindow);
infowindow.open(map, marker);
}
});
}
else{
for(var i = 0; i<infowindows.length;i++)
infowindows[i].close();
infowindows = [];
}
}
</script>
<% }else{ %>
<div id="map" style="width:90%;height:550px;float:left; margin-left: 2%; border-radius: 2%; border:1px solid black" ></div>
<script>//입력 값이 없을 때 기본 지도 띄움
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
</script>
<% } %>
</body>
</html>