김서연 / 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 35 additions and 294 deletions
1 -<!DOCTYPE html>
2 -<html>
3 -<head>
4 - <meta charset="utf-8">
5 - <title>여러개 마커에 이벤트 등록하기1</title>
6 -
7 -</head>
8 -<body>
9 - <h1>COVID-19 의료기관 검색하기</h1>
10 - <form action="/" method="post">
11 - <p>
12 - <input type="text" name="region" placeholder="서울시"/>
13 - <input type="submit"/>
14 - </p>
15 - </form>
16 - <div id="map" style="width:700px;height:400px;"></div>
17 -
18 - <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988"></script>
19 -
20 -
21 -<script>
22 -var mapContainer = document.getElementById('map'), // 지도를 표시할 div
23 - mapOption = {
24 - center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
25 - level: 3 // 지도의 확대 레벨
26 - };
27 -
28 -var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
29 -
30 -
31 -
32 -// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
33 -var zoomControl = new kakao.maps.ZoomControl();
34 -map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
35 -
36 -var listData = "<%= result %>";
37 -console.log(listData[1]);
38 -//입력되는 배열명이 listData로 들어오면 됨.
39 -listData.forEach(function(addr, index) {
40 - var tmpaddr = addr[0].split(',');
41 - console.log(tmpaddr);
42 - geocoder.addressSearch(tmpaddr[0], function(result, status) {
43 - if (status === daum.maps.services.Status.OK) {
44 - var coords = new daum.maps.LatLng(result[0].y, result[0].x);
45 -
46 - var marker = new daum.maps.Marker({
47 - position: coords,
48 - clickable: true});
49 -
50 - // 마커를 지도에 표시합니다.
51 - marker.setMap(map);
52 -
53 - // 인포윈도우를 생성합니다
54 - var infowindow = new kakao.maps.InfoWindow({
55 - content: '<div style="width:150px;text-align:center;padding:6px 0;">' + addr[1] + '</div>',
56 - removable : true
57 - });
58 - // 마커에 클릭이벤트를 등록합니다
59 - kakao.maps.event.addListener(marker, 'click', function() {
60 - // 마커 위에 인포윈도우를 표시합니다
61 - infowindow.open(map, marker);
62 - });
63 - }
64 - });
65 -
66 -});
67 -
68 -
69 -
70 -
71 -// for (var i = 0; i < positions.length; i ++) {
72 -// // 마커를 생성합니다
73 -// var marker = new kakao.maps.Marker({
74 -// map: map, // 마커를 표시할 지도
75 -// position: positions[i].latlng // 마커의 위치
76 -// });
77 -
78 -// // 마커에 표시할 인포윈도우를 생성합니다
79 -// var infowindow = new kakao.maps.InfoWindow({
80 -// content: positions[i].content // 인포윈도우에 표시할 내용
81 -// });
82 -
83 -// // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
84 -// // 이벤트 리스너로는 클로저를 만들어 등록합니다
85 -// // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
86 -// kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
87 -// kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
88 -// }
89 -
90 -// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
91 -function makeOverListener(map, marker, infowindow) {
92 - return function() {
93 - infowindow.open(map, marker);
94 - };
95 -}
96 -
97 -// 인포윈도우를 닫는 클로저를 만드는 함수입니다
98 -function makeOutListener(infowindow) {
99 - return function() {
100 - infowindow.close();
101 - };
102 -}
103 -</script>
104 -
105 - <script>
106 - var mapContainer = document.getElementById('map'), // 지도를 표시할 div
107 - mapOption = {
108 - center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
109 - level: 3 // 지도의 확대 레벨
110 - };
111 -
112 - var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
113 -
114 - // 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
115 - var positions = [
116 - {
117 - content: '<div>카카오</div>',
118 - latlng: new kakao.maps.LatLng(33.450705, 126.570677)
119 - },
120 - {
121 - content: '<div>생태연못</div>',
122 - latlng: new kakao.maps.LatLng(33.450936, 126.569477)
123 - },
124 - {
125 - content: '<div>텃밭</div>',
126 - latlng: new kakao.maps.LatLng(33.450879, 126.569940)
127 - },
128 - {
129 - content: '<div>근린공원</div>',
130 - latlng: new kakao.maps.LatLng(33.451393, 126.570738)
131 - }
132 - ];
133 -
134 - for (var i = 0; i < positions.length; i ++) {
135 - // 마커를 생성합니다
136 - var marker = new kakao.maps.Marker({
137 - map: map, // 마커를 표시할 지도
138 - position: positions[i].latlng // 마커의 위치
139 - });
140 -
141 - // 마커에 표시할 인포윈도우를 생성합니다
142 - var infowindow = new kakao.maps.InfoWindow({
143 - content: positions[i].content // 인포윈도우에 표시할 내용
144 - });
145 -
146 - // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
147 - // 이벤트 리스너로는 클로저를 만들어 등록합니다
148 - // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
149 - kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
150 - kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
151 - }
152 -
153 - // 인포윈도우를 표시하는 클로저를 만드는 함수입니다
154 - function makeOverListener(map, marker, infowindow) {
155 - return function() {
156 - infowindow.open(map, marker);
157 - };
158 - }
159 -
160 - // 인포윈도우를 닫는 클로저를 만드는 함수입니다
161 - function makeOutListener(infowindow) {
162 - return function() {
163 - infowindow.close();
164 - };
165 - }
166 - </script>
167 -</body>
168 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html>
3 -<head>
4 - <meta charset="utf-8">
5 - <title>백신 접종 가능기관</title>
6 -
7 -</head>
8 -<body>
9 -
10 -
11 - <h1>COVID-19 의료기관 검색하기</h1>
12 - <form action="/" method="post">
13 - <p>
14 - <input type="text" name="region" placeholder="서울시"/>
15 - <input type="submit"/>
16 - </p>
17 - </form>
18 -
19 - <div id="map" style="width: 700px;height:400px;"></div>
20 - <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
21 - <script>
22 - var mapContainer = document.getElementById('map'), // 지도를 표시할 div
23 - mapOption = {
24 - center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
25 - level: 3 // 지도의 확대 레벨
26 - };
27 -
28 - // 지도를 생성합니다
29 - var map = new kakao.maps.Map(mapContainer, mapOption);
30 -
31 - // 주소-좌표 변환 객체를 생성합니다
32 - var geocoder = new kakao.maps.services.Geocoder();
33 -
34 - // 주소로 좌표를 검색합니다
35 - geocoder.addressSearch('서울특별시 강동구 올림픽로 779', function(result, status) {
36 -
37 - // 정상적으로 검색이 완료됐으면
38 - if (status === kakao.maps.services.Status.OK) {
39 -
40 - var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
41 -
42 - // 결과값으로 받은 위치를 마커로 표시합니다
43 - var marker = new kakao.maps.Marker({
44 - map: map,
45 - position: coords
46 - });
47 -
48 - // 인포윈도우로 장소에 대한 설명을 표시합니다
49 - var infowindow = new kakao.maps.InfoWindow({
50 - content: '<div style="width:150px;text-align:center;padding:6px 0;">기관명</div>'
51 - });
52 - infowindow.open(map, marker);
53 -
54 - // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
55 - map.setCenter(coords);
56 - }
57 - });
58 - geocoder.addressSearch('서울특별시 동대문구 회기로 173', function(result, status) {
59 -
60 - // 정상적으로 검색이 완료됐으면
61 - if (status === kakao.maps.services.Status.OK) {
62 -
63 - var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
64 -
65 - // 결과값으로 받은 위치를 마커로 표시합니다
66 - var marker = new kakao.maps.Marker({
67 - map: map,
68 - position: coords
69 - });
70 -
71 - // 인포윈도우로 장소에 대한 설명을 표시합니다
72 - var infowindow = new kakao.maps.InfoWindow({
73 - content: '<div style="width:150px;text-align:center;padding:6px 0;">기관명</div>'
74 - });
75 - infowindow.open(map, marker);
76 -
77 - // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
78 - map.setCenter(coords);
79 - }
80 - });
81 - </script>
82 -</body>
83 -</html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <html> 2 <html>
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 - <title>여러개 마커에 이벤트 등록하기1</title> 5 + <title>코로나백신 의료기관 조회</title>
6 6
7 <!-- <link rel="stylesheet" href="/css/master.css"> --> 7 <!-- <link rel="stylesheet" href="/css/master.css"> -->
8 8
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
29 <ol id="placelist"> 29 <ol id="placelist">
30 <% for(i=0; i<info.length; i++){%> 30 <% for(i=0; i<info.length; i++){%>
31 <li class="item"> 31 <li class="item">
32 - <div class="info"> 32 + <div class="info" onmouseover="displayinfowindow('<%=info[i].orgZipaddr%>', '<%=info[i].orgnm%>', true)" onmouseout="displayinfowindow('<%=info[i].orgZipaddr%>', '<%=info[i].orgnm%>', false)" >
33 <span><strong><%= info[i].orgnm%></strong></span><br> 33 <span><strong><%= info[i].orgnm%></strong></span><br>
34 <span>점심시간 : <%=timeList[i][0]%>:<%=timeList[i][1]%>~<%=timeList[i][2]%>:<%=timeList[i][3] %></span><br> 34 <span>점심시간 : <%=timeList[i][0]%>:<%=timeList[i][1]%>~<%=timeList[i][2]%>:<%=timeList[i][3] %></span><br>
35 <span>진료시간 : <%=timeList[i][4]%>:<%=timeList[i][5]%>~<%=timeList[i][6]%>:<%=timeList[i][7] %></span><br> 35 <span>진료시간 : <%=timeList[i][4]%>:<%=timeList[i][5]%>~<%=timeList[i][6]%>:<%=timeList[i][7] %></span><br>
...@@ -75,7 +75,9 @@ ...@@ -75,7 +75,9 @@
75 75
76 var marker = new kakao.maps.Marker({ 76 var marker = new kakao.maps.Marker({
77 position: coords, 77 position: coords,
78 - clickable: true}); 78 + clickable: true
79 + });
80 +
79 81
80 // 마커를 지도에 표시합니다. 82 // 마커를 지도에 표시합니다.
81 marker.setMap(map); 83 marker.setMap(map);
...@@ -83,7 +85,7 @@ ...@@ -83,7 +85,7 @@
83 var num=1; 85 var num=1;
84 // 인포윈도우를 생성합니다 86 // 인포윈도우를 생성합니다
85 var infowindow = new kakao.maps.InfoWindow({ 87 var infowindow = new kakao.maps.InfoWindow({
86 - content: '<div style="width:250px;text-align:center;padding:5px 0;">' + addr.orgnm + '</div>', 88 + content: '<div style="width:250px;text-align:center;padding:5px 0;">' + addr.orgnm + '</div>',
87 }); 89 });
88 // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다 90 // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
89 // 이벤트 리스너로는 클로저를 만들어 등록합니다 91 // 이벤트 리스너로는 클로저를 만들어 등록합니다
...@@ -92,6 +94,7 @@ ...@@ -92,6 +94,7 @@
92 if(count == 1){ 94 if(count == 1){
93 map.setCenter(coords); 95 map.setCenter(coords);
94 } 96 }
97 +
95 // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다 98 // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
96 //console.log(listData.length); 99 //console.log(listData.length);
97 } 100 }
...@@ -103,13 +106,40 @@ ...@@ -103,13 +106,40 @@
103 infowindow.open(map, marker); 106 infowindow.open(map, marker);
104 }; 107 };
105 } 108 }
106 - 109 + var infowindows = [];
107 // 인포윈도우를 닫는 클로저를 만드는 함수입니다 110 // 인포윈도우를 닫는 클로저를 만드는 함수입니다
108 function makeOutListener(infowindow) { 111 function makeOutListener(infowindow) {
109 return function() { 112 return function() {
110 infowindow.close(); 113 infowindow.close();
111 }; 114 };
112 } 115 }
116 +
117 + var infowindows = [];
118 + function displayinfowindow(address,name,flag){
119 + if(flag){
120 + var tmpaddr = (address.split(','))[0];
121 + geocoder.addressSearch(tmpaddr, function(result, status) {
122 + if (status === kakao.maps.services.Status.OK) {
123 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
124 + map.setCenter(coords);
125 + var marker = new kakao.maps.Marker({
126 + position: coords,
127 + clickable: true
128 + });
129 + infowindow = new kakao.maps.InfoWindow({
130 + content: '<div style="width:250px;text-align:center;padding:5px 0;">' + name + '</div>',
131 + });
132 + infowindows.push(infowindow);
133 + infowindow.open(map, marker);
134 + }
135 + });
136 + }
137 + else{
138 + for(var i = 0; i<infowindows.length;i++)
139 + infowindows[i].close();
140 + infowindows = [];
141 + }
142 + }
113 </script> 143 </script>
114 <% } %> 144 <% } %>
115 145
......
1 -//- html
2 -//- head
3 -//- meta(charset='utf-8')
4 -//- body
5 -//- h1 COVID-19 의료기관 검색하기
6 -
7 -//- form(action='/' method="post")
8 -//- p
9 -//- input(type='text' name='region' placeholder='서울시')
10 -//- input(type='submit')
11 -
12 -//- //result값 있을때만
13 -//- if result!=NULL
14 -//- table
15 -//- tr
16 -//- th 기관명
17 -//- th 기관 전화번호
18 -//- th 기관 주소
19 -//- th 휴무일 여부
20 -//- th 점심 시작시간
21 -//- th 점심 종료시간
22 -//- th 진료 시작기간
23 -//- th 진료 종료시간
24 -//- -for(i=1; i<result.length; i++)
25 -//- tr
26 -//- td= result[i].orgnm
27 -//- td= result[i].orgTlno
28 -//- td= result[i].orgZipaddr
29 -//- td= result[i].hldyYn
30 -//- td= result[i].lunchSttTm
31 -//- td= result[i].lunchEndTm
32 -//- td= result[i].sttTm
33 -//- td= result[i].endTm
34 -
35 -
36 -
37 -
38 -
...\ No newline at end of file ...\ No newline at end of file