김서연 / Corona_Vaccination_Medical_Institution

Go to a project
Toggle navigation Toggle navigation pinning
Heo
63384b1a 2 parents 1bc1479b d661f6b2

충돌 수정

Inline Side-by-side
Showing 3 changed files with 200 additions and 31 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
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
17 17
18 <div id="map" style="width:700px;height:400px;"></div> 18 <div id="map" style="width:700px;height:400px;"></div>
19 <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script> 19 <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
20 +
20 <% if(typeof(result) != "undefined"){ %> 21 <% if(typeof(result) != "undefined"){ %>
21 <script> 22 <script>
22 var mapContainer = document.getElementById('map'), // 지도를 표시할 div 23 var mapContainer = document.getElementById('map'), // 지도를 표시할 div
......
1 -html 1 +//- html
2 - head 2 +//- head
3 - meta(charset='utf-8') 3 +//- meta(charset='utf-8')
4 - body 4 +//- body
5 - h1 COVID-19 의료기관 검색하기 5 +//- h1 COVID-19 의료기관 검색하기
6 6
7 - form(action='/' method="post") 7 +//- form(action='/' method="post")
8 - p 8 +//- p
9 - input(type='text' name='region' placeholder='서울시') 9 +//- input(type='text' name='region' placeholder='서울시')
10 - input(type='submit') 10 +//- input(type='submit')
11 11
12 - //result값 있을때만 12 +//- //result값 있을때만
13 - if result!=NULL 13 +//- if result!=NULL
14 - table 14 +//- table
15 - tr 15 +//- tr
16 - th 기관명 16 +//- th 기관명
17 - th 기관 전화번호 17 +//- th 기관 전화번호
18 - th 기관 주소 18 +//- th 기관 주소
19 - th 휴무일 여부 19 +//- th 휴무일 여부
20 - th 점심 시작시간 20 +//- th 점심 시작시간
21 - th 점심 종료시간 21 +//- th 점심 종료시간
22 - th 진료 시작기간 22 +//- th 진료 시작기간
23 - th 진료 종료시간 23 +//- th 진료 종료시간
24 - -for(i=1; i<result.length; i++) 24 +//- -for(i=1; i<result.length; i++)
25 - tr 25 +//- tr
26 - td= result[i].orgnm 26 +//- td= result[i].orgnm
27 - td= result[i].orgTlno 27 +//- td= result[i].orgTlno
28 - td= result[i].orgZipaddr 28 +//- td= result[i].orgZipaddr
29 - td= result[i].hldyYn 29 +//- td= result[i].hldyYn
30 - td= result[i].lunchSttTm 30 +//- td= result[i].lunchSttTm
31 - td= result[i].lunchEndTm 31 +//- td= result[i].lunchEndTm
32 - td= result[i].sttTm 32 +//- td= result[i].sttTm
33 - td= result[i].endTm 33 +//- td= result[i].endTm
34 34
35 35
36 36
......