김서연 / Corona_Vaccination_Medical_Institution

Go to a project
Toggle navigation Toggle navigation pinning
Heo
9d899f39 2 parents 97ff2d12 35d4a653

Merge branch 'integrated#2'

Inline Side-by-side
Showing 7 changed files with 429 additions and 32 deletions
1 +
1 ## Topic 2 ## Topic
2 > 코로나 19 예방접종 의료기관 조회 웹서비스를 제공하는 프로젝트입니다. 3 > 코로나 19 예방접종 의료기관 조회 웹서비스를 제공하는 프로젝트입니다.
3 4
...@@ -6,4 +7,3 @@ ...@@ -6,4 +7,3 @@
6 | :----: | :----: | 7 | :----: | :----: |
7 | [@ksy991018](https://github.com/ksy991018) | [@JeongYougHeo](https://github.com/JeongYougHeo) | 8 | [@ksy991018](https://github.com/ksy991018) | [@JeongYougHeo](https://github.com/JeongYougHeo) |
8 9
9 -
......
...@@ -3,43 +3,68 @@ var bodyParser = require('body-parser'); ...@@ -3,43 +3,68 @@ var bodyParser = require('body-parser');
3 var request = require('request'); 3 var request = require('request');
4 var cheerio = require('cheerio'); 4 var cheerio = require('cheerio');
5 var app =express(); 5 var app =express();
6 +app.set('view engine','ejs');
7 +app.set('views','./views')
6 app.use(express.urlencoded( {extended : false } )); 8 app.use(express.urlencoded( {extended : false } ));
9 +
7 app.locals.pretty=true; 10 app.locals.pretty=true;
8 -app.set('views','./views') 11 +
9 -app.set('view engine','pug'); 12 +// app.set('view engine','pug');
13 +
10 app.use(express.static('public')); 14 app.use(express.static('public'));
15 +var http = require('http');
16 +var fs = require('fs');
11 17
12 //?page=페이지번호&?perPage=페이지당 데이터수 18 //?page=페이지번호&?perPage=페이지당 데이터수
13 const $base_url = `https://api.odcloud.kr/api/apnmOrg/v1/list`; 19 const $base_url = `https://api.odcloud.kr/api/apnmOrg/v1/list`;
14 const $key = '4US0H%2BXj%2BmS8IR4YL0%2BUb9H4CcbTr92QxhYULfOEz1DT%2BZaaos4sRfNh6cmAD2Icli862Ysc31%2BaE4pWywDBIA%3D%3D'; 20 const $key = '4US0H%2BXj%2BmS8IR4YL0%2BUb9H4CcbTr92QxhYULfOEz1DT%2BZaaos4sRfNh6cmAD2Icli862Ysc31%2BaE4pWywDBIA%3D%3D';
15 -
16 -//임시
17 const $page=1; 21 const $page=1;
18 -const $perPage=10; 22 +const $perPage=30000;
19 23
20 -const $api_url = $base_url + '?returnType=XML&serviceKey='+$key+'&page='+$page+'&perPage='+$perPage; 24 +const $api_url = $base_url + '?serviceKey='+$key+'&page='+$page+'&perPage='+$perPage;
21 console.log($api_url); 25 console.log($api_url);
22 26
27 +//해당 URL로 요청
28 +app.post('/',function(req,res,next){
29 + const searchWord = req.body.region; //지역 키워드
23 30
24 -app.listen(3000,function(){ 31 + request($api_url,function(err,response,body){
25 - console.log('Connected 3000 port!'); 32 + if(err) throw err;
26 -}); 33 + // console.log(body);
34 + //data부분만 추출
35 + var obj = JSON.parse(body).data;
36 + // console.log(obj);
37 + //검색한 지역 포함한 모든 data 담기
38 + let searchList = obj.filter(searchList => {
39 + return searchList.orgZipaddr.includes(searchWord);
40 + });
27 41
28 -request($api_url,function(err,res,body){ 42 + // console.log(searchList);
29 - $ = cheerio.load(body); 43 + //result라는 변수에 담아 결과 보내기
30 - const $infoList = $('item') 44 + var hey = searchList[0].orgZipaddr.split(',');
31 - console.log($infoList.html()); 45 + res.render('index', {result:JSON.stringify(searchList) });
32 - console.log($infoList.length); 46 +
33 - // let name = $infoList.find('orgnm').text(); 47 + })
34 - // let location = $infoList.find('orgZipaddr').text();
35 - // console.log(`기관명: ${name}, 위치: ${location}`);
36 -})
37 48
38 -app.post('/search',function(req,res){
39 - res.send('내가 검색한 지역은 ' + req.body.region);
40 }) 49 })
41 50
42 app.get('/',function(req,res){ 51 app.get('/',function(req,res){
43 - 52 + res.render('index');
44 - res.render('main'); 53 + // res.writeHead(200, {'Content-Type': 'text/html'});
54 + // fs.readFile('./map/kakaomap.html', null, function(err,data){
55 + // if(err){
56 + // res.writeHead(404);
57 + // res.write('error');
58 + // }
59 + // else{
60 + // console.log('complete!');
61 + // res.write(data);
62 + // }
63 + // res.end();
64 + // });
45 }) 65 })
66 +
67 +app.listen(3000,function(){
68 + console.log('Connected 3000 port!');
69 +});
70 +
......
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
...@@ -9,8 +9,10 @@ ...@@ -9,8 +9,10 @@
9 "author": "", 9 "author": "",
10 "license": "ISC", 10 "license": "ISC",
11 "dependencies": { 11 "dependencies": {
12 + "@google/maps": "^1.1.3",
12 "body-parser": "^1.19.0", 13 "body-parser": "^1.19.0",
13 "cheerio": "^1.0.0-rc.9", 14 "cheerio": "^1.0.0-rc.9",
15 + "ejs": "^3.1.6",
14 "express": "^4.17.1", 16 "express": "^4.17.1",
15 "pug": "^3.0.2", 17 "pug": "^3.0.2",
16 "request": "^2.88.2", 18 "request": "^2.88.2",
......
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset="utf-8">
5 + <title>여러개 마커에 이벤트 등록하기1</title>
6 +
7 +</head>
8 +<body>
9 +
10 + <h1>COVID-19 의료기관 검색하기</h1>
11 + <form action="/" method="post">
12 + <p>
13 + <input type="text" name="region" placeholder="서울시"/>
14 + <input type="submit"/>
15 + </p>
16 + </form>
17 +
18 + <div id="map" style="width:700px;height:400px;"></div>
19 + <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
20 +
21 + <% if(typeof(result) != "undefined"){ %>
22 + <script>
23 + var mapContainer = document.getElementById('map'), // 지도를 표시할 div
24 + mapOption = {
25 + center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
26 + level: 5 // 지도의 확대 레벨
27 + };
28 +
29 + var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
30 + var geocoder = new kakao.maps.services.Geocoder();
31 + // 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
32 + var zoomControl = new kakao.maps.ZoomControl();
33 + map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
34 +
35 + var listData = "<%= result %>";
36 + listData = listData.replaceAll('&#34;','\"');
37 + listData = JSON.parse(listData);
38 +
39 + var count = 0;
40 +
41 + //입력되는 배열명이 listData로 들어오면 됨.
42 + listData.forEach(function(addr, index) {
43 + var tmpaddr = ((addr.orgZipaddr).split(','))[0];
44 + console.log(tmpaddr);
45 + geocoder.addressSearch(tmpaddr, function(result, status) {
46 + if (status === kakao.maps.services.Status.OK) {
47 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
48 + count += 1;
49 + var marker = new kakao.maps.Marker({
50 + position: coords,
51 + clickable: true});
52 +
53 + // 마커를 지도에 표시합니다.
54 + marker.setMap(map);
55 +
56 + // 인포윈도우를 생성합니다
57 + var infowindow = new kakao.maps.InfoWindow({
58 + content: '<div style="width:150px;text-align:center;padding:6px 0;">' + '기관명:' + addr.orgnm + '</div>',
59 + });
60 + // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
61 + // 이벤트 리스너로는 클로저를 만들어 등록합니다
62 + kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
63 + kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
64 + if(count == 1){
65 + map.setCenter(coords);
66 + }
67 + // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
68 + map.setCenter(coords);
69 + //console.log(listData.length);
70 + }
71 + });
72 + });
73 + // 인포윈도우를 표시하는 클로저를 만드는 함수입니다
74 + function makeOverListener(map, marker, infowindow) {
75 + return function() {
76 + infowindow.open(map, marker);
77 + };
78 + }
79 +
80 + // 인포윈도우를 닫는 클로저를 만드는 함수입니다
81 + function makeOutListener(infowindow) {
82 + return function() {
83 + infowindow.close();
84 + };
85 + }
86 + </script>
87 +<% } %>
88 +
89 +</body>
90 +</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 - form(action='/search' method="post")
6 - p
7 - input(type='text' name='region' placeholder='지역')
8 - p
9 - input(type='submit')
...\ 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
......