김서연 / Corona_Vaccination_Medical_Institution

Go to a project
Toggle navigation Toggle navigation pinning
김서연
30e900ea 1 parent f1f2439e

UI크기 조절과 기관정보전처리 및 출력

Inline Side-by-side
Showing 3 changed files with 53 additions and 12 deletions
......@@ -6,7 +6,7 @@ var app =express();
app.set('view engine','ejs');
app.set('views','./views')
app.use(express.urlencoded( {extended : false } ));
app.use(express.static(__dirname + '/public'));
app.locals.pretty=true;
// app.set('view engine','pug');
......@@ -41,8 +41,22 @@ app.post('/',function(req,res,next){
// console.log(searchList);
//result라는 변수에 담아 결과 보내기
var hey = searchList[0].orgZipaddr.split(',');
res.render('index', {result:JSON.stringify(searchList) });
// var hey = searchList[0].orgZipaddr.split(',');
var timeList=[];
for(var i=0; i<searchList.length; i++){ //시간정보 파싱
var eachtime=[];
console.log(searchList[i]);
eachtime.push(searchList[i].lunchSttTm.substr(0,2));
eachtime.push(searchList[i].lunchSttTm.substr(2,2));
eachtime.push(searchList[i].lunchEndTm.substr(0,2));
eachtime.push(searchList[i].lunchEndTm.substr(2,2));
eachtime.push(searchList[i].sttTm.substr(0,2));
eachtime.push(searchList[i].sttTm.substr(2,2));
eachtime.push(searchList[i].endTm.substr(0,2));
eachtime.push(searchList[i].endTm.substr(2,2));
timeList.push(eachtime);
}
res.render('index', {result:JSON.stringify(searchList),info:searchList ,timeList:timeList});
})
......
/* #placeList li{list-style: none;}
#placesList .item {position:relative;border-bottom:1px solid #888;overflow: hidden;cursor: pointer;min-height: 65px;}
#placesList .item span {display: block;margin-top:4px;}
#placesList .item h5, #placesList .item .info {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
#placesList .info .gray {color:#8a8a8a;}
#placesList .info .jibun {padding-left:26px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;}
#placesList .info .tel {color:#009900;} */
\ No newline at end of file
......@@ -4,20 +4,40 @@
<meta charset="utf-8">
<title>여러개 마커에 이벤트 등록하기1</title>
<!-- <link rel="stylesheet" href="/css/master.css"> -->
</head>
<body>
<center>
<h1>COVID-19 예방접종 위탁 의료기관 조회</h1>
<form action="/" method="post">
<p>
<input type="text" name="region" placeholder="지역을 입력하세요" size="15"/>
<button type="submit">검색</button>
</p>
</form>
<h1>COVID-19 의료기관 검색하기</h1>
<form action="/" method="post">
<p>
<input type="text" name="region" placeholder="서울시"/>
<input type="submit"/>
</p>
</form>
<div id="map" style="width:1300px;height:600px;"></div>
</center>
<div id="map" style="width:700px;height:400px;"></div>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
<% if(typeof(info) != "undefined"){ %>
<ul id="placelist">
<% for(i=0; i<info.length; i++){%>
<li class="item">
<div class="info">
<h5>기관명 : <%= info[i].orgnm%></h5>
<span>점심시간 : <%=timeList[i][0]%>:<%=timeList[i][1]%>~<%=timeList[i][2]%>:<%=timeList[i][3] %></span>
<span>진료시간 : <%=timeList[i][4]%>:<%=timeList[i][5]%>~<%=timeList[i][6]%>:<%=timeList[i][7] %></span>
<span class="jibun gray">기관주소 : <%=info[i].orgZipaddr%></span>
<span class="tel"><%=info[i].orgTlno%></span>
</div>
</li>
<%} %>
</ul>
<%} %>
<% if(typeof(result) != "undefined"){ %>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
......@@ -57,7 +77,7 @@
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">' + '기관명:' + addr.orgnm + '</div>',
content: '<div style="width:250px;text-align:center;padding:5px 0;">' + '기관명: ' + addr.orgnm + '</div>',
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
......