Joung Jiwon / OSS-TongGilMut

Go to a project
Toggle navigation Toggle navigation pinning
박재윤
cbefec5b 1 parent 2956c337

merge file(api&calculate)

Inline Side-by-side
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>
......