UI변경

김서연
Commit 94b4f4db2e95c62d4e3ce752da80b7dafbb6ec02 94b4f4db 2 parents 3885fe46 d1ad0633
Showing 4 changed files with 81 additions and 39 deletions
README.md
app.js
map/kakaomap.html
map/map.html
--- a/README.md
View file @94b4f4d
+++ b/README.md
View file @94b4f4d
-
-~~~
-# integrated#1의 branch를 clone해오기 
-git clone -b integrated#1 --single-branch http://khuhub.khu.ac.kr/2018103585/Corona_Vaccination_Medical_Institution.git
-cd Corona_Vaccination_Medical_Institution
-
-  
-# 본인 이름으로 각자 branch 생성 후 올리기
-git checkout -b integrated#1_이름
-git add .
-git commit -m "커밋메시지"
-git push origin integrated#1_이름
-~~~
-  
\ No newline at end of file
+## Topic
+> 코로나 19 예방접종 의료기관 조회 웹서비스를 제공하는 프로젝트입니다.
+ 
+## Member
+| 김서연 | 허정용 |
+| :----: | :----: |
+| [@ksy991018](https://github.com/ksy991018) | [@JeongYougHeo](https://github.com/JeongYougHeo) |
+ 
--- a/app.js
View file @94b4f4d
+++ b/app.js
View file @94b4f4d
@@ -8,6 +8,8 @@ app.locals.pretty=true;
 app.set('views','./views')
 app.set('view engine','pug');
 app.use(express.static('public'));
+var http = require('http');
+var fs = require('fs');
 //?page=페이지번호&?perPage=페이지당 데이터수
 const $base_url = `https://api.odcloud.kr/api/apnmOrg/v1/list`;
@@ -27,9 +29,7 @@ app.post('/',function(req,res,next){
         //data부분만 추출
         var obj = JSON.parse(body).data;
-
         // console.log(obj);
-
         //검색한 지역 포함한 모든 data 담기
         let searchList = obj.filter(searchList => {
             return searchList.orgZipaddr.includes(searchWord);
@@ -38,19 +38,27 @@ app.post('/',function(req,res,next){
         // console.log(searchList);
         //result라는 변수에 담아 결과 보내기 
         res.render('main', {result:searchList });
+
     })
 })
+app.get('/',function(req,res){
+    res.writeHead(200, {'Content-Type': 'text/html'});
+    fs.readFile('./map/kakaomap.html', null, function(err,data){
+        if(err){
+            res.writeHead(404);
+            res.write('error');
+        }
+        else{
+            console.log('complete!');
+            res.write(data);
+        }
+        res.end();
+    });
+})
 app.listen(3000,function(){
     console.log('Connected 3000 port!');
 });
-app.get('/',function(req,res){
-    res.render('main');
-})
-
-app.get('/map',function(req,res){
-    res.resnder('./map/map.html');
-})
--- a/map/kakaomap.html
View file @94b4f4d
+++ b/map/kakaomap.html
View file @94b4f4d
@@ -6,6 +6,13 @@
 </head>
 <body>
+    <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:700px;height:400px;"></div>
 <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988"></script>
--- a/map/map.html
View file @94b4f4d
+++ b/map/map.html
View file @94b4f4d
@@ -6,26 +6,59 @@
 </head>
 <body>
+    
+
+    <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: 700px;height:400px;"></div>
-<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
+    <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
-<script>
+    <script>
-var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
+    var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
-    mapOption = {
+        mapOption = {
-        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
+            center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
-        level: 3 // 지도의 확대 레벨
+            level: 3 // 지도의 확대 레벨
-    };  
+        };  
+
+    // 지도를 생성합니다    
+    var map = new kakao.maps.Map(mapContainer, mapOption); 
+
+    // 주소-좌표 변환 객체를 생성합니다
+    var geocoder = new kakao.maps.services.Geocoder();
+
+    // 주소로 좌표를 검색합니다
+    geocoder.addressSearch('서울특별시 강동구 올림픽로 779', function(result, status) {
+
+        // 정상적으로 검색이 완료됐으면 
+        if (status === kakao.maps.services.Status.OK) {
+
+            var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
-// 지도를 생성합니다    
+            // 결과값으로 받은 위치를 마커로 표시합니다
-var map = new kakao.maps.Map(mapContainer, mapOption); 
+            var marker = new kakao.maps.Marker({
+                map: map,
+                position: coords
+            });
-// 주소-좌표 변환 객체를 생성합니다
+            // 인포윈도우로 장소에 대한 설명을 표시합니다
-var geocoder = new kakao.maps.services.Geocoder();
+            var infowindow = new kakao.maps.InfoWindow({
+                content: '<div style="width:150px;text-align:center;padding:6px 0;">기관명</div>'
+            });
+            infowindow.open(map, marker);
-// 주소로 좌표를 검색합니다
+            // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
-geocoder.addressSearch('경희대로26', function(result, status) {
+            map.setCenter(coords);
+        } 
+    });  
+    geocoder.addressSearch('서울특별시 동대문구 회기로 173', function(result, status) {
     // 정상적으로 검색이 완료됐으면 
-     if (status === kakao.maps.services.Status.OK) {
+    if (status === kakao.maps.services.Status.OK) {
         var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
@@ -44,7 +77,7 @@ geocoder.addressSearch('경희대로26', function(result, status) {
         // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
         map.setCenter(coords);
     } 
-});    
+    });    
-</script>
+    </script>
 </body>
 </html>
\ No newline at end of file