지도 띄우는 방법 추가수정

김서연
Commit 2f0b5db2a082e8e763db3b98b8f50abf419c68dc 2f0b5db2 2 parents 04a5c772 8f421cae
Showing 3 changed files with 71 additions and 22 deletions
README.md
app.js
views/index.ejs
--- a/README.md
View file @2f0b5db
+++ b/README.md
View file @2f0b5db
-## Topic
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-> 코로나 19 예방접종 의료기관 조회 웹서비스를 제공하는 프로젝트입니다.
+
+## 🔍 About the Project
+> 현재 코로나19로 인해 얼마전부터 위탁의료기관을 통한 신종 코로나바이러스 감염증(코로나19) 접종이 본격 시작되었습니다. 
+이에 따라, 원하는 지역의 예방접종 위탁의료기관을 간편하게 조회할 수 있는 서비스를 개발하였습니다. 
+이 프로젝트는 매 정각 1번씩 갱신되고 있는 위탁의료기관의 정보 데이터를 기반으로 제공합니다.
+
+## 💻 User Interface 
+<img src="/uploads/c003a2a8d20b368d3c0fb07c49007251/UI예시.png"  width="800" height="400">
+
+   
+## 📋 기술 스택
+- Nodejs
+- Html
+- Css
+- JavaScript
+- Express
+- AWS EC2
-## Member
+
+## ✏️ 프로젝트 사용 방법
+1. cloning
+```
+http://khuhub.khu.ac.kr/2018103585/Corona_Vaccination_Medical_Institution.git
+```
+
+2. install npm packages
+```
+npm install
+```
+3. add API key
+> Fill {} with API Key
+```
+const $key = '{Corona Vaccination Medical Institution API key}' (app.js)
+```
+```
+<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey={Kakao map API Key}&libraries=services"></script> (index.ejs)
+```
+4. Execute 
+```
+node app.js
+```
+
+## 💻 Project Architecture
+<img src="/uploads/abc7fb1cd4ee2ab997956e529c24670e/프로젝트아키텍쳐.png"  width="800" height="400">
+
+  
+   
+## ✨ Contributors 
+
 | 김서연 | 허재경 |
 | :----: | :----: |
 | [@ksy991018](https://github.com/ksy991018) | [@JaeKyungHeo](https://github.com/JaeKyungHeo) |
--- a/app.js
View file @2f0b5db
+++ b/app.js
View file @2f0b5db
@@ -24,18 +24,14 @@ app.post('/',function(req,res,next){
     request($api_url,function(err,response,body){
         if(err) throw err;
-        // console.log(body);
         //data부분만 추출
         var obj = JSON.parse(body).data;
-        // console.log(obj);
         //검색한 지역 포함한 모든 data 담기
         let searchList = obj.filter(searchList => {
             return searchList.orgZipaddr.includes(searchWord);
           });
-        // console.log(searchList);
         //result라는 변수에 담아 결과 보내기 
-        // var hey = searchList[0].orgZipaddr.split(',');
         var timeList=[];
         for(var i=0; i<searchList.length; i++){ //시간정보 파싱 
             var eachtime=[];
@@ -77,9 +73,7 @@ app.post('/',function(req,res,next){
         }
         res.render('index', {result:JSON.stringify(searchList),info:searchList ,timeList:timeList});
-
     })
-
 })
 app.get('/',function(req,res){
@@ -90,3 +84,5 @@ app.listen(3000,function(){
     console.log('Connected 3000 port!');
 });
+
+  
--- a/views/index.ejs
View file @2f0b5db
+++ b/views/index.ejs
View file @2f0b5db
@@ -3,7 +3,6 @@
 <head>
     <meta charset="utf-8">
     <title>코로나 백신 의료기관 조회</title>
-
     <%if(typeof(info)!="undefined"){%>
         <script>
             try {
@@ -18,7 +17,8 @@
 </head>
 <body>
     <center>
-        <h1 style="font-family:verdana;font-weight:bold; ">COVID-19 예방접종 위탁 의료기관 조회</h1> <hr>
+        <h1 style="font-family:verdana;">COVID-19 예방접종 위탁 의료기관 조회</h1> <hr>
+
         <form action="/" method="post">
         <p> 
             <div style="float:right; width:40%; margin-bottom:10px; margin-right: 5px;">
@@ -28,11 +28,10 @@
         </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"){ %>
+    <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
-    <div id="map" style="width:65%;height:550px;float:left; margin-left: 2%; border-radius: 2%; border:1px solid black" ></div>  
+    <% 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++){%>
@@ -44,7 +43,6 @@
                     <%}else { %>                    
                         <span style="color:green"> (정상운영) </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>
@@ -60,14 +58,14 @@
             <%} %>
         </ol>
     </div>
-    <%} %>
+    <%}%>
     <% if(typeof(result) != "undefined"){ %>
    <script>
     var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
         mapOption = { 
             center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
-            level: 2 // 지도의 확대 레벨
+            level: 3 // 지도의 확대 레벨
         };
     var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
@@ -81,7 +79,6 @@
     listData = JSON.parse(listData);
     var count = 0;
-
     //입력되는 배열명이 listData로 들어오면 됨.
     listData.forEach(function(addr, index) {
         var tmpaddr = ((addr.orgZipaddr).split(','))[0];
@@ -91,7 +88,6 @@
                 var coords = new kakao.maps.LatLng(result[0].y, result[0].x); 
                 count += 1;
-
                 var marker = new kakao.maps.Marker({
                     position: coords,
                     clickable: true
@@ -128,7 +124,6 @@
             infowindow.close();
         };
     }
-
     var infowindows = [];
     function displayinfowindow(address,name,flag){
         if(flag){
@@ -136,7 +131,7 @@
         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); 
+                map.setCenter(coords);//인포윈도우 생성 마커로 이동 
                 var marker = new kakao.maps.Marker({
                     position: coords,
                     clickable: true
@@ -156,6 +151,18 @@
         }
     }
     </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>
\ No newline at end of file