지도와 길찾기 api 연결

박재윤
Commit 96ab698ba58eaea95e4ec4418711e18c792775c6 96ab698b 1 parent 7869ae91
Showing 1 changed file with 211 additions and 62 deletions
project/index.html
--- a/project/index.html
View file @96ab698
+++ b/project/index.html
View file @96ab698
@@ -2,77 +2,93 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>The Town HTML CSS Template</title>
+    <title>DDuBuk</title>
     <link rel="stylesheet" href="fontawesome-5.5/css/all.min.css" />
     <link rel="stylesheet" href="slick/slick.css">
     <link rel="stylesheet" href="slick/slick-theme.css">
     <link rel="stylesheet" href="magnific-popup/magnific-popup.css">
     <link rel="stylesheet" href="css/bootstrap.min.css" />
     <link rel="stylesheet" href="css/templatemo-style.css" />
-		<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css">
-		
+
+    <script src="../../docs/js/jquery-1.9.1.js"></script>
+    <script type="text/javascript" src="../../docs/js/examples-base.js"></script>
+    <script type="text/javascript" src="../../docs/js/highlight.min.js"></script>
+    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script>
+    <link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" />
     <!--
 	The Town
 	https://templatemo.com/tm-525-the-town
 	-->
+
+  <script type= "text/css">
+	window.onload = function(){
+	document.getElementById('btn').onclick = function(){
+		document.getElementById('frm').submit();
+		return false;
+	};
+};
+
+</script>
+
   </head>
-  <body>    
+  <body>
     <!-- Hero section -->
     <section id="hero" class="text-white tm-font-big tm-parallax">
       <video autoplay muted loop id ="hero-video">
         <source src="img/main-video1.mp4" type="video/mp4">
       </video>
       <!-- Navigation -->
-      <nav class="navbar navbar-expand-md tm-navbar" id="tmNav">              
+      <nav class="navbar navbar-expand-md tm-navbar" id="tmNav">
-        <div class="container">   
+        <div class="container">
           <div class="tm-next">
               <a href="#hero" class="navbar-brand">뚜벅이</a>
-          </div>             
+          </div>
         </div>
       </nav>
-      
+
       <div class="text-center tm-hero-text-container">
         <div class="tm-hero-text-container-inner">
             <h2 class="tm-hero-title">통학생은 길에서 몇시간을 보냈을까?</h2>
             <p class="tm-hero-subtitle">
               매일 학교에 통학하시나요?<br>
-              뚜벅이님이 지금까지 몇시간을 길에서 보냈는지 보여드립니다.
+              뚜벅이님이 지금까지 몇 시간을 길에서 보냈는지 보여드립니다.
               <br>-뚜벅이-
             </p>
-        </div>        
+        </div>
       </div>
       <div class="tm-next tm-intro-next">
         <a href="#introduction" class="text-center tm-down-arrow-link">
-          <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
+          <i class="fas fa-3x fa-caret-down tm-down-arrow">계산하기</i>
         </a>
-      </div>      
+      </div>
     </section>
     <!-- Contact -->
     <section id="contact" class="tm-section-pad-top tm-parallax-2">
-      <div class="container tm-container-contact">
+    <div class="container tm-container-contact">
         <div class="row">
           <div class="container question-field">
             <div class="question-text">어디에 사나요?</div>
             <div class="question-input">
               <label for="question-input-field"></label>
-              <input type ="text" id="question-input-field">
+              <input type ="text" id="start">
             </div>
           </div>
           <div class="container question-field">
-            <div class="question-text">무슨학교에 다니나요?</div>
+            <div class="question-text">무슨 학교에 다니나요?</div>
             <div class="question-input">
               <label for="question-input-field"></label>
-              <input type ="text" id="question-input-field">
+              <input type ="text" id="end">
             </div>
           </div>
           <div class="container question-field">
-            <div class="question-text">몇학년인가요?</div>
+            <div class="question-text">몇 학년인가요?</div>
             <div class="question-input">
               <select name="semester" id="semester">
 								<option value="sem-1-1">1학년 1학기</option>
@@ -87,56 +103,189 @@
             </div>
           </div>
           <div class="container button-field">
-            <button class="button_calculate" type="button">
+            <button class="button_calculate" type="button">계산하기
-              계산해보기
             </button>
           </div>
         </div>
-        <div class=row id ="map-answer" style="margin-top:100px">
+<br>
-					<div style="width:30%">
+
-						<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>
+
-					</div>
+<div id="map" style="width:700px;height:700px;"></div>
-					<div class="answer-field">
+<script>
-						한번 갈 때마다 ...<br>
+var btn = document.querySelector('button');
-						<span class="answer-highlight">n</span> 시간 <span class="answer-highlight">n</span> 분 <br>
+
-						<span class="answer-highlight">n</span> 원 <br>
+btn.addEventListener('click', updateBtn);
-					</div>
+
-        </div>
+function updateBtn() {
+  var start = document.getElementById('start').value;
+  var end = document.getElementById('end').value;
+  naver.maps.Service.geocode({
+        address: start
+
+    }, function(status, response) {
+        if (status !== naver.maps.Service.Status.OK) {
+            return alert('Something wrong!');
+        }
+    var result = response.result, // 검색 결과의 컨테이너
+            items = result.items;
+    var sx = result.items[0].point.x;
+    var sy = result.items[0].point.y;
+
+  naver.maps.Service.geocode({
+        address: end
+
+    }, function(status, response) {
+        if (status !== naver.maps.Service.Status.OK) {
+            return alert('Something wrong!');
+        }
+    var result = response.result, // 검색 결과의 컨테이너
+            items = result.items;
+    var ex = result.items[0].point.x;
+    var ey = result.items[0].point.y;
+
+
+	/*var sx = 127.0739547;
+	var sy = 37.2407701;
+	var ex = 126.921666;
+	var ey = 37.1308333;
+	*/
+
+
+	var mapOptions = {
+		center: new naver.maps.LatLng(start,end),
+		zoom: 10
+	};
+
+	var map = new naver.maps.Map('map', mapOptions);
+
+
+
+	function searchPubTransPathAJAX() {
+		var xhr = new XMLHttpRequest();
+		//ODsay apiKey 입력
+		var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX="+sx+"&SY="+sy+"&EX="+ex+"&EY="+ey+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
+		xhr.open("GET", url, true);
+		xhr.send();
+		xhr.onreadystatechange = function() {
+			if (xhr.readyState == 4 && xhr.status == 200) {
+			console.log( JSON.parse(xhr.responseText) ); // <- xhr.responseText 로 결과를 가져올 수 있음
+			//노선그래픽 데이터 호출
+			callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj);
+			}
+		}
+	}
+
+	//길찾기 API 호출
+	searchPubTransPathAJAX();
+
+	function callMapObjApiAJAX(mabObj){
+		var xhr = new XMLHttpRequest();
+		//ODsay apiKey 입력
+		var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@"+mabObj+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
+		xhr.open("GET", url, true);
+		xhr.send();
+		xhr.onreadystatechange = function() {
+			if (xhr.readyState == 4 && xhr.status == 200) {
+				var resultJsonData = JSON.parse(xhr.responseText);
+				drawNaverMarker(sx,sy);					// 출발지 마커 표시
+				drawNaverMarker(ex,ey);					// 도착지 마커 표시
+				drawNaverPolyLine(resultJsonData);		// 노선그래픽데이터 지도위 표시
+				// boundary 데이터가 있을경우, 해당 boundary로 지도이동
+				if(resultJsonData.result.boundary){
+						var boundary = new naver.maps.LatLngBounds(
+				                new naver.maps.LatLng(resultJsonData.result.boundary.top, resultJsonData.result.boundary.left),
+				                new naver.maps.LatLng(resultJsonData.result.boundary.bottom, resultJsonData.result.boundary.right)
+				                );
+						map.panToBounds(boundary);
+				}
+			}
+		}
+	}
+
+	// 지도위 마커 표시해주는 함수
+	function drawNaverMarker(x,y){
+		var marker = new naver.maps.Marker({
+		    position: new naver.maps.LatLng(y, x),
+		    map: map
+		});
+	}
+
+	// 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수
+	function drawNaverPolyLine(data){
+		var lineArray;
+
+		for(var i = 0 ; i < data.result.lane.length; i++){
+			for(var j=0 ; j <data.result.lane[i].section.length; j++){
+				lineArray = null;
+				lineArray = new Array();
+				for(var k=0 ; k < data.result.lane[i].section[j].graphPos.length; k++){
+					lineArray.push(new naver.maps.LatLng(data.result.lane[i].section[j].graphPos[k].y, data.result.lane[i].section[j].graphPos[k].x));
+				}
+
+			//지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음)
+				if(data.result.lane[i].type == 1){
+					var polyline = new naver.maps.Polyline({
+					    map: map,
+					    path: lineArray,
+					    strokeWeight: 3,
+					    strokeColor: '#003499'
+					});
+				}else if(data.result.lane[i].type == 2){
+					var polyline = new naver.maps.Polyline({
+					    map: map,
+					    path: lineArray,
+					    strokeWeight: 3,
+					    strokeColor: '#37b42d'
+					});
+				}else{
+					var polyline = new naver.maps.Polyline({
+					    map: map,
+					    path: lineArray,
+					    strokeWeight: 3
+					});
+				}
+			}
+		}
+	}
+	});
+  });
+}
+</script>
+
         <div class="row">
           <div id="list-answer">
             <div class="answer-field" id="answer-how-many-hours">
-              지금까지 <span class="answer-highlight">n</span>시간을 길에서 보내셨군요<br>
+              지금까지 <span class="answer-highlight">n</span> 시간을 길에서 보내셨군요!<br>
-              졸업까지 앞으로 <span class="answer-highlight">n</span>시간은 더 길에서 보내시면 됩니다.<br>
+              앞으로 <span class="answer-highlight">n</span> 시간은 더 길에서 보내시면 됩니다!!<br>
             </div>
           </div>
         </div>
-        <div class="row">
+	<div class="row">
-          <div class = "answer-detail-question">
+          <div id="list-answer">
-            이 시간에 알바를 했다면?  <br>
+            <div class="answer-field" id="answer-how-many-hours">
-            교통비로 국밥  <br>
+		    <p>이 시간에..</p>
-          </div>
+		     알바를 했다면? <span class="answer-highlight">n</span> 원<br>
-          <div class="answer-detail-answer">
+		    <p>이 돈이면..</p>
-            n원<br>
+              	    국밥이 <span class="answer-highlight">n</span> 그릇<br>
-            m그릇<br>
+            </div>
-          </div>
+	  </div>
-        </div>
+	</div>
-      </div>
       <footer class="text-center small tm-footer">
           <p class="mb-0">
             Copyright &copy; 2020 TongGilMut
-            
+
             - Design: <a rel="nofollow" href="https://github.com/wjdwl001" class="tm-footer-link">Joung Jiwon</a>
           </p>
         </footer>
     </section>
-    <script src="js/jquery-1.9.1.min.js"></script>     
+    <script src="js/jquery-1.9.1.min.js"></script>
     <script src="slick/slick.min.js"></script>
     <script src="magnific-popup/jquery.magnific-popup.min.js"></script>
-    <script src="js/jquery.singlePageNav.min.js"></script>     
+    <script src="js/jquery.singlePageNav.min.js"></script>
-    <script src="js/bootstrap.min.js"></script> 
+    <script src="js/bootstrap.min.js"></script>
     <script>
       $('button-calculate').click(function(){
-        
+
       })
       function getOffSet(){
@@ -145,7 +294,7 @@
         if(windowHeight > 500) {
           _offset = 400;
-        } 
+        }
         if(windowHeight > 680) {
           _offset = 300
         }
@@ -164,7 +313,7 @@
       }
       // Parallax function
-      // Adapted based on https://codepen.io/roborich/pen/wpAsm        
+      // Adapted based on https://codepen.io/roborich/pen/wpAsm
       var background_image_parallax = function($object, multiplier, forceSet){
         multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
         multiplier = 1 - multiplier;
@@ -174,7 +323,7 @@
         if(forceSet) {
           setParallaxPosition($doc, multiplier, $object);
         } else {
-          $(window).scroll(function(){          
+          $(window).scroll(function(){
             setParallaxPosition($doc, multiplier, $object);
           });
         }
@@ -188,41 +337,41 @@
         $(window).scroll(function(){
           var firstTop = $object.offset().top,
               pos = $(window).scrollTop(),
-              yPos = Math.round((multiplier * (firstTop - pos)) - 186);              
+              yPos = Math.round((multiplier * (firstTop - pos)) - 186);
           var bg_css = 'center ' + yPos + 'px';
           $object.css({"background-position" : bg_css });
         });
       };
-      
+
       $(function(){
         // Hero Section - Background Parallax
         background_image_parallax($(".tm-parallax"), 0.30, false);
-        background_image_parallax_2($("#contact"), 0.80);   
+        background_image_parallax_2($("#contact"), 0.80);
-        
+
         // Handle window resize
         window.addEventListener('resize', function(){
           background_image_parallax($(".tm-parallax"), 0.30, true);
         }, true);
         // Detect window scroll and update navbar
-        $(window).scroll(function(e){          
+        $(window).scroll(function(e){
           if($(document).scrollTop() > 120) {
             $('.tm-navbar').addClass("scroll");
           } else {
             $('.tm-navbar').removeClass("scroll");
           }
         });
-        
+
-        // Close mobile menu after click 
+        // Close mobile menu after click
         $('#tmNav a').on('click', function(){
-          $('.navbar-collapse').removeClass('show'); 
+          $('.navbar-collapse').removeClass('show');
         })
         // Scroll to corresponding section with animation
-        $('#tmNav').singlePageNav();        
+        $('#tmNav').singlePageNav();
-        
+
         // Add smooth scrolling to all links
         // https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
         $("a").on('click', function(event) {
@@ -278,4 +427,4 @@
       });
     </script>
   </body>
-</html>
\ No newline at end of file
+</html>