Showing
1 changed file
with
74 additions
and
55 deletions
... | @@ -15,6 +15,7 @@ | ... | @@ -15,6 +15,7 @@ |
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 | // 고속도로 선택 함수 | 19 | // 고속도로 선택 함수 |
19 | function showline(lineNumber){ | 20 | function showline(lineNumber){ |
20 | // 이 위치에 이전에 켜져있는 map을 지우는 기능 넣어야해 ... | 21 | // 이 위치에 이전에 켜져있는 map을 지우는 기능 넣어야해 ... |
... | @@ -54,50 +55,54 @@ | ... | @@ -54,50 +55,54 @@ |
54 | 55 | ||
55 | 56 | ||
56 | 57 | ||
58 | + var userData; | ||
59 | + | ||
57 | // 1번 페이지 | 60 | // 1번 페이지 |
58 | $.ajax({ | 61 | $.ajax({ |
62 | + | ||
59 | url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=1", | 63 | url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=1", |
64 | + async:false, | ||
60 | success: function(data){ | 65 | success: function(data){ |
61 | - var userData = JSON.stringify(data); | 66 | + //변수 설정 |
62 | - var result_str=""; | 67 | + userData = data; |
63 | - var routeCode = ""; | 68 | + }, |
64 | - var svarAddr = ""; | 69 | + }) |
65 | - var count = data["list"].length; | 70 | + var markers = []; |
71 | + var infomations =[]; | ||
72 | + var result_str=""; | ||
73 | + var routeCode = ""; | ||
74 | + var svarAddr = ""; | ||
75 | + var rest_name = ""; | ||
76 | + var data_count = userData["list"].length // 데이터 개수 얻기 | ||
77 | + | ||
78 | + for (var i =0; i<data_count; i++){ | ||
79 | + routeCode = JSON.stringify(userData["list"][i]["routeCode"]); | ||
80 | + svarAddr = JSON.stringify(userData["list"][i]["svarAddr"]); | ||
81 | + rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]); | ||
82 | + | ||
83 | + if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면 | ||
66 | 84 | ||
67 | - for (var i =0; i<count; i++){ | 85 | + var geocoder = new kakao.maps.services.Geocoder(); |
68 | - routeCode = JSON.stringify(data["list"][i]["routeCode"]); | 86 | + // 주소로 좌표를 검색합니다 |
69 | - svarAddr = JSON.stringify(data["list"][i]["svarAddr"]); | 87 | + geocoder.addressSearch(svarAddr, function(result, status) { |
70 | - if(routeCode.substring(1,5) === lineNumber){ | 88 | + // 정상적으로 검색이 완료됐으면 |
71 | - document.getElementById("testArea").innerHTML += routeCode.substring(1,5)+ " "; | 89 | + if (status === kakao.maps.services.Status.OK) { |
72 | - var geocoder = new kakao.maps.services.Geocoder(); | 90 | + //위치 저장 |
73 | - | 91 | + var coords = new kakao.maps.LatLng(result[0].y, result[0].x); |
74 | - // 주소로 좌표를 검색합니다 | 92 | + |
75 | - geocoder.addressSearch(svarAddr, function(result, status) { | 93 | + var marker = new kakao.maps.Marker({ |
76 | - | 94 | + position: coords, |
77 | - // 정상적으로 검색이 완료됐으면 | 95 | + map: map |
78 | - if (status === kakao.maps.services.Status.OK) { | ||
79 | - | ||
80 | - var coords = new kakao.maps.LatLng(result[0].y, result[0].x); | ||
81 | - | ||
82 | - // 결과값으로 받은 위치를 마커로 표시합니다 | ||
83 | - var marker = new kakao.maps.Marker({ | ||
84 | - map: map, | ||
85 | - position: coords | ||
86 | - }); | ||
87 | - | ||
88 | - // 인포윈도우로 장소에 대한 설명을 표시합니다 | ||
89 | - var infowindow = new kakao.maps.InfoWindow({ | ||
90 | - content: '<div style="width:150px;text-align:center;padding:6px 0;" id ="position_ex"></div>' | ||
91 | - }); | ||
92 | - document.getElementById("position_ex").innerHTML = svarAddr; | ||
93 | - infowindow.open(map, marker); | ||
94 | - } | ||
95 | }); | 96 | }); |
97 | + markers.push(marker); // markers 로 정상적 push 수행 안됨 | ||
96 | } | 98 | } |
97 | - | 99 | + }); |
98 | - } | 100 | + |
99 | - }, | 101 | + } |
100 | - }) | 102 | + } |
103 | + | ||
104 | + alert(markers.length) | ||
105 | + /* | ||
101 | // 2번 페이지 | 106 | // 2번 페이지 |
102 | $.ajax({ | 107 | $.ajax({ |
103 | url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=2", | 108 | url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=2", |
... | @@ -106,15 +111,20 @@ | ... | @@ -106,15 +111,20 @@ |
106 | var result_str=""; | 111 | var result_str=""; |
107 | var routeCode = ""; | 112 | var routeCode = ""; |
108 | var svarAddr = ""; | 113 | var svarAddr = ""; |
114 | + var rest_name = ""; | ||
109 | var count = data["list"].length; | 115 | var count = data["list"].length; |
110 | 116 | ||
111 | for (var i =0; i<count; i++){ | 117 | for (var i =0; i<count; i++){ |
112 | routeCode = JSON.stringify(data["list"][i]["routeCode"]); | 118 | routeCode = JSON.stringify(data["list"][i]["routeCode"]); |
113 | svarAddr = JSON.stringify(data["list"][i]["svarAddr"]); | 119 | svarAddr = JSON.stringify(data["list"][i]["svarAddr"]); |
120 | + rest_name = JSON.stringify(data["list"][i]["serviceAreaName"]); | ||
121 | + var infowindow = new kakao.maps.InfoWindow({ | ||
122 | + content: rest_name | ||
123 | + }); | ||
114 | if(routeCode.substring(1,5) === lineNumber){ | 124 | if(routeCode.substring(1,5) === lineNumber){ |
115 | document.getElementById("testArea").innerHTML += routeCode.substring(1,5)+ " "; | 125 | document.getElementById("testArea").innerHTML += routeCode.substring(1,5)+ " "; |
116 | var geocoder = new kakao.maps.services.Geocoder(); | 126 | var geocoder = new kakao.maps.services.Geocoder(); |
117 | - | 127 | + |
118 | // 주소로 좌표를 검색합니다 | 128 | // 주소로 좌표를 검색합니다 |
119 | geocoder.addressSearch(svarAddr, function(result, status) { | 129 | geocoder.addressSearch(svarAddr, function(result, status) { |
120 | 130 | ||
... | @@ -122,19 +132,19 @@ | ... | @@ -122,19 +132,19 @@ |
122 | if (status === kakao.maps.services.Status.OK) { | 132 | if (status === kakao.maps.services.Status.OK) { |
123 | 133 | ||
124 | var coords = new kakao.maps.LatLng(result[0].y, result[0].x); | 134 | var coords = new kakao.maps.LatLng(result[0].y, result[0].x); |
125 | - | 135 | + var temp = i |
136 | + | ||
126 | // 결과값으로 받은 위치를 마커로 표시합니다 | 137 | // 결과값으로 받은 위치를 마커로 표시합니다 |
127 | var marker = new kakao.maps.Marker({ | 138 | var marker = new kakao.maps.Marker({ |
128 | map: map, | 139 | map: map, |
129 | - position: coords | 140 | + position: coords, |
130 | }); | 141 | }); |
131 | 142 | ||
132 | // 인포윈도우로 장소에 대한 설명을 표시합니다 | 143 | // 인포윈도우로 장소에 대한 설명을 표시합니다 |
133 | - var infowindow = new kakao.maps.InfoWindow({ | 144 | + kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow)); |
134 | - content: '<div style="width:150px;text-align:center;padding:6px 0;" id ="position"></div>' | 145 | + kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow)); |
135 | - }); | 146 | + document.getElementById("position_ex").innerHTML = svarAddr; |
136 | - document.getElementById("position").innerHTML = svarAddr; | 147 | + |
137 | - infowindow.open(map, marker); | ||
138 | } | 148 | } |
139 | }); | 149 | }); |
140 | } | 150 | } |
... | @@ -150,15 +160,20 @@ | ... | @@ -150,15 +160,20 @@ |
150 | var result_str=""; | 160 | var result_str=""; |
151 | var routeCode = ""; | 161 | var routeCode = ""; |
152 | var svarAddr = ""; | 162 | var svarAddr = ""; |
163 | + var rest_name = ""; | ||
153 | var count = data["list"].length; | 164 | var count = data["list"].length; |
154 | 165 | ||
155 | for (var i =0; i<count; i++){ | 166 | for (var i =0; i<count; i++){ |
156 | routeCode = JSON.stringify(data["list"][i]["routeCode"]); | 167 | routeCode = JSON.stringify(data["list"][i]["routeCode"]); |
157 | svarAddr = JSON.stringify(data["list"][i]["svarAddr"]); | 168 | svarAddr = JSON.stringify(data["list"][i]["svarAddr"]); |
169 | + rest_name = JSON.stringify(data["list"][i]["serviceAreaName"]); | ||
170 | + var infowindow = new kakao.maps.InfoWindow({ | ||
171 | + content: rest_name | ||
172 | + }); | ||
158 | if(routeCode.substring(1,5) === lineNumber){ | 173 | if(routeCode.substring(1,5) === lineNumber){ |
159 | document.getElementById("testArea").innerHTML += routeCode.substring(1,5)+ " "; | 174 | document.getElementById("testArea").innerHTML += routeCode.substring(1,5)+ " "; |
160 | var geocoder = new kakao.maps.services.Geocoder(); | 175 | var geocoder = new kakao.maps.services.Geocoder(); |
161 | - | 176 | + |
162 | // 주소로 좌표를 검색합니다 | 177 | // 주소로 좌표를 검색합니다 |
163 | geocoder.addressSearch(svarAddr, function(result, status) { | 178 | geocoder.addressSearch(svarAddr, function(result, status) { |
164 | 179 | ||
... | @@ -166,19 +181,19 @@ | ... | @@ -166,19 +181,19 @@ |
166 | if (status === kakao.maps.services.Status.OK) { | 181 | if (status === kakao.maps.services.Status.OK) { |
167 | 182 | ||
168 | var coords = new kakao.maps.LatLng(result[0].y, result[0].x); | 183 | var coords = new kakao.maps.LatLng(result[0].y, result[0].x); |
169 | - | 184 | + var temp = i |
185 | + | ||
170 | // 결과값으로 받은 위치를 마커로 표시합니다 | 186 | // 결과값으로 받은 위치를 마커로 표시합니다 |
171 | var marker = new kakao.maps.Marker({ | 187 | var marker = new kakao.maps.Marker({ |
172 | map: map, | 188 | map: map, |
173 | - position: coords | 189 | + position: coords, |
174 | }); | 190 | }); |
175 | 191 | ||
176 | // 인포윈도우로 장소에 대한 설명을 표시합니다 | 192 | // 인포윈도우로 장소에 대한 설명을 표시합니다 |
177 | - var infowindow = new kakao.maps.InfoWindow({ | 193 | + kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow)); |
178 | - content: '<div style="width:150px;text-align:center;padding:6px 0;" id ="position"></div>' | 194 | + kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow)); |
179 | - }); | 195 | + document.getElementById("position_ex").innerHTML = svarAddr; |
180 | - document.getElementById("position").innerHTML = svarAddr; | 196 | + |
181 | - infowindow.open(map, marker); | ||
182 | } | 197 | } |
183 | }); | 198 | }); |
184 | } | 199 | } |
... | @@ -186,7 +201,7 @@ | ... | @@ -186,7 +201,7 @@ |
186 | } | 201 | } |
187 | }, | 202 | }, |
188 | }) | 203 | }) |
189 | - | 204 | + */ |
190 | } | 205 | } |
191 | </script> | 206 | </script> |
192 | </head> | 207 | </head> |
... | @@ -242,7 +257,11 @@ | ... | @@ -242,7 +257,11 @@ |
242 | </div> | 257 | </div> |
243 | </div> | 258 | </div> |
244 | </div> | 259 | </div> |
245 | - | 260 | + <script> |
261 | + // 지도 구현 부분 | ||
262 | + </script> | ||
263 | + | ||
264 | + | ||
246 | <div id="map" style="width:600px;height:400px;"></div> | 265 | <div id="map" style="width:600px;height:400px;"></div> |
247 | 266 | ||
248 | <script> | 267 | <script> | ... | ... |
-
Please register or login to post a comment