김서연 / Corona_Vaccination_Medical_Institution

Go to a project
Toggle navigation Toggle navigation pinning
김서연
4504eed3 2 parents 9013e959 d086c5fa

Merge branch 'integrated#3_ksy' into 'master' 

Integrated#3 ksy



See merge request !16
Inline Side-by-side
Showing 6 changed files with 80 additions and 310 deletions
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Open index.ejs",
"file": "c:\\Users\\KSY\\Desktop\\4-1\\OpenSource\\Project\\views\\index.ejs"
}
]
}
\ No newline at end of file
......@@ -78,10 +78,9 @@ app.post('/',function(req,res,next){
eachtime.push('');
else
eachtime.push(searchList[i].endTm.substr(2,2));
if(eachtime == null)
eachtime.push('');
else
timeList.push(eachtime);
timeList.push(eachtime);
}
res.render('index', {result:JSON.stringify(searchList),info:searchList ,timeList:timeList});
......
<!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
......@@ -2,10 +2,18 @@
<html>
<head>
<meta charset="utf-8">
<title>여러개 마커에 이벤트 등록하기1</title>
<title>코로나 백신 의료기관 조회</title>
<!-- <link rel="stylesheet" href="/css/master.css"> -->
<%if(typeof(info)!="undefined"){%>
<script>
try {
if('<%=info%>'.length==0) throw new error();
} catch (error) {
alert("해당 지역 주변에 가능한 의료기관이 존재하지 않습니다.");
location.href='/';
}
</script>
<% }%>
</head>
<body>
<center>
......@@ -21,25 +29,38 @@
</p>
</form>
</center>
<div id="map" style="width:1300px;height:750px; margin-left:100px; float:left; " ></div>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
<% if(typeof(info) != "undefined"){ %>
<div style="overflow:scroll; width:500px; height:675px; padding:10px;float:right; margin-right:70px; border:1px solid black;">
<ol id="placelist">
<ol id="placelist">
<% for(i=0; i<info.length; i++){%>
<li class="item">
<div class="info">
<span><strong><%= info[i].orgnm%></strong></span><br>
<span>점심시간 : <%=timeList[i][0]%>:<%=timeList[i][1]%>~<%=timeList[i][2]%>:<%=timeList[i][3] %></span><br>
<span>진료시간 : <%=timeList[i][4]%>:<%=timeList[i][5]%>~<%=timeList[i][6]%>:<%=timeList[i][7] %></span><br>
<div class="info" onmouseover="displayinfowindow('<%=info[i].orgZipaddr%>', '<%=info[i].orgnm%>', true)" onmouseout="displayinfowindow('<%=info[i].orgZipaddr%>', '<%=info[i].orgnm%>', false)">
<span><strong><%= info[i].orgnm%></strong></span>
<%if(info[i].hldyYn=='N') {%>
<span style="color:red"> (당일 휴무) </span>
<%}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>
<%}%>
<% if(timeList[i][4]!="" && timeList[i][5]!="" && timeList[i][6]!="" && timeList[i][7]!=""){%>
<span>진료시간 : <%=timeList[i][4]%>:<%=timeList[i][5]%>~<%=timeList[i][6]%>:<%=timeList[i][7] %></span><br>
<%}%>
<span style="color:gray" class="jibun gray"><%=info[i].orgZipaddr%></span><br>
<span style="color:blue" class="tel"><%=info[i].orgTlno%></span><br>
</div>
<hr>
</li>
<%} %>
</ul>
</ol>
</div>
<%} %>
......@@ -75,15 +96,14 @@
var marker = new kakao.maps.Marker({
position: coords,
clickable: true});
clickable: true
});
// 마커를 지도에 표시합니다.
marker.setMap(map);
marker.setMap(map);
var num=1;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:250px;text-align:center;padding:5px 0;">' + addr.orgnm + '</div>',
content: '<div style="width:250px;text-align:center;padding:5px 0;">' + addr.orgnm + '</div>',
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
......@@ -103,15 +123,41 @@
infowindow.open(map, marker);
};
}
var infowindows = [];
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
var infowindows = [];
function displayinfowindow(address,name,flag){
if(flag){
var tmpaddr = (address.split(','))[0];
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);
var marker = new kakao.maps.Marker({
position: coords,
clickable: true
});
infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:250px;text-align:center;padding:5px 0;">' + name + '</div>',
});
infowindows.push(infowindow);
infowindow.open(map, marker);
}
});
}
else{
for(var i = 0; i<infowindows.length;i++)
infowindows[i].close();
infowindows = [];
}
}
</script>
<% } %>
</body>
</html>
\ 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