Showing
3 changed files
with
89 additions
and
16 deletions
... | @@ -6,7 +6,7 @@ var app =express(); | ... | @@ -6,7 +6,7 @@ var app =express(); |
6 | app.set('view engine','ejs'); | 6 | app.set('view engine','ejs'); |
7 | app.set('views','./views') | 7 | app.set('views','./views') |
8 | app.use(express.urlencoded( {extended : false } )); | 8 | app.use(express.urlencoded( {extended : false } )); |
9 | - | 9 | +app.use(express.static(__dirname + '/public')); |
10 | app.locals.pretty=true; | 10 | app.locals.pretty=true; |
11 | 11 | ||
12 | // app.set('view engine','pug'); | 12 | // app.set('view engine','pug'); |
... | @@ -41,8 +41,49 @@ app.post('/',function(req,res,next){ | ... | @@ -41,8 +41,49 @@ app.post('/',function(req,res,next){ |
41 | 41 | ||
42 | // console.log(searchList); | 42 | // console.log(searchList); |
43 | //result라는 변수에 담아 결과 보내기 | 43 | //result라는 변수에 담아 결과 보내기 |
44 | - var hey = searchList[0].orgZipaddr.split(','); | 44 | + // var hey = searchList[0].orgZipaddr.split(','); |
45 | - res.render('index', {result:JSON.stringify(searchList) }); | 45 | + var timeList=[]; |
46 | + for(var i=0; i<searchList.length; i++){ //시간정보 파싱 | ||
47 | + var eachtime=[]; | ||
48 | + console.log(searchList[i]); | ||
49 | + if(searchList[i].lunchSttTm == null) | ||
50 | + eachtime.push(''); | ||
51 | + else | ||
52 | + eachtime.push(searchList[i].lunchSttTm.substr(0,2)); | ||
53 | + if(searchList[i].lunchSttTm == null) | ||
54 | + eachtime.push(''); | ||
55 | + else | ||
56 | + eachtime.push(searchList[i].lunchSttTm.substr(2,2)); | ||
57 | + if(searchList[i].lunchEndTm == null) | ||
58 | + eachtime.push(''); | ||
59 | + else | ||
60 | + eachtime.push(searchList[i].lunchEndTm.substr(0,2)); | ||
61 | + if(searchList[i].lunchEndTm == null) | ||
62 | + eachtime.push(''); | ||
63 | + else | ||
64 | + eachtime.push(searchList[i].lunchEndTm.substr(2,2)); | ||
65 | + if(searchList[i].sttTm == null) | ||
66 | + eachtime.push(''); | ||
67 | + else | ||
68 | + eachtime.push(searchList[i].sttTm.substr(0,2)); | ||
69 | + if(searchList[i].sttTm == null) | ||
70 | + eachtime.push(''); | ||
71 | + else | ||
72 | + eachtime.push(searchList[i].sttTm.substr(2,2)); | ||
73 | + if(searchList[i].endTm == null) | ||
74 | + eachtime.push(''); | ||
75 | + else | ||
76 | + eachtime.push(searchList[i].endTm.substr(0,2)); | ||
77 | + if(searchList[i].endTm == null) | ||
78 | + eachtime.push(''); | ||
79 | + else | ||
80 | + eachtime.push(searchList[i].endTm.substr(2,2)); | ||
81 | + if(eachtime == null) | ||
82 | + eachtime.push(''); | ||
83 | + else | ||
84 | + timeList.push(eachtime); | ||
85 | + } | ||
86 | + res.render('index', {result:JSON.stringify(searchList),info:searchList ,timeList:timeList}); | ||
46 | 87 | ||
47 | }) | 88 | }) |
48 | 89 | ... | ... |
public/css/master.css
0 → 100644
1 | +/* #placeList li{list-style: none;} | ||
2 | +#placesList .item {position:relative;border-bottom:1px solid #888;overflow: hidden;cursor: pointer;min-height: 65px;} | ||
3 | +#placesList .item span {display: block;margin-top:4px;} | ||
4 | +#placesList .item h5, #placesList .item .info {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;} | ||
5 | +#placesList .info .gray {color:#8a8a8a;} | ||
6 | +#placesList .info .jibun {padding-left:26px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;} | ||
7 | +#placesList .info .tel {color:#009900;} */ | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
... | @@ -4,26 +4,51 @@ | ... | @@ -4,26 +4,51 @@ |
4 | <meta charset="utf-8"> | 4 | <meta charset="utf-8"> |
5 | <title>여러개 마커에 이벤트 등록하기1</title> | 5 | <title>여러개 마커에 이벤트 등록하기1</title> |
6 | 6 | ||
7 | + <!-- <link rel="stylesheet" href="/css/master.css"> --> | ||
8 | + | ||
7 | </head> | 9 | </head> |
8 | <body> | 10 | <body> |
9 | - | 11 | + <center> |
10 | - <h1>COVID-19 의료기관 검색하기</h1> | 12 | + <h1>COVID-19 예방접종 위탁 의료기관 조회</h1> <br><hr> |
11 | - <form action="/" method="post"> | 13 | + <form action="/" method="post"> |
12 | - <p> | 14 | + <p> |
13 | - <input type="text" name="region" placeholder="서울시"/> | 15 | + <br> |
14 | - <input type="submit"/> | 16 | + <div style="float:right; margin-right:250px;margin-right:70px; margin-bottom:7px;"> |
15 | - </p> | 17 | + <input type="text" style="width:450px;height:30px;font-size:20px;" name="region" placeholder="지역을 입력하세요" size="20"/> |
16 | - </form> | 18 | + <button type="submit" style="height:35px;font-size:20px;">검색</button> |
17 | - | 19 | + </div> |
18 | - <div id="map" style="width:700px;height:400px;"></div> | 20 | + |
21 | + </p> | ||
22 | + </form> | ||
23 | + </center> | ||
24 | + <div id="map" style="width:1300px;height:750px; margin-left:100px; float:left; " ></div> | ||
19 | <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script> | 25 | <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script> |
20 | 26 | ||
27 | + <% if(typeof(info) != "undefined"){ %> | ||
28 | + <div style="overflow:scroll; width:500px; height:675px; padding:10px;float:right; margin-right:70px; border:1px solid black;"> | ||
29 | + <ol id="placelist"> | ||
30 | + <% for(i=0; i<info.length; i++){%> | ||
31 | + <li class="item"> | ||
32 | + <div class="info"> | ||
33 | + <span><strong><%= info[i].orgnm%></strong></span><br> | ||
34 | + <span>점심시간 : <%=timeList[i][0]%>:<%=timeList[i][1]%>~<%=timeList[i][2]%>:<%=timeList[i][3] %></span><br> | ||
35 | + <span>진료시간 : <%=timeList[i][4]%>:<%=timeList[i][5]%>~<%=timeList[i][6]%>:<%=timeList[i][7] %></span><br> | ||
36 | + <span style="color:gray" class="jibun gray"><%=info[i].orgZipaddr%></span><br> | ||
37 | + <span style="color:blue" class="tel"><%=info[i].orgTlno%></span><br> | ||
38 | + </div> | ||
39 | + <hr> | ||
40 | + </li> | ||
41 | + <%} %> | ||
42 | + </ul> | ||
43 | + </div> | ||
44 | + <%} %> | ||
45 | + | ||
21 | <% if(typeof(result) != "undefined"){ %> | 46 | <% if(typeof(result) != "undefined"){ %> |
22 | <script> | 47 | <script> |
23 | var mapContainer = document.getElementById('map'), // 지도를 표시할 div | 48 | var mapContainer = document.getElementById('map'), // 지도를 표시할 div |
24 | mapOption = { | 49 | mapOption = { |
25 | center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표 | 50 | center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표 |
26 | - level: 3 // 지도의 확대 레벨 | 51 | + level: 2 // 지도의 확대 레벨 |
27 | }; | 52 | }; |
28 | 53 | ||
29 | var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다 | 54 | var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다 |
... | @@ -55,9 +80,10 @@ | ... | @@ -55,9 +80,10 @@ |
55 | // 마커를 지도에 표시합니다. | 80 | // 마커를 지도에 표시합니다. |
56 | marker.setMap(map); | 81 | marker.setMap(map); |
57 | 82 | ||
83 | + var num=1; | ||
58 | // 인포윈도우를 생성합니다 | 84 | // 인포윈도우를 생성합니다 |
59 | var infowindow = new kakao.maps.InfoWindow({ | 85 | var infowindow = new kakao.maps.InfoWindow({ |
60 | - content: '<div style="width:150px;text-align:center;padding:6px 0;">' + '기관명:' + addr.orgnm + '</div>', | 86 | + content: '<div style="width:250px;text-align:center;padding:5px 0;">' + addr.orgnm + '</div>', |
61 | }); | 87 | }); |
62 | // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다 | 88 | // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다 |
63 | // 이벤트 리스너로는 클로저를 만들어 등록합니다 | 89 | // 이벤트 리스너로는 클로저를 만들어 등록합니다 |
... | @@ -67,7 +93,6 @@ | ... | @@ -67,7 +93,6 @@ |
67 | map.setCenter(coords); | 93 | map.setCenter(coords); |
68 | } | 94 | } |
69 | // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다 | 95 | // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다 |
70 | - map.setCenter(coords); | ||
71 | //console.log(listData.length); | 96 | //console.log(listData.length); |
72 | } | 97 | } |
73 | }); | 98 | }); | ... | ... |
-
Please register or login to post a comment