김서연 / Corona_Vaccination_Medical_Institution

Go to a project
Toggle navigation Toggle navigation pinning
김서연
d086c5fa 2 parents 88e95f1c 0ce2840f

merge conflict 해결

Inline Side-by-side
Showing 2 changed files with 32 additions and 177 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
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title>코로나 백신 의료기관 조회</title> 5 <title>코로나 백신 의료기관 조회</title>
6 -
7 <!-- <link rel="stylesheet" href="/css/master.css"> --> 6 <!-- <link rel="stylesheet" href="/css/master.css"> -->
8 <%if(typeof(info)!="undefined"){%> 7 <%if(typeof(info)!="undefined"){%>
9 <script> 8 <script>
...@@ -40,7 +39,7 @@ ...@@ -40,7 +39,7 @@
40 <ol id="placelist"> 39 <ol id="placelist">
41 <% for(i=0; i<info.length; i++){%> 40 <% for(i=0; i<info.length; i++){%>
42 <li class="item"> 41 <li class="item">
43 - <div class="info"> 42 + <div class="info" onmouseover="displayinfowindow('<%=info[i].orgZipaddr%>', '<%=info[i].orgnm%>', true)" onmouseout="displayinfowindow('<%=info[i].orgZipaddr%>', '<%=info[i].orgnm%>', false)">
44 <span><strong><%= info[i].orgnm%></strong></span> 43 <span><strong><%= info[i].orgnm%></strong></span>
45 <%if(info[i].hldyYn=='N') {%> 44 <%if(info[i].hldyYn=='N') {%>
46 <span style="color:red"> (당일 휴무) </span> 45 <span style="color:red"> (당일 휴무) </span>
...@@ -66,7 +65,6 @@ ...@@ -66,7 +65,6 @@
66 <%} %> 65 <%} %>
67 66
68 <% if(typeof(result) != "undefined"){ %> 67 <% if(typeof(result) != "undefined"){ %>
69 -
70 <script> 68 <script>
71 var mapContainer = document.getElementById('map'), // 지도를 표시할 div 69 var mapContainer = document.getElementById('map'), // 지도를 표시할 div
72 mapOption = { 70 mapOption = {
...@@ -98,11 +96,10 @@ ...@@ -98,11 +96,10 @@
98 96
99 var marker = new kakao.maps.Marker({ 97 var marker = new kakao.maps.Marker({
100 position: coords, 98 position: coords,
101 - clickable: true}); 99 + clickable: true
102 - 100 + });
103 // 마커를 지도에 표시합니다. 101 // 마커를 지도에 표시합니다.
104 marker.setMap(map); 102 marker.setMap(map);
105 -
106 var num=1; 103 var num=1;
107 // 인포윈도우를 생성합니다 104 // 인포윈도우를 생성합니다
108 var infowindow = new kakao.maps.InfoWindow({ 105 var infowindow = new kakao.maps.InfoWindow({
...@@ -126,15 +123,41 @@ ...@@ -126,15 +123,41 @@
126 infowindow.open(map, marker); 123 infowindow.open(map, marker);
127 }; 124 };
128 } 125 }
129 - 126 + var infowindows = [];
130 // 인포윈도우를 닫는 클로저를 만드는 함수입니다 127 // 인포윈도우를 닫는 클로저를 만드는 함수입니다
131 function makeOutListener(infowindow) { 128 function makeOutListener(infowindow) {
132 return function() { 129 return function() {
133 infowindow.close(); 130 infowindow.close();
134 }; 131 };
135 } 132 }
136 - </script>
137 - <% } %>
138 133
134 + var infowindows = [];
135 + function displayinfowindow(address,name,flag){
136 + if(flag){
137 + var tmpaddr = (address.split(','))[0];
138 + geocoder.addressSearch(tmpaddr, function(result, status) {
139 + if (status === kakao.maps.services.Status.OK) {
140 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
141 + map.setCenter(coords);
142 + var marker = new kakao.maps.Marker({
143 + position: coords,
144 + clickable: true
145 + });
146 + infowindow = new kakao.maps.InfoWindow({
147 + content: '<div style="width:250px;text-align:center;padding:5px 0;">' + name + '</div>',
148 + });
149 + infowindows.push(infowindow);
150 + infowindow.open(map, marker);
151 + }
152 + });
153 + }
154 + else{
155 + for(var i = 0; i<infowindows.length;i++)
156 + infowindows[i].close();
157 + infowindows = [];
158 + }
159 + }
160 + </script>
161 +<% } %>
139 </body> 162 </body>
140 </html> 163 </html>
...\ No newline at end of file ...\ No newline at end of file
......