Merge branch 'patch-4' into 'master'
merge file(api&calculate) See merge request !8
Showing
1 changed file
with
199 additions
and
44 deletions
... | @@ -12,13 +12,31 @@ | ... | @@ -12,13 +12,31 @@ |
12 | <link rel="stylesheet" href="magnific-popup/magnific-popup.css"> | 12 | <link rel="stylesheet" href="magnific-popup/magnific-popup.css"> |
13 | <link rel="stylesheet" href="css/bootstrap.min.css" /> | 13 | <link rel="stylesheet" href="css/bootstrap.min.css" /> |
14 | <link rel="stylesheet" href="css/templatemo-style.css" /> | 14 | <link rel="stylesheet" href="css/templatemo-style.css" /> |
15 | - <link rel="stylesheet" type="text/css" | 15 | + <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css"> |
16 | - href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css"> | 16 | + |
17 | + <script src="../../docs/js/jquery-1.9.1.js"></script> | ||
18 | + <script type="text/javascript" src="../../docs/js/examples-base.js"></script> | ||
19 | + <script type="text/javascript" src="../../docs/js/highlight.min.js"></script> | ||
20 | + <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script> | ||
21 | + <link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" /> | ||
17 | 22 | ||
18 | <!-- | 23 | <!-- |
19 | The Town | 24 | The Town |
20 | https://templatemo.com/tm-525-the-town | 25 | https://templatemo.com/tm-525-the-town |
21 | --> | 26 | --> |
27 | + | ||
28 | + | ||
29 | + | ||
30 | + <script type= "text/css"> | ||
31 | + window.onload = function(){ | ||
32 | + document.getElementById('btn').onclick = function(){ | ||
33 | + document.getElementById('frm').submit(); | ||
34 | + return false; | ||
35 | + }; | ||
36 | +}; | ||
37 | + | ||
38 | +</script> | ||
39 | + | ||
22 | </head> | 40 | </head> |
23 | 41 | ||
24 | <body> | 42 | <body> |
... | @@ -57,52 +75,189 @@ | ... | @@ -57,52 +75,189 @@ |
57 | 75 | ||
58 | 76 | ||
59 | <!-- Contact --> | 77 | <!-- Contact --> |
60 | - <section id="contact" class="tm-section-pad-top tm-parallax-2"> | 78 | + <section id="contact" class="tm-section-pad-top tm-parallax-2"> |
61 | <div class="container tm-container-contact"> | 79 | <div class="container tm-container-contact"> |
62 | - <div class="row"> | 80 | + <div class="row"> |
63 | - <div class="container question-field"> | 81 | + <div class="container question-field"> |
64 | - <div class="question-text">어디에 사나요?</div> | 82 | + <div class="question-text">어디에 사나요?</div> |
65 | - <div class="question-input"> | 83 | + <div class="question-input"> |
66 | - <label for="question-input-field"></label> | 84 | + <label for="question-input-field"></label> |
67 | - <input type="text" id="question-input-field"> | 85 | + <input type ="text" id="start"> |
86 | + </div> | ||
68 | </div> | 87 | </div> |
69 | - </div> | 88 | + <div class="container question-field"> |
70 | - <div class="container question-field"> | 89 | + <div class="question-text">무슨 학교에 다니나요?</div> |
71 | - <div class="question-text">무슨학교에 다니나요?</div> | 90 | + <div class="question-input"> |
72 | - <div class="question-input"> | 91 | + <label for="question-input-field"></label> |
73 | - <label for="question-input-field"></label> | 92 | + <input type ="text" id="end"> |
74 | - <input type="text" id="question-input-field"> | 93 | + </div> |
75 | </div> | 94 | </div> |
76 | - </div> | 95 | + <div class="container question-field"> |
77 | - <div class="container question-field"> | 96 | + <div class="question-text">몇 학년인가요?</div> |
78 | - <div class="question-text">몇학년인가요?</div> | 97 | + <div class="question-input"> |
79 | - <div class="question-input"> | 98 | + <select name="semester" id="semester"> |
80 | - <select name="semester" id="semester"> | 99 | + <option value="sem-1-1">1학년 1학기</option> |
81 | - <option value="sem-1-1">1학년 1학기</option> | 100 | + <option value="sem-1-2">1학년 2학기</option> |
82 | - <option value="sem-1-2">1학년 2학기</option> | 101 | + <option value="sem-2-1">2학년 1학기</option> |
83 | - <option value="sem-2-1">2학년 1학기</option> | 102 | + <option value="sem-2-2">2학년 2학기</option> |
84 | - <option value="sem-2-2">2학년 2학기</option> | 103 | + <option value="sem-3-1">3학년 1학기</option> |
85 | - <option value="sem-3-1">3학년 1학기</option> | 104 | + <option value="sem-3-2">3학년 2학기</option> |
86 | - <option value="sem-3-2">3학년 2학기</option> | 105 | + <option value="sem-4-1">4학년 1학기</option> |
87 | - <option value="sem-4-1">4학년 1학기</option> | 106 | + <option value="sem-4-2">4학년 2학기</option> |
88 | - <option value="sem-4-2">4학년 2학기</option> | 107 | + </select> |
89 | - </select> | 108 | + </div> |
109 | + </div> | ||
110 | + <div class="container button-field"> | ||
111 | + <button class="button_calculate" type="button">계산하기 | ||
112 | + </button> | ||
90 | </div> | 113 | </div> |
91 | </div> | 114 | </div> |
92 | - <div class="container button-field"> | 115 | +<br> |
93 | - <button class="button_calculate" type="button" onclick="semester();return false;"> | 116 | + |
94 | - 계산해보기 | 117 | +<div id="map" style="width:700px;height:700px;"></div> |
95 | - </button> | 118 | +<script> |
96 | - </div> | 119 | +var btn = document.querySelector('button'); |
97 | - </div> | 120 | + |
98 | - <div class=row id="map-answer" style="margin-top:100px"> | 121 | +btn.addEventListener('click', updateBtn); |
99 | - <div style="width:30%"> | 122 | + |
100 | - <iframe | 123 | +function updateBtn() { |
101 | - src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d203276.83209506533!2d126.94001771640623!3d37.24295009999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b44de2c7f3ddb%3A0x4c35e852f90f5520!2z6rK97Z2s64yA7ZWZ6rWQIOq1reygnOy6oO2NvOyKpA!5e0!3m2!1sko!2skr!4v1606155147622!5m2!1sko!2skr" | 124 | + var start = document.getElementById('start').value; |
102 | - width=100% height="250" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" | 125 | + var end = document.getElementById('end').value; |
103 | - tabindex="0" right="20%"></iframe> | 126 | + naver.maps.Service.geocode({ |
104 | - </div> | 127 | + address: start |
105 | - <div class="answer-field"> | 128 | + |
129 | + }, function(status, response) { | ||
130 | + if (status !== naver.maps.Service.Status.OK) { | ||
131 | + return alert('Something wrong!'); | ||
132 | + } | ||
133 | + var result = response.result, // 검색 결과의 컨테이너 | ||
134 | + items = result.items; | ||
135 | + var sx = result.items[0].point.x; | ||
136 | + var sy = result.items[0].point.y; | ||
137 | + | ||
138 | + naver.maps.Service.geocode({ | ||
139 | + address: end | ||
140 | + | ||
141 | + }, function(status, response) { | ||
142 | + if (status !== naver.maps.Service.Status.OK) { | ||
143 | + return alert('Something wrong!'); | ||
144 | + } | ||
145 | + var result = response.result, // 검색 결과의 컨테이너 | ||
146 | + items = result.items; | ||
147 | + var ex = result.items[0].point.x; | ||
148 | + var ey = result.items[0].point.y; | ||
149 | + | ||
150 | + | ||
151 | + /*var sx = 127.0739547; | ||
152 | + var sy = 37.2407701; | ||
153 | + var ex = 126.921666; | ||
154 | + var ey = 37.1308333; | ||
155 | + */ | ||
156 | + | ||
157 | + | ||
158 | + var mapOptions = { | ||
159 | + center: new naver.maps.LatLng(start,end), | ||
160 | + zoom: 10 | ||
161 | + }; | ||
162 | + | ||
163 | + var map = new naver.maps.Map('map', mapOptions); | ||
164 | + | ||
165 | + | ||
166 | + | ||
167 | + function searchPubTransPathAJAX() { | ||
168 | + var xhr = new XMLHttpRequest(); | ||
169 | + //ODsay apiKey 입력 | ||
170 | + var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX="+sx+"&SY="+sy+"&EX="+ex+"&EY="+ey+"&apiKey=nnsDQB1AWhpETO3HmMdDAw"; | ||
171 | + xhr.open("GET", url, true); | ||
172 | + xhr.send(); | ||
173 | + xhr.onreadystatechange = function() { | ||
174 | + if (xhr.readyState == 4 && xhr.status == 200) { | ||
175 | + console.log( JSON.parse(xhr.responseText) ); // <- xhr.responseText 로 결과를 가져올 수 있음 | ||
176 | + //노선그래픽 데이터 호출 | ||
177 | + callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj); | ||
178 | + } | ||
179 | + } | ||
180 | + } | ||
181 | + | ||
182 | + //길찾기 API 호출 | ||
183 | + searchPubTransPathAJAX(); | ||
184 | + | ||
185 | + function callMapObjApiAJAX(mabObj){ | ||
186 | + var xhr = new XMLHttpRequest(); | ||
187 | + //ODsay apiKey 입력 | ||
188 | + var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@"+mabObj+"&apiKey=nnsDQB1AWhpETO3HmMdDAw"; | ||
189 | + xhr.open("GET", url, true); | ||
190 | + xhr.send(); | ||
191 | + xhr.onreadystatechange = function() { | ||
192 | + if (xhr.readyState == 4 && xhr.status == 200) { | ||
193 | + var resultJsonData = JSON.parse(xhr.responseText); | ||
194 | + drawNaverMarker(sx,sy); // 출발지 마커 표시 | ||
195 | + drawNaverMarker(ex,ey); // 도착지 마커 표시 | ||
196 | + drawNaverPolyLine(resultJsonData); // 노선그래픽데이터 지도위 표시 | ||
197 | + // boundary 데이터가 있을경우, 해당 boundary로 지도이동 | ||
198 | + if(resultJsonData.result.boundary){ | ||
199 | + var boundary = new naver.maps.LatLngBounds( | ||
200 | + new naver.maps.LatLng(resultJsonData.result.boundary.top, resultJsonData.result.boundary.left), | ||
201 | + new naver.maps.LatLng(resultJsonData.result.boundary.bottom, resultJsonData.result.boundary.right) | ||
202 | + ); | ||
203 | + map.panToBounds(boundary); | ||
204 | + } | ||
205 | + } | ||
206 | + } | ||
207 | + } | ||
208 | + | ||
209 | + // 지도위 마커 표시해주는 함수 | ||
210 | + function drawNaverMarker(x,y){ | ||
211 | + var marker = new naver.maps.Marker({ | ||
212 | + position: new naver.maps.LatLng(y, x), | ||
213 | + map: map | ||
214 | + }); | ||
215 | + } | ||
216 | + | ||
217 | + // 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수 | ||
218 | + function drawNaverPolyLine(data){ | ||
219 | + var lineArray; | ||
220 | + | ||
221 | + for(var i = 0 ; i < data.result.lane.length; i++){ | ||
222 | + for(var j=0 ; j <data.result.lane[i].section.length; j++){ | ||
223 | + lineArray = null; | ||
224 | + lineArray = new Array(); | ||
225 | + for(var k=0 ; k < data.result.lane[i].section[j].graphPos.length; k++){ | ||
226 | + lineArray.push(new naver.maps.LatLng(data.result.lane[i].section[j].graphPos[k].y, data.result.lane[i].section[j].graphPos[k].x)); | ||
227 | + } | ||
228 | + | ||
229 | + //지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음) | ||
230 | + if(data.result.lane[i].type == 1){ | ||
231 | + var polyline = new naver.maps.Polyline({ | ||
232 | + map: map, | ||
233 | + path: lineArray, | ||
234 | + strokeWeight: 3, | ||
235 | + strokeColor: '#003499' | ||
236 | + }); | ||
237 | + }else if(data.result.lane[i].type == 2){ | ||
238 | + var polyline = new naver.maps.Polyline({ | ||
239 | + map: map, | ||
240 | + path: lineArray, | ||
241 | + strokeWeight: 3, | ||
242 | + strokeColor: '#37b42d' | ||
243 | + }); | ||
244 | + }else{ | ||
245 | + var polyline = new naver.maps.Polyline({ | ||
246 | + map: map, | ||
247 | + path: lineArray, | ||
248 | + strokeWeight: 3 | ||
249 | + }); | ||
250 | + } | ||
251 | + } | ||
252 | + } | ||
253 | + } | ||
254 | + }); | ||
255 | + }); | ||
256 | +} | ||
257 | +</script> | ||
258 | + | ||
259 | + | ||
260 | + <div class="answer-field"> | ||
106 | 한번 갈 때마다 ...<br> | 261 | 한번 갈 때마다 ...<br> |
107 | <span class="answer-highlight">n</span> 시간 <span class="answer-highlight">n</span> 분 <br> | 262 | <span class="answer-highlight">n</span> 시간 <span class="answer-highlight">n</span> 분 <br> |
108 | <span class="answer-highlight">n</span> 원 <br> | 263 | <span class="answer-highlight">n</span> 원 <br> |
... | @@ -351,4 +506,4 @@ | ... | @@ -351,4 +506,4 @@ |
351 | </script> | 506 | </script> |
352 | </body> | 507 | </body> |
353 | 508 | ||
354 | -</html> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
509 | +</html> | ... | ... |
-
Please register or login to post a comment