김서연 / 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 431 additions and 34 deletions
## Topic
> 코로나 19 예방접종 의료기관 조회 웹서비스를 제공하는 프로젝트입니다.
## Member
| 김서연 | 허정용 |
| :----: | :----: |
| [@ksy991018](https://github.com/ksy991018) | [@JeongYougHeo](https://github.com/JeongYougHeo) |
......
......@@ -3,43 +3,68 @@ var bodyParser = require('body-parser');
var request = require('request');
var cheerio = require('cheerio');
var app =express();
app.set('view engine','ejs');
app.set('views','./views')
app.use(express.urlencoded( {extended : false } ));
app.locals.pretty=true;
app.set('views','./views')
app.set('view engine','pug');
// 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`;
const $key = '4US0H%2BXj%2BmS8IR4YL0%2BUb9H4CcbTr92QxhYULfOEz1DT%2BZaaos4sRfNh6cmAD2Icli862Ysc31%2BaE4pWywDBIA%3D%3D';
//임시
const $page=1;
const $perPage=10;
const $perPage=30000;
const $api_url = $base_url + '?returnType=XML&serviceKey='+$key+'&page='+$page+'&perPage='+$perPage;
const $api_url = $base_url + '?serviceKey='+$key+'&page='+$page+'&perPage='+$perPage;
console.log($api_url);
//해당 URL로 요청
app.post('/',function(req,res,next){
const searchWord = req.body.region; //지역 키워드
app.listen(3000,function(){
console.log('Connected 3000 port!');
});
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(',');
res.render('index', {result:JSON.stringify(searchList) });
request($api_url,function(err,res,body){
$ = cheerio.load(body);
const $infoList = $('item')
console.log($infoList.html());
console.log($infoList.length);
// let name = $infoList.find('orgnm').text();
// let location = $infoList.find('orgZipaddr').text();
// console.log(`기관명: ${name}, 위치: ${location}`);
})
})
app.post('/search',function(req,res){
res.send('내가 검색한 지역은 ' + req.body.region);
})
app.get('/',function(req,res){
res.render('index');
// 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!');
});
res.render('main');
})
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>여러개 마커에 이벤트 등록하기1</title>
</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>
<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); // 지도를 생성합니다
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
var listData = "<%= result %>";
console.log(listData[1]);
//입력되는 배열명이 listData로 들어오면 됨.
listData.forEach(function(addr, index) {
var tmpaddr = addr[0].split(',');
console.log(tmpaddr);
geocoder.addressSearch(tmpaddr[0], function(result, status) {
if (status === daum.maps.services.Status.OK) {
var coords = new daum.maps.LatLng(result[0].y, result[0].x);
var marker = new daum.maps.Marker({
position: coords,
clickable: true});
// 마커를 지도에 표시합니다.
marker.setMap(map);
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">' + addr[1] + '</div>',
removable : true
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);
});
}
});
});
// for (var i = 0; i < positions.length; i ++) {
// // 마커를 생성합니다
// var marker = new kakao.maps.Marker({
// map: map, // 마커를 표시할 지도
// position: positions[i].latlng // 마커의 위치
// });
// // 마커에 표시할 인포윈도우를 생성합니다
// var infowindow = new kakao.maps.InfoWindow({
// content: positions[i].content // 인포윈도우에 표시할 내용
// });
// // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// // 이벤트 리스너로는 클로저를 만들어 등록합니다
// // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
// kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
// kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
// }
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
</script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
var positions = [
{
content: '<div>카카오</div>',
latlng: new kakao.maps.LatLng(33.450705, 126.570677)
},
{
content: '<div>생태연못</div>',
latlng: new kakao.maps.LatLng(33.450936, 126.569477)
},
{
content: '<div>텃밭</div>',
latlng: new kakao.maps.LatLng(33.450879, 126.569940)
},
{
content: '<div>근린공원</div>',
latlng: new kakao.maps.LatLng(33.451393, 126.570738)
}
];
for (var i = 0; i < positions.length; i ++) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng // 마커의 위치
});
// 마커에 표시할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: positions[i].content // 인포윈도우에 표시할 내용
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>백신 접종 가능기관</title>
</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>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
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 marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">기관명</div>'
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
geocoder.addressSearch('서울특별시 동대문구 회기로 173', function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">기관명</div>'
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
</script>
</body>
</html>
\ No newline at end of file
......@@ -9,8 +9,10 @@
"author": "",
"license": "ISC",
"dependencies": {
"@google/maps": "^1.1.3",
"body-parser": "^1.19.0",
"cheerio": "^1.0.0-rc.9",
"ejs": "^3.1.6",
"express": "^4.17.1",
"pug": "^3.0.2",
"request": "^2.88.2",
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>여러개 마커에 이벤트 등록하기1</title>
</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>
<% if(typeof(result) != "undefined"){ %>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
level: 5 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
var listData = "<%= result %>";
listData = listData.replaceAll('&#34;','\"');
listData = JSON.parse(listData);
var count = 0;
//입력되는 배열명이 listData로 들어오면 됨.
listData.forEach(function(addr, index) {
var tmpaddr = ((addr.orgZipaddr).split(','))[0];
console.log(tmpaddr);
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);
count += 1;
var marker = new kakao.maps.Marker({
position: coords,
clickable: true});
// 마커를 지도에 표시합니다.
marker.setMap(map);
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">' + '기관명:' + addr.orgnm + '</div>',
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
if(count == 1){
map.setCenter(coords);
}
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
//console.log(listData.length);
}
});
});
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
</script>
<% } %>
</body>
</html>
\ No newline at end of file
html
head
meta(charset='utf-8')
body
form(action='/search' method="post")
p
input(type='text' name='region' placeholder='지역')
p
input(type='submit')
\ No newline at end of file
//- html
//- head
//- meta(charset='utf-8')
//- body
//- h1 COVID-19 의료기관 검색하기
//- form(action='/' method="post")
//- p
//- input(type='text' name='region' placeholder='서울시')
//- input(type='submit')
//- //result값 있을때만
//- if result!=NULL
//- table
//- tr
//- th 기관명
//- th 기관 전화번호
//- th 기관 주소
//- th 휴무일 여부
//- th 점심 시작시간
//- th 점심 종료시간
//- th 진료 시작기간
//- th 진료 종료시간
//- -for(i=1; i<result.length; i++)
//- tr
//- td= result[i].orgnm
//- td= result[i].orgTlno
//- td= result[i].orgZipaddr
//- td= result[i].hldyYn
//- td= result[i].lunchSttTm
//- td= result[i].lunchEndTm
//- td= result[i].sttTm
//- td= result[i].endTm
\ No newline at end of file
......