김서연 / Corona_Vaccination_Medical_Institution

Go to a project
Toggle navigation Toggle navigation pinning
김서연
2f0b5db2 2 parents 04a5c772 8f421cae

지도 띄우는 방법 추가수정

Inline Side-by-side
Showing 3 changed files with 71 additions and 22 deletions
## Topic
> 코로나 19 예방접종 의료기관 조회 웹서비스를 제공하는 프로젝트입니다.
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
## 🔍 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) |
......
......@@ -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!');
});
......
......@@ -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"){ %>
<div id="map" style="width:65%;height:550px;float:left; margin-left: 2%; border-radius: 2%; border:1px solid black" ></div>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
<% 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
......