김민규 / rest_stop_list

Go to a project
Toggle navigation Toggle navigation pinning
지창언
556f319c 1 parent fdd287fa

map api infowindow updated

Inline Side-by-side
Showing 1 changed file with 89 additions and 87 deletions
...@@ -15,7 +15,18 @@ ...@@ -15,7 +15,18 @@
15 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c71c02e15245260c3350614980ba87c8&libraries=services,clusterer,drawing"></script> 15 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c71c02e15245260c3350614980ba87c8&libraries=services,clusterer,drawing"></script>
16 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 16 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
17 <script> 17 <script>
18 + function makeOverListener(map, marker, infowindow) {
19 + return function() {
20 + infowindow.open(map, marker);
21 + };
22 + }
18 23
24 + // 인포윈도우를 닫는 클로저를 만드는 함수입니다
25 + function makeOutListener(infowindow) {
26 + return function() {
27 + infowindow.close();
28 + };
29 + }
19 // 고속도로 선택 함수 30 // 고속도로 선택 함수
20 function showline(lineNumber){ 31 function showline(lineNumber){
21 // 이 위치에 이전에 켜져있는 map을 지우는 기능 넣어야해 ... 32 // 이 위치에 이전에 켜져있는 map을 지우는 기능 넣어야해 ...
...@@ -54,13 +65,14 @@ ...@@ -54,13 +65,14 @@
54 polyline.setMap(map) 65 polyline.setMap(map)
55 66
56 67
57 -
58 var userData; 68 var userData;
59 var markers = []; 69 var markers = [];
60 - 70 + var infos = [];
71 + var routeCodes = [];
72 + var svarAddrs = [];
73 + var rest_names = [];
61 // 1번 페이지 74 // 1번 페이지
62 $.ajax({ 75 $.ajax({
63 -
64 url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=1", 76 url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=1",
65 async:false, 77 async:false,
66 success: function(data){ 78 success: function(data){
...@@ -68,8 +80,6 @@ ...@@ -68,8 +80,6 @@
68 userData = data; 80 userData = data;
69 }, 81 },
70 }).done(function() { 82 }).done(function() {
71 - var infomations =[];
72 - var result_str="";
73 var routeCode = ""; 83 var routeCode = "";
74 var svarAddr = ""; 84 var svarAddr = "";
75 var rest_name = ""; 85 var rest_name = "";
...@@ -82,131 +92,123 @@ ...@@ -82,131 +92,123 @@
82 92
83 if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면 93 if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
84 94
95 + routeCodes.push(routeCode);
96 + svarAddrs.push(svarAddr);
97 + rest_names.push(rest_name);
85 var geocoder = new kakao.maps.services.Geocoder(); 98 var geocoder = new kakao.maps.services.Geocoder();
86 - // 주소로 좌표를 검색합니다
87 - geocoder.addressSearch(svarAddr, function(result, status) {
88 - // 정상적으로 검색이 완료됐으면
89 - if (status === kakao.maps.services.Status.OK) {
90 - //위치 저장
91 - var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
92 -
93 - var marker = new kakao.maps.Marker({
94 - position: coords,
95 - map: map
96 - });
97 - markers.push(marker); // markers 로 정상적 push 수행 안됨
98 - }
99 - });
100 99
101 } 100 }
102 } 101 }
102 + svarAddrs.forEach(function(addr,index){
103 + geocoder.addressSearch(addr,function(result,status){
104 + if(status === kakao.maps.services.Status.OK){
105 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
106 + var marker = new kakao.maps.Marker({
107 + position:coords,
108 + map:map,
103 }) 109 })
104 - setTimeout(() => { 110 + var infowindow = new kakao.maps.InfoWindow({
105 - alert(markers.length); 111 + content: rest_names[index],
106 - console.dir(markers); 112 + });
107 - }, 500); 113 + kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
114 + kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
108 } 115 }
116 + })
117 + })
118 + })
109 119
110 - /*
111 // 2번 페이지 120 // 2번 페이지
112 $.ajax({ 121 $.ajax({
113 url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=2", 122 url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=2",
123 + async:false,
114 success: function(data){ 124 success: function(data){
115 - var userData = JSON.stringify(data); 125 + //변수 설정
116 - var result_str=""; 126 + userData = data;
127 + },
128 + }).done(function() {
117 var routeCode = ""; 129 var routeCode = "";
118 var svarAddr = ""; 130 var svarAddr = "";
119 var rest_name = ""; 131 var rest_name = "";
120 - var count = data["list"].length; 132 + var data_count = userData["list"].length // 데이터 개수 얻기
121 133
122 - for (var i =0; i<count; i++){ 134 + for (var i =0; i<data_count; i++){
123 - routeCode = JSON.stringify(data["list"][i]["routeCode"]); 135 + routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
124 - svarAddr = JSON.stringify(data["list"][i]["svarAddr"]); 136 + svarAddr = JSON.stringify(userData["list"][i]["svarAddr"]);
125 - rest_name = JSON.stringify(data["list"][i]["serviceAreaName"]); 137 + rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]);
126 - var infowindow = new kakao.maps.InfoWindow({
127 - content: rest_name
128 - });
129 - if(routeCode.substring(1,5) === lineNumber){
130 - document.getElementById("testArea").innerHTML += routeCode.substring(1,5)+ " ";
131 - var geocoder = new kakao.maps.services.Geocoder();
132 138
133 - // 주소로 좌표를 검색합니다 139 + if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
134 - geocoder.addressSearch(svarAddr, function(result, status) {
135 140
136 - // 정상적으로 검색이 완료됐으면 141 + routeCodes.push(routeCode);
137 - if (status === kakao.maps.services.Status.OK) { 142 + svarAddrs.push(svarAddr);
143 + rest_names.push(rest_name);
144 + var geocoder = new kakao.maps.services.Geocoder();
138 145
146 + }
147 + }
148 + svarAddrs.forEach(function(addr,index){
149 + geocoder.addressSearch(addr,function(result,status){
150 + if(status === kakao.maps.services.Status.OK){
139 var coords = new kakao.maps.LatLng(result[0].y, result[0].x); 151 var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
140 - var temp = i
141 -
142 - // 결과값으로 받은 위치를 마커로 표시합니다
143 var marker = new kakao.maps.Marker({ 152 var marker = new kakao.maps.Marker({
144 - map: map, 153 + position:coords,
145 - position: coords, 154 + map:map,
155 + })
156 + var infowindow = new kakao.maps.InfoWindow({
157 + content: rest_names[index],
146 }); 158 });
147 -
148 - // 인포윈도우로 장소에 대한 설명을 표시합니다
149 kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow)); 159 kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
150 kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow)); 160 kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
151 - document.getElementById("position_ex").innerHTML = svarAddr;
152 -
153 - }
154 - });
155 } 161 }
156 -
157 - }
158 - },
159 }) 162 })
163 + })
164 + })
165 +
160 // 3번 페이지 166 // 3번 페이지
161 $.ajax({ 167 $.ajax({
162 url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=3", 168 url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=3",
169 + async:false,
163 success: function(data){ 170 success: function(data){
164 - var userData = JSON.stringify(data); 171 + //변수 설정
165 - var result_str=""; 172 + userData = data;
173 + },
174 + }).done(function() {
166 var routeCode = ""; 175 var routeCode = "";
167 var svarAddr = ""; 176 var svarAddr = "";
168 var rest_name = ""; 177 var rest_name = "";
169 - var count = data["list"].length; 178 + var data_count = userData["list"].length // 데이터 개수 얻기
170 179
171 - for (var i =0; i<count; i++){ 180 + for (var i =0; i<data_count; i++){
172 - routeCode = JSON.stringify(data["list"][i]["routeCode"]); 181 + routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
173 - svarAddr = JSON.stringify(data["list"][i]["svarAddr"]); 182 + svarAddr = JSON.stringify(userData["list"][i]["svarAddr"]);
174 - rest_name = JSON.stringify(data["list"][i]["serviceAreaName"]); 183 + rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]);
175 - var infowindow = new kakao.maps.InfoWindow({
176 - content: rest_name
177 - });
178 - if(routeCode.substring(1,5) === lineNumber){
179 - document.getElementById("testArea").innerHTML += routeCode.substring(1,5)+ " ";
180 - var geocoder = new kakao.maps.services.Geocoder();
181 184
182 - // 주소로 좌표를 검색합니다 185 + if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
183 - geocoder.addressSearch(svarAddr, function(result, status) {
184 186
185 - // 정상적으로 검색이 완료됐으면 187 + routeCodes.push(routeCode);
186 - if (status === kakao.maps.services.Status.OK) { 188 + svarAddrs.push(svarAddr);
189 + rest_names.push(rest_name);
190 + var geocoder = new kakao.maps.services.Geocoder();
187 191
192 + }
193 + }
194 + svarAddrs.forEach(function(addr,index){
195 + geocoder.addressSearch(addr,function(result,status){
196 + if(status === kakao.maps.services.Status.OK){
188 var coords = new kakao.maps.LatLng(result[0].y, result[0].x); 197 var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
189 - var temp = i
190 -
191 - // 결과값으로 받은 위치를 마커로 표시합니다
192 var marker = new kakao.maps.Marker({ 198 var marker = new kakao.maps.Marker({
193 - map: map, 199 + position:coords,
194 - position: coords, 200 + map:map,
201 + })
202 + var infowindow = new kakao.maps.InfoWindow({
203 + content: rest_names[index],
195 }); 204 });
196 -
197 - // 인포윈도우로 장소에 대한 설명을 표시합니다
198 kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow)); 205 kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
199 kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow)); 206 kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
200 - document.getElementById("position_ex").innerHTML = svarAddr;
201 -
202 } 207 }
203 - });
204 - }
205 -
206 - }
207 - },
208 }) 208 })
209 - */ 209 + })
210 + })
211 + }
210 212
211 </script> 213 </script>
212 </head> 214 </head>
......