김서연 / 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 91 additions and 236 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,75 +65,99 @@ ...@@ -66,75 +65,99 @@
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 = {
73 - center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표 71 + center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
74 - level: 2 // 지도의 확대 레벨 72 + level: 2 // 지도의 확대 레벨
75 - }; 73 + };
76 - 74 +
77 - var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다 75 + var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
78 - var geocoder = new kakao.maps.services.Geocoder(); 76 + var geocoder = new kakao.maps.services.Geocoder();
79 - // 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다 77 + // 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
80 - var zoomControl = new kakao.maps.ZoomControl(); 78 + var zoomControl = new kakao.maps.ZoomControl();
81 - map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT); 79 + map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
82 - 80 +
83 - var listData = "<%= result %>"; 81 + var listData = "<%= result %>";
84 - listData = listData.replaceAll('&#34;','\"'); 82 + listData = listData.replaceAll('&#34;','\"');
85 - listData = JSON.parse(listData); 83 + listData = JSON.parse(listData);
86 - 84 +
87 - var count = 0; 85 + var count = 0;
88 - 86 +
89 - //입력되는 배열명이 listData로 들어오면 됨. 87 + //입력되는 배열명이 listData로 들어오면 됨.
90 - listData.forEach(function(addr, index) { 88 + listData.forEach(function(addr, index) {
91 - var tmpaddr = ((addr.orgZipaddr).split(','))[0]; 89 + var tmpaddr = ((addr.orgZipaddr).split(','))[0];
92 - console.log(tmpaddr); 90 + console.log(tmpaddr);
93 - geocoder.addressSearch(tmpaddr, function(result, status) { 91 + geocoder.addressSearch(tmpaddr, function(result, status) {
94 - if (status === kakao.maps.services.Status.OK) { 92 + if (status === kakao.maps.services.Status.OK) {
95 - var coords = new kakao.maps.LatLng(result[0].y, result[0].x); 93 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
96 - 94 +
97 - count += 1; 95 + count += 1;
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 - 103 + var num=1;
106 - var num=1; 104 + // 인포윈도우를 생성합니다
107 - // 인포윈도우를 생성합니다 105 + var infowindow = new kakao.maps.InfoWindow({
108 - var infowindow = new kakao.maps.InfoWindow({ 106 + content: '<div style="width:250px;text-align:center;padding:5px 0;">' + addr.orgnm + '</div>',
109 - content: '<div style="width:250px;text-align:center;padding:5px 0;">' + addr.orgnm + '</div>', 107 + });
110 - }); 108 + // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
111 - // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다 109 + // 이벤트 리스너로는 클로저를 만들어 등록합니다
112 - // 이벤트 리스너로는 클로저를 만들어 등록합니다 110 + kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
113 - kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow)); 111 + kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
114 - kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow)); 112 + if(count == 1){
115 - if(count == 1){ 113 + map.setCenter(coords);
116 - map.setCenter(coords); 114 + }
117 - } 115 + // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
118 - // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다 116 + //console.log(listData.length);
119 - //console.log(listData.length); 117 + }
120 - } 118 + });
121 - }); 119 + });
122 - }); 120 + // 인포윈도우를 표시하는 클로저를 만드는 함수입니다
123 - // 인포윈도우를 표시하는 클로저를 만드는 함수입니다 121 + function makeOverListener(map, marker, infowindow) {
124 - function makeOverListener(map, marker, infowindow) { 122 + return function() {
125 - return function() { 123 + infowindow.open(map, marker);
126 - infowindow.open(map, marker); 124 + };
127 - }; 125 + }
126 + var infowindows = [];
127 + // 인포윈도우를 닫는 클로저를 만드는 함수입니다
128 + function makeOutListener(infowindow) {
129 + return function() {
130 + infowindow.close();
131 + };
132 + }
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 + });
128 } 153 }
129 - 154 + else{
130 - // 인포윈도우를 닫는 클로저를 만드는 함수입니다 155 + for(var i = 0; i<infowindows.length;i++)
131 - function makeOutListener(infowindow) { 156 + infowindows[i].close();
132 - return function() { 157 + infowindows = [];
133 - infowindow.close();
134 - };
135 } 158 }
136 - </script> 159 + }
137 - <% } %> 160 + </script>
138 - 161 +<% } %>
139 </body> 162 </body>
140 </html> 163 </html>
...\ No newline at end of file ...\ No newline at end of file
......