김서연 / Corona_Vaccination_Medical_Institution

Go to a project
Toggle navigation Toggle navigation pinning
Heo
0ce2840f 1 parent 9013e959

마우스 이벤트 추가

Inline Side-by-side
Showing 4 changed files with 34 additions and 293 deletions
<!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,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>여러개 마커에 이벤트 등록하기1</title>
<title>코로나백신 의료기관 조회</title>
<!-- <link rel="stylesheet" href="/css/master.css"> -->
......@@ -29,7 +29,7 @@
<ol id="placelist">
<% for(i=0; i<info.length; i++){%>
<li class="item">
<div class="info">
<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><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>
......@@ -75,7 +75,9 @@
var marker = new kakao.maps.Marker({
position: coords,
clickable: true});
clickable: true
});
// 마커를 지도에 표시합니다.
marker.setMap(map);
......@@ -92,6 +94,7 @@
if(count == 1){
map.setCenter(coords);
}
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
//console.log(listData.length);
}
......@@ -103,13 +106,40 @@
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>
<% } %>
......
//- 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