경로검색 알고리즘 추가

최지우
Commit b1db42fa264c6305d108794fdce1288e910f4b69 b1db42fa 1 parent 3a6af168
Showing 5 changed files with 40 additions and 64 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