김서연 / Corona_Vaccination_Medical_Institution

Go to a project
Toggle navigation Toggle navigation pinning
김서연
94b4f4db 2 parents 3885fe46 d1ad0633

UI변경

Inline Side-by-side
Showing 4 changed files with 74 additions and 32 deletions
## Topic
> 코로나 19 예방접종 의료기관 조회 웹서비스를 제공하는 프로젝트입니다.
~~~
# 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_이름
~~~
## Member
| 김서연 | 허정용 |
| :----: | :----: |
| [@ksy991018](https://github.com/ksy991018) | [@JeongYougHeo](https://github.com/JeongYougHeo) |
......
......@@ -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');
})
......
......@@ -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>
......
......@@ -6,23 +6,56 @@
</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
<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 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 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) {
......@@ -44,7 +77,7 @@ geocoder.addressSearch('경희대로26', function(result, status) {
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
</script>
});
</script>
</body>
</html>
\ No newline at end of file
......