김민규 / 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 112 additions and 110 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 - 18 + function makeOverListener(map, marker, infowindow) {
19 + return function() {
20 + infowindow.open(map, marker);
21 + };
22 + }
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,
109 + })
110 + var infowindow = new kakao.maps.InfoWindow({
111 + content: rest_names[index],
112 + });
113 + kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
114 + kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
115 + }
116 + })
117 + })
103 }) 118 })
104 - setTimeout(() => { 119 +
105 - alert(markers.length);
106 - console.dir(markers);
107 - }, 500);
108 - }
109 -
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;
117 - var routeCode = ""; 127 + },
118 - var svarAddr = ""; 128 + }).done(function() {
119 - var rest_name = ""; 129 + var routeCode = "";
120 - var count = data["list"].length; 130 + var svarAddr = "";
131 + var rest_name = "";
132 + var data_count = userData["list"].length // 데이터 개수 얻기
133 +
134 + for (var i =0; i<data_count; i++){
135 + routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
136 + svarAddr = JSON.stringify(userData["list"][i]["svarAddr"]);
137 + rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]);
121 138
122 - for (var i =0; i<count; i++){ 139 + if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
123 - routeCode = JSON.stringify(data["list"][i]["routeCode"]); 140 +
124 - svarAddr = JSON.stringify(data["list"][i]["svarAddr"]); 141 + routeCodes.push(routeCode);
125 - rest_name = JSON.stringify(data["list"][i]["serviceAreaName"]); 142 + svarAddrs.push(svarAddr);
126 - var infowindow = new kakao.maps.InfoWindow({ 143 + rest_names.push(rest_name);
127 - content: rest_name 144 + var geocoder = new kakao.maps.services.Geocoder();
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 -
133 - // 주소로 좌표를 검색합니다
134 - geocoder.addressSearch(svarAddr, function(result, status) {
135 -
136 - // 정상적으로 검색이 완료됐으면
137 - if (status === kakao.maps.services.Status.OK) {
138 -
139 - 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({
144 - map: map,
145 - position: coords,
146 - });
147 -
148 - // 인포윈도우로 장소에 대한 설명을 표시합니다
149 - kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
150 - kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
151 - document.getElementById("position_ex").innerHTML = svarAddr;
152 -
153 - }
154 - });
155 - }
156 145
157 } 146 }
158 - }, 147 + }
148 + svarAddrs.forEach(function(addr,index){
149 + geocoder.addressSearch(addr,function(result,status){
150 + if(status === kakao.maps.services.Status.OK){
151 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
152 + var marker = new kakao.maps.Marker({
153 + position:coords,
154 + map:map,
155 + })
156 + var infowindow = new kakao.maps.InfoWindow({
157 + content: rest_names[index],
158 + });
159 + kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
160 + kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
161 + }
162 + })
163 + })
159 }) 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;
166 - var routeCode = ""; 173 + },
167 - var svarAddr = ""; 174 + }).done(function() {
168 - var rest_name = ""; 175 + var routeCode = "";
169 - var count = data["list"].length; 176 + var svarAddr = "";
177 + var rest_name = "";
178 + var data_count = userData["list"].length // 데이터 개수 얻기
179 +
180 + for (var i =0; i<data_count; i++){
181 + routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
182 + svarAddr = JSON.stringify(userData["list"][i]["svarAddr"]);
183 + rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]);
170 184
171 - for (var i =0; i<count; i++){ 185 + if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
172 - routeCode = JSON.stringify(data["list"][i]["routeCode"]); 186 +
173 - svarAddr = JSON.stringify(data["list"][i]["svarAddr"]); 187 + routeCodes.push(routeCode);
174 - rest_name = JSON.stringify(data["list"][i]["serviceAreaName"]); 188 + svarAddrs.push(svarAddr);
175 - var infowindow = new kakao.maps.InfoWindow({ 189 + rest_names.push(rest_name);
176 - content: rest_name 190 + var geocoder = new kakao.maps.services.Geocoder();
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 -
182 - // 주소로 좌표를 검색합니다
183 - geocoder.addressSearch(svarAddr, function(result, status) {
184 -
185 - // 정상적으로 검색이 완료됐으면
186 - if (status === kakao.maps.services.Status.OK) {
187 -
188 - 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({
193 - map: map,
194 - position: coords,
195 - });
196 -
197 - // 인포윈도우로 장소에 대한 설명을 표시합니다
198 - kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
199 - kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
200 - document.getElementById("position_ex").innerHTML = svarAddr;
201 -
202 - }
203 - });
204 - }
205 191
206 } 192 }
207 - }, 193 + }
194 + svarAddrs.forEach(function(addr,index){
195 + geocoder.addressSearch(addr,function(result,status){
196 + if(status === kakao.maps.services.Status.OK){
197 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
198 + var marker = new kakao.maps.Marker({
199 + position:coords,
200 + map:map,
201 + })
202 + var infowindow = new kakao.maps.InfoWindow({
203 + content: rest_names[index],
204 + });
205 + kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
206 + kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
207 + }
208 + })
209 + })
208 }) 210 })
209 - */ 211 + }
210 212
211 </script> 213 </script>
212 </head> 214 </head>
......