김서연 / Corona_Vaccination_Medical_Institution

Go to a project
Toggle navigation Toggle navigation pinning
김서연
4504eed3 2 parents 9013e959 d086c5fa

Merge branch 'integrated#3_ksy' into 'master' 

Integrated#3 ksy



See merge request !16
Inline Side-by-side
Showing 6 changed files with 80 additions and 310 deletions
1 +{
2 + // Use IntelliSense to learn about possible attributes.
3 + // Hover to view descriptions of existing attributes.
4 + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5 + "version": "0.2.0",
6 + "configurations": [
7 + {
8 + "type": "pwa-chrome",
9 + "request": "launch",
10 + "name": "Open index.ejs",
11 + "file": "c:\\Users\\KSY\\Desktop\\4-1\\OpenSource\\Project\\views\\index.ejs"
12 + }
13 + ]
14 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -78,10 +78,9 @@ app.post('/',function(req,res,next){ ...@@ -78,10 +78,9 @@ app.post('/',function(req,res,next){
78 eachtime.push(''); 78 eachtime.push('');
79 else 79 else
80 eachtime.push(searchList[i].endTm.substr(2,2)); 80 eachtime.push(searchList[i].endTm.substr(2,2));
81 - if(eachtime == null) 81 +
82 - eachtime.push(''); 82 + timeList.push(eachtime);
83 - else 83 +
84 - timeList.push(eachtime);
85 } 84 }
86 res.render('index', {result:JSON.stringify(searchList),info:searchList ,timeList:timeList}); 85 res.render('index', {result:JSON.stringify(searchList),info:searchList ,timeList:timeList});
87 86
......
1 -<!DOCTYPE html>
2 -<html>
3 -<head>
4 - <meta charset="utf-8">
5 - <title>여러개 마커에 이벤트 등록하기1</title>
6 -
7 -</head>
8 -<body>
9 - <h1>COVID-19 의료기관 검색하기</h1>
10 - <form action="/" method="post">
11 - <p>
12 - <input type="text" name="region" placeholder="서울시"/>
13 - <input type="submit"/>
14 - </p>
15 - </form>
16 - <div id="map" style="width:700px;height:400px;"></div>
17 -
18 - <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988"></script>
19 -
20 -
21 -<script>
22 -var mapContainer = document.getElementById('map'), // 지도를 표시할 div
23 - mapOption = {
24 - center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
25 - level: 3 // 지도의 확대 레벨
26 - };
27 -
28 -var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
29 -
30 -
31 -
32 -// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
33 -var zoomControl = new kakao.maps.ZoomControl();
34 -map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
35 -
36 -var listData = "<%= result %>";
37 -console.log(listData[1]);
38 -//입력되는 배열명이 listData로 들어오면 됨.
39 -listData.forEach(function(addr, index) {
40 - var tmpaddr = addr[0].split(',');
41 - console.log(tmpaddr);
42 - geocoder.addressSearch(tmpaddr[0], function(result, status) {
43 - if (status === daum.maps.services.Status.OK) {
44 - var coords = new daum.maps.LatLng(result[0].y, result[0].x);
45 -
46 - var marker = new daum.maps.Marker({
47 - position: coords,
48 - clickable: true});
49 -
50 - // 마커를 지도에 표시합니다.
51 - marker.setMap(map);
52 -
53 - // 인포윈도우를 생성합니다
54 - var infowindow = new kakao.maps.InfoWindow({
55 - content: '<div style="width:150px;text-align:center;padding:6px 0;">' + addr[1] + '</div>',
56 - removable : true
57 - });
58 - // 마커에 클릭이벤트를 등록합니다
59 - kakao.maps.event.addListener(marker, 'click', function() {
60 - // 마커 위에 인포윈도우를 표시합니다
61 - infowindow.open(map, marker);
62 - });
63 - }
64 - });
65 -
66 -});
67 -
68 -
69 -
70 -
71 -// for (var i = 0; i < positions.length; i ++) {
72 -// // 마커를 생성합니다
73 -// var marker = new kakao.maps.Marker({
74 -// map: map, // 마커를 표시할 지도
75 -// position: positions[i].latlng // 마커의 위치
76 -// });
77 -
78 -// // 마커에 표시할 인포윈도우를 생성합니다
79 -// var infowindow = new kakao.maps.InfoWindow({
80 -// content: positions[i].content // 인포윈도우에 표시할 내용
81 -// });
82 -
83 -// // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
84 -// // 이벤트 리스너로는 클로저를 만들어 등록합니다
85 -// // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
86 -// kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
87 -// kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
88 -// }
89 -
90 -// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
91 -function makeOverListener(map, marker, infowindow) {
92 - return function() {
93 - infowindow.open(map, marker);
94 - };
95 -}
96 -
97 -// 인포윈도우를 닫는 클로저를 만드는 함수입니다
98 -function makeOutListener(infowindow) {
99 - return function() {
100 - infowindow.close();
101 - };
102 -}
103 -</script>
104 -
105 - <script>
106 - var mapContainer = document.getElementById('map'), // 지도를 표시할 div
107 - mapOption = {
108 - center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
109 - level: 3 // 지도의 확대 레벨
110 - };
111 -
112 - var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
113 -
114 - // 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
115 - var positions = [
116 - {
117 - content: '<div>카카오</div>',
118 - latlng: new kakao.maps.LatLng(33.450705, 126.570677)
119 - },
120 - {
121 - content: '<div>생태연못</div>',
122 - latlng: new kakao.maps.LatLng(33.450936, 126.569477)
123 - },
124 - {
125 - content: '<div>텃밭</div>',
126 - latlng: new kakao.maps.LatLng(33.450879, 126.569940)
127 - },
128 - {
129 - content: '<div>근린공원</div>',
130 - latlng: new kakao.maps.LatLng(33.451393, 126.570738)
131 - }
132 - ];
133 -
134 - for (var i = 0; i < positions.length; i ++) {
135 - // 마커를 생성합니다
136 - var marker = new kakao.maps.Marker({
137 - map: map, // 마커를 표시할 지도
138 - position: positions[i].latlng // 마커의 위치
139 - });
140 -
141 - // 마커에 표시할 인포윈도우를 생성합니다
142 - var infowindow = new kakao.maps.InfoWindow({
143 - content: positions[i].content // 인포윈도우에 표시할 내용
144 - });
145 -
146 - // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
147 - // 이벤트 리스너로는 클로저를 만들어 등록합니다
148 - // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
149 - kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
150 - kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
151 - }
152 -
153 - // 인포윈도우를 표시하는 클로저를 만드는 함수입니다
154 - function makeOverListener(map, marker, infowindow) {
155 - return function() {
156 - infowindow.open(map, marker);
157 - };
158 - }
159 -
160 - // 인포윈도우를 닫는 클로저를 만드는 함수입니다
161 - function makeOutListener(infowindow) {
162 - return function() {
163 - infowindow.close();
164 - };
165 - }
166 - </script>
167 -</body>
168 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html>
3 -<head>
4 - <meta charset="utf-8">
5 - <title>백신 접종 가능기관</title>
6 -
7 -</head>
8 -<body>
9 -
10 -
11 - <h1>COVID-19 의료기관 검색하기</h1>
12 - <form action="/" method="post">
13 - <p>
14 - <input type="text" name="region" placeholder="서울시"/>
15 - <input type="submit"/>
16 - </p>
17 - </form>
18 -
19 - <div id="map" style="width: 700px;height:400px;"></div>
20 - <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
21 - <script>
22 - var mapContainer = document.getElementById('map'), // 지도를 표시할 div
23 - mapOption = {
24 - center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
25 - level: 3 // 지도의 확대 레벨
26 - };
27 -
28 - // 지도를 생성합니다
29 - var map = new kakao.maps.Map(mapContainer, mapOption);
30 -
31 - // 주소-좌표 변환 객체를 생성합니다
32 - var geocoder = new kakao.maps.services.Geocoder();
33 -
34 - // 주소로 좌표를 검색합니다
35 - geocoder.addressSearch('서울특별시 강동구 올림픽로 779', function(result, status) {
36 -
37 - // 정상적으로 검색이 완료됐으면
38 - if (status === kakao.maps.services.Status.OK) {
39 -
40 - var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
41 -
42 - // 결과값으로 받은 위치를 마커로 표시합니다
43 - var marker = new kakao.maps.Marker({
44 - map: map,
45 - position: coords
46 - });
47 -
48 - // 인포윈도우로 장소에 대한 설명을 표시합니다
49 - var infowindow = new kakao.maps.InfoWindow({
50 - content: '<div style="width:150px;text-align:center;padding:6px 0;">기관명</div>'
51 - });
52 - infowindow.open(map, marker);
53 -
54 - // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
55 - map.setCenter(coords);
56 - }
57 - });
58 - geocoder.addressSearch('서울특별시 동대문구 회기로 173', function(result, status) {
59 -
60 - // 정상적으로 검색이 완료됐으면
61 - if (status === kakao.maps.services.Status.OK) {
62 -
63 - var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
64 -
65 - // 결과값으로 받은 위치를 마커로 표시합니다
66 - var marker = new kakao.maps.Marker({
67 - map: map,
68 - position: coords
69 - });
70 -
71 - // 인포윈도우로 장소에 대한 설명을 표시합니다
72 - var infowindow = new kakao.maps.InfoWindow({
73 - content: '<div style="width:150px;text-align:center;padding:6px 0;">기관명</div>'
74 - });
75 - infowindow.open(map, marker);
76 -
77 - // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
78 - map.setCenter(coords);
79 - }
80 - });
81 - </script>
82 -</body>
83 -</html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,10 +2,18 @@ ...@@ -2,10 +2,18 @@
2 <html> 2 <html>
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 - <title>여러개 마커에 이벤트 등록하기1</title> 5 + <title>코로나 백신 의료기관 조회</title>
6 -
7 <!-- <link rel="stylesheet" href="/css/master.css"> --> 6 <!-- <link rel="stylesheet" href="/css/master.css"> -->
8 - 7 + <%if(typeof(info)!="undefined"){%>
8 + <script>
9 + try {
10 + if('<%=info%>'.length==0) throw new error();
11 + } catch (error) {
12 + alert("해당 지역 주변에 가능한 의료기관이 존재하지 않습니다.");
13 + location.href='/';
14 + }
15 + </script>
16 + <% }%>
9 </head> 17 </head>
10 <body> 18 <body>
11 <center> 19 <center>
...@@ -21,25 +29,38 @@ ...@@ -21,25 +29,38 @@
21 </p> 29 </p>
22 </form> 30 </form>
23 </center> 31 </center>
32 +
24 <div id="map" style="width:1300px;height:750px; margin-left:100px; float:left; " ></div> 33 <div id="map" style="width:1300px;height:750px; margin-left:100px; float:left; " ></div>
25 <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script> 34 <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
26 - 35 +
27 <% if(typeof(info) != "undefined"){ %> 36 <% if(typeof(info) != "undefined"){ %>
37 +
28 <div style="overflow:scroll; width:500px; height:675px; padding:10px;float:right; margin-right:70px; border:1px solid black;"> 38 <div style="overflow:scroll; width:500px; height:675px; padding:10px;float:right; margin-right:70px; border:1px solid black;">
29 - <ol id="placelist"> 39 + <ol id="placelist">
30 <% for(i=0; i<info.length; i++){%> 40 <% for(i=0; i<info.length; i++){%>
31 <li class="item"> 41 <li class="item">
32 - <div class="info"> 42 + <div class="info" onmouseover="displayinfowindow('<%=info[i].orgZipaddr%>', '<%=info[i].orgnm%>', true)" onmouseout="displayinfowindow('<%=info[i].orgZipaddr%>', '<%=info[i].orgnm%>', false)">
33 - <span><strong><%= info[i].orgnm%></strong></span><br> 43 + <span><strong><%= info[i].orgnm%></strong></span>
34 - <span>점심시간 : <%=timeList[i][0]%>:<%=timeList[i][1]%>~<%=timeList[i][2]%>:<%=timeList[i][3] %></span><br> 44 + <%if(info[i].hldyYn=='N') {%>
35 - <span>진료시간 : <%=timeList[i][4]%>:<%=timeList[i][5]%>~<%=timeList[i][6]%>:<%=timeList[i][7] %></span><br> 45 + <span style="color:red"> (당일 휴무) </span>
46 + <%}else { %>
47 + <span style="color:green"> (정상운영) </span>
48 + <%}%>
49 +
50 + <br>
51 + <% if(timeList[i][0]!="" && timeList[i][1]!="" && timeList[i][2]!="" && timeList[i][3]!=""){%>
52 + <span>점심시간 : <%=timeList[i][0]%>:<%=timeList[i][1]%>~<%=timeList[i][2]%>:<%=timeList[i][3] %></span><br>
53 + <%}%>
54 + <% if(timeList[i][4]!="" && timeList[i][5]!="" && timeList[i][6]!="" && timeList[i][7]!=""){%>
55 + <span>진료시간 : <%=timeList[i][4]%>:<%=timeList[i][5]%>~<%=timeList[i][6]%>:<%=timeList[i][7] %></span><br>
56 + <%}%>
36 <span style="color:gray" class="jibun gray"><%=info[i].orgZipaddr%></span><br> 57 <span style="color:gray" class="jibun gray"><%=info[i].orgZipaddr%></span><br>
37 <span style="color:blue" class="tel"><%=info[i].orgTlno%></span><br> 58 <span style="color:blue" class="tel"><%=info[i].orgTlno%></span><br>
38 </div> 59 </div>
39 <hr> 60 <hr>
40 </li> 61 </li>
41 <%} %> 62 <%} %>
42 - </ul> 63 + </ol>
43 </div> 64 </div>
44 <%} %> 65 <%} %>
45 66
...@@ -75,15 +96,14 @@ ...@@ -75,15 +96,14 @@
75 96
76 var marker = new kakao.maps.Marker({ 97 var marker = new kakao.maps.Marker({
77 position: coords, 98 position: coords,
78 - clickable: true}); 99 + clickable: true
79 - 100 + });
80 // 마커를 지도에 표시합니다. 101 // 마커를 지도에 표시합니다.
81 - marker.setMap(map); 102 + marker.setMap(map);
82 -
83 var num=1; 103 var num=1;
84 // 인포윈도우를 생성합니다 104 // 인포윈도우를 생성합니다
85 var infowindow = new kakao.maps.InfoWindow({ 105 var infowindow = new kakao.maps.InfoWindow({
86 - content: '<div style="width:250px;text-align:center;padding:5px 0;">' + addr.orgnm + '</div>', 106 + content: '<div style="width:250px;text-align:center;padding:5px 0;">' + addr.orgnm + '</div>',
87 }); 107 });
88 // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다 108 // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
89 // 이벤트 리스너로는 클로저를 만들어 등록합니다 109 // 이벤트 리스너로는 클로저를 만들어 등록합니다
...@@ -103,15 +123,41 @@ ...@@ -103,15 +123,41 @@
103 infowindow.open(map, marker); 123 infowindow.open(map, marker);
104 }; 124 };
105 } 125 }
106 - 126 + var infowindows = [];
107 // 인포윈도우를 닫는 클로저를 만드는 함수입니다 127 // 인포윈도우를 닫는 클로저를 만드는 함수입니다
108 function makeOutListener(infowindow) { 128 function makeOutListener(infowindow) {
109 return function() { 129 return function() {
110 infowindow.close(); 130 infowindow.close();
111 }; 131 };
112 } 132 }
133 +
134 + var infowindows = [];
135 + function displayinfowindow(address,name,flag){
136 + if(flag){
137 + var tmpaddr = (address.split(','))[0];
138 + geocoder.addressSearch(tmpaddr, function(result, status) {
139 + if (status === kakao.maps.services.Status.OK) {
140 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
141 + map.setCenter(coords);
142 + var marker = new kakao.maps.Marker({
143 + position: coords,
144 + clickable: true
145 + });
146 + infowindow = new kakao.maps.InfoWindow({
147 + content: '<div style="width:250px;text-align:center;padding:5px 0;">' + name + '</div>',
148 + });
149 + infowindows.push(infowindow);
150 + infowindow.open(map, marker);
151 + }
152 + });
153 + }
154 + else{
155 + for(var i = 0; i<infowindows.length;i++)
156 + infowindows[i].close();
157 + infowindows = [];
158 + }
159 + }
113 </script> 160 </script>
114 <% } %> 161 <% } %>
115 -
116 </body> 162 </body>
117 </html> 163 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 -//- html
2 -//- head
3 -//- meta(charset='utf-8')
4 -//- body
5 -//- h1 COVID-19 의료기관 검색하기
6 -
7 -//- form(action='/' method="post")
8 -//- p
9 -//- input(type='text' name='region' placeholder='서울시')
10 -//- input(type='submit')
11 -
12 -//- //result값 있을때만
13 -//- if result!=NULL
14 -//- table
15 -//- tr
16 -//- th 기관명
17 -//- th 기관 전화번호
18 -//- th 기관 주소
19 -//- th 휴무일 여부
20 -//- th 점심 시작시간
21 -//- th 점심 종료시간
22 -//- th 진료 시작기간
23 -//- th 진료 종료시간
24 -//- -for(i=1; i<result.length; i++)
25 -//- tr
26 -//- td= result[i].orgnm
27 -//- td= result[i].orgTlno
28 -//- td= result[i].orgZipaddr
29 -//- td= result[i].hldyYn
30 -//- td= result[i].lunchSttTm
31 -//- td= result[i].lunchEndTm
32 -//- td= result[i].sttTm
33 -//- td= result[i].endTm
34 -
35 -
36 -
37 -
38 -
...\ No newline at end of file ...\ No newline at end of file