경로검색 알고리즘 추가

최지우
Commit b1db42fa264c6305d108794fdce1288e910f4b69 b1db42fa 1 parent 3a6af168
Showing 5 changed files with 155 additions and 102 deletions
app.js
views/main.ejs
views/near.ejs
views/pass.ejs
views/search.ejs
--- a/app.js
View file @b1db42f
+++ b/app.js
View file @b1db42f
@@ -4,10 +4,10 @@ var path = require('path');
 var cookieParser = require('cookie-parser');
 var logger = require('morgan');
-var mainRouter = require('./routes/main')
+var mainRouter = require('./routes/main');
 var passRouter = require('./routes/pass');
-var searchRouter = require('./routes/search')
+var searchRouter = require('./routes/search');
-var nearRouter = require('./routes/near')
+var nearRouter = require('./routes/near');
 var app = express();
 // view engine setup
--- a/views/main.ejs
View file @b1db42f
+++ b/views/main.ejs
View file @b1db42f
@@ -41,49 +41,6 @@ lightbox.options.albumLabel = "%1 / %2";
 <link rel="stylesheet" type="text/css" href="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-4143aead47fb3d3c83016433af84643a03241408/blogs/plugins/TistoryProfileLayer/style.css?_version_=tistory-4143aead47fb3d3c83016433af84643a03241408" />
 <script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-4143aead47fb3d3c83016433af84643a03241408/blogs/plugins/TistoryProfileLayer/profile.js?_version_=tistory-4143aead47fb3d3c83016433af84643a03241408"></script>
-	<style type="text/css">
-		.another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin:10px 0; clear: both; }
-		.another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important; }
-		.another_category h4 a { font-weight: bold !important; }
-		.another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important; }
-		* html .another_category table { width: auto !important; }
-		*:first-child+html .another_category table { width: auto !important; }
-		.another_category th, .another_category td { padding: 0 0 4px !important; }
-		.another_category th { text-align: left; font-size: 12px !important; font-weight: normal;  word-break: break-all; overflow: hidden; line-height: 1.5; }
-		.another_category td { text-align: right; width: 80px; font-size: 11px; }
-		.another_category th a { font-weight: normal; text-decoration: none; border: none !important; }
-		.another_category th a.current{ font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important; }
-		.another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important; }
-
-		.another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important; }
-		.another_category_color_gray * { color: #909090 !important; }
-		.another_category_color_gray th a.current{border-color:#909090 !important;}
-		.another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important; }
-
-
-		.another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important;  }
-		.another_category_color_red * { color: #E86869 !important; }
-		.another_category_color_red th a.current{border-color:#E86869 !important;}
-		.another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important; }
-
-
-		.another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important; }
-		.another_category_color_green * { color: #64C05B !important; }
-		.another_category_color_green th a.current{border-color:#64C05B !important;}
-		.another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important; }
-
-
-		.another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important; }
-		.another_category_color_blue * { color: #477FD6 !important; }
-		.another_category_color_blue th a.current{border-color:#477FD6 !important;}
-		.another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important; }
-
-
-		.another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important;  }
-		.another_category_color_violet * { color:#9D64C5 !important; }
-		.another_category_color_violet th a.current{border-color:#9D64C5 !important;}
-		.another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important; }
-	</style>
 </head>
 <body id="tt-body-index" class="theme_blue">
@@ -116,12 +73,12 @@ lightbox.options.albumLabel = "%1 / %2";
                     <div class="slide_item">
                       <div class="link_slide item-thumbnail" style="background-image:url('https://tistory4.daumcdn.net/tistory/1978677/skinCover/fcb080e7767a4941964dfee78420025e');">
                         <div class="text_slide thema_apply">
-                          <strong>PASS-PATH</strong>
+                          <strong>Pass-Path</strong>
                             <p class="text">여행지와 가고 싶은 장소만 선택하면<br>
                                             경로가 자동으로 완성되는<br>
                                             쉽고 간편한 여행 경로 리커맨더</p>
-                          <a href="/pass" class="link_detail">경유지</a><br>
+                          <a href="/pass" class="link_detail">들를 곳 찾기</a><br>
-                          <a href="/near" class="link_detail">현재지</a>
+                          <a href="/near" class="link_detail">내 주변 장소</a>
                         </div>
                       </div>
                     </div>
--- a/views/near.ejs
View file @b1db42f
+++ b/views/near.ejs
View file @b1db42f
@@ -6,9 +6,9 @@
     <style>
 body, html {height: 100%;}
 .map_wrap, .map_wrap * {margin:0; padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;}
-.map_wrap {position:relative;width:100%;height:100%;}
+.map_wrap {position:relative;width:100%;height:95%;}
-#category {position:absolute;top:10px;left:10px;border-radius: 5px; border:1px solid #909090;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);background: #fff;overflow: hidden;z-index: 2;}
+#category {position:absolute;top:30px;left:10px;border-radius: 5px; border:1px solid #909090;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);background: #fff;overflow: hidden;z-index: 2;}
-#category li {float:left;list-style: none;width:50px;px;border-right:1px solid #acacac;padding:6px 0;text-align: center; cursor: pointer;}
+#category li {float:left;list-style: none;width:50px;border-right:1px solid #acacac;padding:6px 0;text-align: center; cursor: pointer;}
 #category li.on {background: #eee;}
 #category li:hover {background: #ffe6e6;border-left:1px solid #acacac;margin-left: -1px;}
 #category li:last-child{margin-right:0;border-right:0;}
@@ -33,12 +33,20 @@ body, html {height: 100%;}
 .placeinfo .jibun {color:#999;font-size:11px;margin-top:0;}
 </style>
 </head>
-<body>
+<body style="background-color:#cccccc;">
-<p style="margin-top:-12px">
+    <header class="box_header" style="float:left; color: white;">
+        <div style="font-size:22px;">
+          <a href="/" title="Pass-Path" style="text-decoration:none; color:black; font-family: monospace;">
+
+              Pass-Path
+            
+          </a>
+        </div>
+    </header>
+<p>&nbsp;&nbsp;깃발을 드래그하여 현재 위치를 설정한 후 카테고리를 설정해주세요.</p>
-</p>
 <div class="map_wrap">
-    <div id="map" style="width:100%;height:100%;position:relative;overflow:hidden;"></div>
+    <div id="map" style="width:100%;height:95%;position:relative;overflow:hidden;"></div>
     <ul id="category">
         <li id="BK9" data-order="0"> 
             <span class="category_bg bank"></span>
@@ -67,7 +75,7 @@ body, html {height: 100%;}
     </ul>
 </div>
-<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=비밀&libraries=services"></script>
+<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY 입력&libraries=services"></script>
 <script>
 // 마커를 클릭했을 때 해당 장소의 상세정보를 보여줄 커스텀오버레이입니다
 var placeOverlay = new kakao.maps.CustomOverlay({zIndex:1}), 
--- a/views/pass.ejs
View file @b1db42f
+++ b/views/pass.ejs
View file @b1db42f
@@ -3,13 +3,24 @@
 <head>
     <meta charset="utf-8">
     <title>Pass-Path</title>
-    <style>body, html {height: 100%;}</style>
+    <style>
+        body, html {height: 100%;}
+    </style>
 </head>
-<body>
+<body style="background-color:#cccccc;">
-<p>출발지와 도착지를 설정해주세요!</p>
+    <header class="box_header" style="float:left; color: white;">
-
+        <h1 class="title_logo">
-<button type="button" onclick="Search();">검색</button>
+          <a href="/" title="Pass-Path" class="link_logo" style="text-decoration:none; color:black; font-family: monospace;">
+
+              Pass-Path
+            
+          </a>
+        </h1>
+    </header>
+<p>&nbsp;&nbsp;출발지와 도착지 깃발을 드래그하여 설정</p>
+<div>&nbsp;&nbsp;
+<button type="button" onclick="Search();" style="background-color:#B5B5FF; font-family:Open Sans;">경로 주변 검색</button>
 <script>
     function Search(){
         var startx = startMarker.getPosition().getLat();
@@ -18,12 +29,12 @@
         var endy = arriveMarker.getPosition().getLng();
         location.href ='/search?startx='+ startx +'&starty='+ starty +'&endx=' + endx + '&endy=' + endy;
 }
-</script>
+</script></div>
 <div id="map" style="width:100%;height:90%;"></div>
-<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=비밀"></script>
+<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY 입력"></script>
 <script>
 var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
     mapOption = { 
--- a/views/search.ejs
View file @b1db42f
+++ b/views/search.ejs
View file @b1db42f
@@ -3,12 +3,35 @@
 <head>
     <meta charset="utf-8">
     <title>검색 결과</title>
+    
+    <script type="text/javascript">
+        var Request = function() {  
+            this.getParameter = function(name) {  
+                var rtnval = '';  
+                var nowAddress = unescape(location.href);  
+                var parameters = (nowAddress.slice(nowAddress.indexOf('?') + 1, nowAddress.length)).split('&');  
+                for (var i = 0; i < parameters.length; i++) {  
+                    var varName = parameters[i].split('=')[0];  
+                    if (varName.toUpperCase() == name.toUpperCase()) {  
+                        rtnval = parameters[i].split('=')[1];  
+                        break;  
+                    }  
+                }  
+                return rtnval;  
+            }  
+        }  
+        var request = new Request();
+        var startx = request.getParameter('startx');
+        var starty = request.getParameter('starty');
+        var endx = request.getParameter('endx');
+        var endy = request.getParameter('endy');
+    </script>
     <style>
 body, html {height: 100%;}
 .map_wrap, .map_wrap * {margin:0; padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;}
 .map_wrap {position:relative;width:100%;height:100%;}
-#category {position:absolute;top:10px;left:10px;border-radius: 5px; border:1px solid #909090;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);background: #fff;overflow: hidden;z-index: 2;}
+#category {position:absolute;top:25px;left:10px;border-radius: 5px; border:1px solid #909090;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);background: #fff;overflow: hidden;z-index: 2;}
-#category li {float:left;list-style: none;width:50px;px;border-right:1px solid #acacac;padding:6px 0;text-align: center; cursor: pointer;}
+#category li {float:left;list-style: none;width:50px;border-right:1px solid #acacac;padding:6px 0;text-align: center; cursor: pointer;}
 #category li.on {background: #eee;}
 #category li:hover {background: #ffe6e6;border-left:1px solid #acacac;margin-left: -1px;}
 #category li:last-child{margin-right:0;border-right:0;}
@@ -34,7 +57,7 @@ body, html {height: 100%;}
 .map_wrap a, .map_wrap a:hover, .map_wrap a:active{color:#000;text-decoration: none;}
-#menu_wrap {position:absolute;top:0;left:1600px;bottom:0;width:250px;margin:10px 0 30px 10px;padding:5px;overflow-y:auto;background:rgba(255, 255, 255, 0.7);z-index: 1;font-size:12px;border-radius: 10px;}
+#menu_wrap {position:absolute;top:10px;left:1500px;bottom:70px;width:300px;margin:10px 0 30px 10px;padding:5px;overflow-y:auto;background:rgba(255, 255, 255, 0.7);z-index: 1;font-size:12px;border-radius: 10px;}
 .bg_white {background:#fff;}
 #placesList li {list-style: none;}
 #placesList .item {position:relative;border-bottom:1px solid #888;overflow: hidden;cursor: pointer;min-height: 65px;}
@@ -65,10 +88,68 @@ body, html {height: 100%;}
 #pagination .on {font-weight: bold; cursor: default;color:#777;}
 </style>
 </head>
-<body>
+<body style="background-color:#cccccc;">
+    <header class="box_header" style="float:left">
+        <h1 class="title_logo">
+            <a href="/" title="Pass-Path" class="link_logo" style="text-decoration:none; color:black; font-family: monospace;">
+
+              Pass-Path
+            
+          </a>
+        </h1>
+      </header>
+    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY 입력&libraries=services"></script>
+    <div style="float:left">&nbsp;&nbsp;출발지 :&nbsp;</div><div id="start"></div>
+    <script>
+        var geocoder = new kakao.maps.services.Geocoder();
+        var startcallback = function(result, status) {
+    if (status === kakao.maps.services.Status.OK) {
+        document.getElementById("start").innerHTML = result[0].address.address_name;
+        }
+    };
+        geocoder.coord2Address(starty, startx, startcallback);
+    </script>
+
+    <div style="float:left">&nbsp;&nbsp;도착지 :&nbsp;</div><div id="end"></div>
+    <script>
+        var endcallback = function(result, status) {
+    if (status === kakao.maps.services.Status.OK) {
+        document.getElementById("end").innerHTML = result[0].address.address_name;
+        }
+    };
+        geocoder.coord2Address(endy, endx, endcallback);
+    </script>
+
+    <div style="float:left">&nbsp;&nbsp;경유지 :&nbsp;</div><div id="pass1" style="float:left">경유지를 선택해주세요.(최대 5개) 선택하지 않아도 경로찾기는 가능합니다.</div><div id="pass2" style="float:left"></div><div id="pass3" style="float:left"></div>
+    <div id="pass4" style="float:left"></div><div id="pass5" style="float:left"></div>
+
+    <br>&nbsp;&nbsp;<button type="button" onclick="Search();" style="background-color:#B5B5FF;">경로 탐색</button>
+    <script>
+        function Search(){
+            location.href = 'http://map.naver.com/v5/directions/'+starty+','+startx+'/'+endy+','+endx+'/'+ passcount() +'/car?c';
+    }
+        function passcount(){
+            var passstr0 = '-';
+            var passstr = '';
+            for (var i = 0; i < passx.length; i++) {
+                if (i == 0) {
+                    passstr = passy[i] + ',' + passx[i];
+                }
+                else{
+                    passstr = passstr + ':' + passy[i] + ',' + passx[i];
+                }
+            }
+            if (passx.length == 0){
+                return passstr0;
+            }
+            else{
+                return passstr;
+            }
+        }
+    </script>
 <div class="map_wrap">
-    <div id="map" style="width:100%;height:100%;position:relative;overflow:hidden;"></div>
+    <div id="map" style="width:100%;height:90%;position:relative;overflow:hidden;"></div>
     <ul id="category">
         <li id="AT4" data-order="0"> 
             <span class="category_bg oil"></span>
@@ -93,28 +174,11 @@ body, html {height: 100%;}
         <div id="pagination"></div>
     </div>
 </div>
-<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=비밀&libraries=services"></script>
+
 <script>
-var Request = function() {  
+
-        this.getParameter = function(name) {  
+var passx = [];
-            var rtnval = '';  
+var passy = [];
-            var nowAddress = unescape(location.href);  
-            var parameters = (nowAddress.slice(nowAddress.indexOf('?') + 1, nowAddress.length)).split('&');  
-            for (var i = 0; i < parameters.length; i++) {  
-                var varName = parameters[i].split('=')[0];  
-                if (varName.toUpperCase() == name.toUpperCase()) {  
-                    rtnval = parameters[i].split('=')[1];  
-                    break;  
-                }  
-            }  
-            return rtnval;  
-        }  
-    }  
-var request = new Request();
-var startx = request.getParameter('startx');
-var starty = request.getParameter('starty');
-var endx = request.getParameter('endx');
-var endy = request.getParameter('endy');
 var sw = new kakao.maps.LatLng(startx, endy),
     ne = new kakao.maps.LatLng(endx, starty);
@@ -138,6 +202,7 @@ var map = new kakao.maps.Map(mapContainer, mapOption);
 // 장소 검색 객체를 생성합니다
 var ps = new kakao.maps.services.Places();
+
 // 지도에 idle 이벤트를 등록합니다
 kakao.maps.event.addListener(map, 'idle', searchPlaces);
@@ -215,7 +280,7 @@ function displayPlaces(places) {
             var placePosition = new kakao.maps.LatLng(places[i].y, places[i].x);
             // 마커를 생성하고 지도에 표시합니다
-            var marker = addMarker(placePosition, order);
+            var marker = addMarker(placePosition, i);
             var itemEl = getListItem(i, places[i]);
             // 마커와 검색결과 항목을 클릭 했을 때
             // 장소정보를 표출하도록 클릭 이벤트를 등록합니다
@@ -233,9 +298,7 @@ function displayPlaces(places) {
 function getListItem(index, places) {
     var el = document.createElement('li'),
-    itemStr = '<span class="markerbg marker_' + (index+1) + '"></span>' +
+    itemStr = '<span class="markerbg marker_' + (index+1) + '"></span>'  + '<div class="info">' + '   <h5>' + places.place_name + '</h5>';
-            '<div class="info">' +
-            '   <h5>' + places.place_name + '</h5>';
     if (places.road_address_name) {
     itemStr += '    <span>' + places.road_address_name + '</span>' +
@@ -245,8 +308,7 @@ function getListItem(index, places) {
     itemStr += '    <span>' +  places.address_name  + '</span>'; 
     }
-    itemStr += '  <span class="tel">' + places.phone  + '</span>' +
+    itemStr += '  <span class="tel">' + places.phone  + '</span>' + '<button type="button" onclick="passclick(' + places.x +',' + places.y + '); ">경유지로 추가</button>' + '</div>';           
-            '</div>';           
     el.innerHTML = itemStr;
     el.className = 'item';
@@ -254,14 +316,28 @@ function getListItem(index, places) {
     return el;
 }
+function passclick(x, y) {
+    passx.push(y);
+    passy.push(x);
+    var passcallback = function(result, status) {
+        if (status === kakao.maps.services.Status.OK) {
+            document.getElementById("pass"+i).innerHTML = result[0].address.address_name + ',&nbsp;';
+        }
+    };
+    for ( var i = 0; i < passx.length; i++ ){
+        geocoder.coord2Address(passy[i], passx[i], passcallback);
+    }
+    
+ }
+
 // 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
-function addMarker(position, order) {
+function addMarker(position, idx, title) {
-    var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
+    var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
-        imageSize = new kakao.maps.Size(27, 28),  // 마커 이미지의 크기
+        imageSize = new kakao.maps.Size(36, 37),  // 마커 이미지의 크기
         imgOptions =  {
-            spriteSize : new kakao.maps.Size(72, 208), // 스프라이트 이미지의 크기
+            spriteSize : new kakao.maps.Size(36, 694), // 스프라이트 이미지의 크기
-            spriteOrigin : new kakao.maps.Point(46, (order*36)), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
+            spriteOrigin : new kakao.maps.Point(0, (idx*46)+10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
-            offset: new kakao.maps.Point(11, 28) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
+            offset: new kakao.maps.Point(13,37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
         },
         markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions),
             marker = new kakao.maps.Marker({
@@ -394,5 +470,6 @@ function changeCategoryClass(el) {
     } 
 } 
 </script>
+<script>AT4.click();</script>
 </body>
 </html>
\ No newline at end of file