Joung Jiwon / OSS-TongGilMut

Go to a project
Toggle navigation Toggle navigation pinning
Joung Jiwon
3809977a 2 parents 7869ae91 96ab698b

Merge branch 'patch-1' into 'master' 

지도와 길찾기 api 연결



See merge request !4
Inline Side-by-side
Showing 1 changed file with 178 additions and 29 deletions
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="UTF-8" /> 4 <meta charset="UTF-8" />
5 - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 5 + <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7 - <title>The Town HTML CSS Template</title> 7 + <title>DDuBuk</title>
8 <link rel="stylesheet" href="fontawesome-5.5/css/all.min.css" /> 8 <link rel="stylesheet" href="fontawesome-5.5/css/all.min.css" />
9 <link rel="stylesheet" href="slick/slick.css"> 9 <link rel="stylesheet" href="slick/slick.css">
10 <link rel="stylesheet" href="slick/slick-theme.css"> 10 <link rel="stylesheet" href="slick/slick-theme.css">
...@@ -13,10 +13,26 @@ ...@@ -13,10 +13,26 @@
13 <link rel="stylesheet" href="css/templatemo-style.css" /> 13 <link rel="stylesheet" href="css/templatemo-style.css" />
14 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css"> 14 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css">
15 15
16 + <script src="../../docs/js/jquery-1.9.1.js"></script>
17 + <script type="text/javascript" src="../../docs/js/examples-base.js"></script>
18 + <script type="text/javascript" src="../../docs/js/highlight.min.js"></script>
19 + <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script>
20 + <link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" />
16 <!-- 21 <!--
17 The Town 22 The Town
18 https://templatemo.com/tm-525-the-town 23 https://templatemo.com/tm-525-the-town
19 --> 24 -->
25 +
26 + <script type= "text/css">
27 + window.onload = function(){
28 + document.getElementById('btn').onclick = function(){
29 + document.getElementById('frm').submit();
30 + return false;
31 + };
32 +};
33 +
34 +</script>
35 +
20 </head> 36 </head>
21 <body> 37 <body>
22 <!-- Hero section --> 38 <!-- Hero section -->
...@@ -38,7 +54,7 @@ ...@@ -38,7 +54,7 @@
38 <h2 class="tm-hero-title">통학생은 길에서 몇시간을 보냈을까?</h2> 54 <h2 class="tm-hero-title">통학생은 길에서 몇시간을 보냈을까?</h2>
39 <p class="tm-hero-subtitle"> 55 <p class="tm-hero-subtitle">
40 매일 학교에 통학하시나요?<br> 56 매일 학교에 통학하시나요?<br>
41 - 뚜벅이님이 지금까지 몇시간을 길에서 보냈는지 보여드립니다. 57 + 뚜벅이님이 지금까지 몇 시간을 길에서 보냈는지 보여드립니다.
42 <br>-뚜벅이- 58 <br>-뚜벅이-
43 </p> 59 </p>
44 </div> 60 </div>
...@@ -46,7 +62,7 @@ ...@@ -46,7 +62,7 @@
46 62
47 <div class="tm-next tm-intro-next"> 63 <div class="tm-next tm-intro-next">
48 <a href="#introduction" class="text-center tm-down-arrow-link"> 64 <a href="#introduction" class="text-center tm-down-arrow-link">
49 - <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i> 65 + <i class="fas fa-3x fa-caret-down tm-down-arrow">계산하기</i>
50 </a> 66 </a>
51 </div> 67 </div>
52 </section> 68 </section>
...@@ -61,18 +77,18 @@ ...@@ -61,18 +77,18 @@
61 <div class="question-text">어디에 사나요?</div> 77 <div class="question-text">어디에 사나요?</div>
62 <div class="question-input"> 78 <div class="question-input">
63 <label for="question-input-field"></label> 79 <label for="question-input-field"></label>
64 - <input type ="text" id="question-input-field"> 80 + <input type ="text" id="start">
65 </div> 81 </div>
66 </div> 82 </div>
67 <div class="container question-field"> 83 <div class="container question-field">
68 - <div class="question-text">무슨학교에 다니나요?</div> 84 + <div class="question-text">무슨 학교에 다니나요?</div>
69 <div class="question-input"> 85 <div class="question-input">
70 <label for="question-input-field"></label> 86 <label for="question-input-field"></label>
71 - <input type ="text" id="question-input-field"> 87 + <input type ="text" id="end">
72 </div> 88 </div>
73 </div> 89 </div>
74 <div class="container question-field"> 90 <div class="container question-field">
75 - <div class="question-text">몇학년인가요?</div> 91 + <div class="question-text">몇 학년인가요?</div>
76 <div class="question-input"> 92 <div class="question-input">
77 <select name="semester" id="semester"> 93 <select name="semester" id="semester">
78 <option value="sem-1-1">1학년 1학기</option> 94 <option value="sem-1-1">1학년 1학기</option>
...@@ -87,37 +103,170 @@ ...@@ -87,37 +103,170 @@
87 </div> 103 </div>
88 </div> 104 </div>
89 <div class="container button-field"> 105 <div class="container button-field">
90 - <button class="button_calculate" type="button"> 106 + <button class="button_calculate" type="button">계산하기
91 - 계산해보기
92 </button> 107 </button>
93 </div> 108 </div>
94 </div> 109 </div>
95 - <div class=row id ="map-answer" style="margin-top:100px"> 110 +<br>
96 - <div style="width:30%"> 111 +
97 - <iframe 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" width=100% height="250" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0" right="20%"></iframe> 112 +
98 - </div> 113 +<div id="map" style="width:700px;height:700px;"></div>
99 - <div class="answer-field"> 114 +<script>
100 - 한번 갈 때마다 ...<br> 115 +var btn = document.querySelector('button');
101 - <span class="answer-highlight">n</span> 시간 <span class="answer-highlight">n</span> 분 <br> 116 +
102 - <span class="answer-highlight">n</span> 원 <br> 117 +btn.addEventListener('click', updateBtn);
103 - </div> 118 +
104 - </div> 119 +function updateBtn() {
120 + var start = document.getElementById('start').value;
121 + var end = document.getElementById('end').value;
122 + naver.maps.Service.geocode({
123 + address: start
124 +
125 + }, function(status, response) {
126 + if (status !== naver.maps.Service.Status.OK) {
127 + return alert('Something wrong!');
128 + }
129 + var result = response.result, // 검색 결과의 컨테이너
130 + items = result.items;
131 + var sx = result.items[0].point.x;
132 + var sy = result.items[0].point.y;
133 +
134 + naver.maps.Service.geocode({
135 + address: end
136 +
137 + }, function(status, response) {
138 + if (status !== naver.maps.Service.Status.OK) {
139 + return alert('Something wrong!');
140 + }
141 + var result = response.result, // 검색 결과의 컨테이너
142 + items = result.items;
143 + var ex = result.items[0].point.x;
144 + var ey = result.items[0].point.y;
145 +
146 +
147 + /*var sx = 127.0739547;
148 + var sy = 37.2407701;
149 + var ex = 126.921666;
150 + var ey = 37.1308333;
151 + */
152 +
153 +
154 + var mapOptions = {
155 + center: new naver.maps.LatLng(start,end),
156 + zoom: 10
157 + };
158 +
159 + var map = new naver.maps.Map('map', mapOptions);
160 +
161 +
162 +
163 + function searchPubTransPathAJAX() {
164 + var xhr = new XMLHttpRequest();
165 + //ODsay apiKey 입력
166 + var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX="+sx+"&SY="+sy+"&EX="+ex+"&EY="+ey+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
167 + xhr.open("GET", url, true);
168 + xhr.send();
169 + xhr.onreadystatechange = function() {
170 + if (xhr.readyState == 4 && xhr.status == 200) {
171 + console.log( JSON.parse(xhr.responseText) ); // <- xhr.responseText 로 결과를 가져올 수 있음
172 + //노선그래픽 데이터 호출
173 + callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj);
174 + }
175 + }
176 + }
177 +
178 + //길찾기 API 호출
179 + searchPubTransPathAJAX();
180 +
181 + function callMapObjApiAJAX(mabObj){
182 + var xhr = new XMLHttpRequest();
183 + //ODsay apiKey 입력
184 + var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@"+mabObj+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
185 + xhr.open("GET", url, true);
186 + xhr.send();
187 + xhr.onreadystatechange = function() {
188 + if (xhr.readyState == 4 && xhr.status == 200) {
189 + var resultJsonData = JSON.parse(xhr.responseText);
190 + drawNaverMarker(sx,sy); // 출발지 마커 표시
191 + drawNaverMarker(ex,ey); // 도착지 마커 표시
192 + drawNaverPolyLine(resultJsonData); // 노선그래픽데이터 지도위 표시
193 + // boundary 데이터가 있을경우, 해당 boundary로 지도이동
194 + if(resultJsonData.result.boundary){
195 + var boundary = new naver.maps.LatLngBounds(
196 + new naver.maps.LatLng(resultJsonData.result.boundary.top, resultJsonData.result.boundary.left),
197 + new naver.maps.LatLng(resultJsonData.result.boundary.bottom, resultJsonData.result.boundary.right)
198 + );
199 + map.panToBounds(boundary);
200 + }
201 + }
202 + }
203 + }
204 +
205 + // 지도위 마커 표시해주는 함수
206 + function drawNaverMarker(x,y){
207 + var marker = new naver.maps.Marker({
208 + position: new naver.maps.LatLng(y, x),
209 + map: map
210 + });
211 + }
212 +
213 + // 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수
214 + function drawNaverPolyLine(data){
215 + var lineArray;
216 +
217 + for(var i = 0 ; i < data.result.lane.length; i++){
218 + for(var j=0 ; j <data.result.lane[i].section.length; j++){
219 + lineArray = null;
220 + lineArray = new Array();
221 + for(var k=0 ; k < data.result.lane[i].section[j].graphPos.length; k++){
222 + lineArray.push(new naver.maps.LatLng(data.result.lane[i].section[j].graphPos[k].y, data.result.lane[i].section[j].graphPos[k].x));
223 + }
224 +
225 + //지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음)
226 + if(data.result.lane[i].type == 1){
227 + var polyline = new naver.maps.Polyline({
228 + map: map,
229 + path: lineArray,
230 + strokeWeight: 3,
231 + strokeColor: '#003499'
232 + });
233 + }else if(data.result.lane[i].type == 2){
234 + var polyline = new naver.maps.Polyline({
235 + map: map,
236 + path: lineArray,
237 + strokeWeight: 3,
238 + strokeColor: '#37b42d'
239 + });
240 + }else{
241 + var polyline = new naver.maps.Polyline({
242 + map: map,
243 + path: lineArray,
244 + strokeWeight: 3
245 + });
246 + }
247 + }
248 + }
249 + }
250 + });
251 + });
252 +}
253 +</script>
254 +
105 <div class="row"> 255 <div class="row">
106 <div id="list-answer"> 256 <div id="list-answer">
107 <div class="answer-field" id="answer-how-many-hours"> 257 <div class="answer-field" id="answer-how-many-hours">
108 - 지금까지 <span class="answer-highlight">n</span>시간을 길에서 보내셨군요<br> 258 + 지금까지 <span class="answer-highlight">n</span> 시간을 길에서 보내셨군요!<br>
109 - 졸업까지 앞으로 <span class="answer-highlight">n</span>시간은 더 길에서 보내시면 됩니다.<br> 259 + 앞으로 <span class="answer-highlight">n</span> 시간은 더 길에서 보내시면 됩니다!!<br>
110 </div> 260 </div>
111 </div> 261 </div>
112 </div> 262 </div>
113 <div class="row"> 263 <div class="row">
114 - <div class = "answer-detail-question"> 264 + <div id="list-answer">
115 - 이 시간에 알바를 했다면? <br> 265 + <div class="answer-field" id="answer-how-many-hours">
116 - 교통비로 국밥 <br> 266 + <p>이 시간에..</p>
117 - </div> 267 + 알바를 했다면? <span class="answer-highlight">n</span> 원<br>
118 - <div class="answer-detail-answer"> 268 + <p>이 돈이면..</p>
119 - n원<br> 269 + 국밥이 <span class="answer-highlight">n</span> 그릇<br>
120 - m그릇<br>
121 </div> 270 </div>
122 </div> 271 </div>
123 </div> 272 </div>
......