최지우 / oss_project

Go to a project
Toggle navigation Toggle navigation pinning
최지우
b1db42fa 1 parent 3a6af168

경로검색 알고리즘 추가

Inline Side-by-side
Showing 5 changed files with 155 additions and 102 deletions
......@@ -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 nearRouter = require('./routes/near')
var searchRouter = require('./routes/search');
var nearRouter = require('./routes/near');
var app = express();
// view engine setup
......
......@@ -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="/near" class="link_detail">현재지</a>
<a href="/pass" class="link_detail">들를 곳 찾기</a><br>
<a href="/near" class="link_detail">내 주변 장소</a>
</div>
</div>
</div>
......
......@@ -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%;}
#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 li {float:left;list-style: none;width:50px;px;border-right:1px solid #acacac;padding:6px 0;text-align: center; cursor: pointer;}
.map_wrap {position:relative;width:100%;height:95%;}
#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;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>
<p style="margin-top:-12px">
<body style="background-color:#cccccc;">
<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}),
......
......@@ -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>
<p>출발지와 도착지를 설정해주세요!</p>
<button type="button" onclick="Search();">검색</button>
<body style="background-color:#cccccc;">
<header class="box_header" style="float:left; color: white;">
<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>
<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 = {
......
......@@ -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 li {float:left;list-style: none;width:50px;px;border-right:1px solid #acacac;padding:6px 0;text-align: center; cursor: pointer;}
#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;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 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');
var passx = [];
var passy = [];
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>' +
'<div class="info">' +
' <h5>' + places.place_name + '</h5>';
itemStr = '<span class="markerbg marker_' + (index+1) + '"></span>' + '<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>' +
'</div>';
itemStr += ' <span class="tel">' + places.phone + '</span>' + '<button type="button" onclick="passclick(' + places.x +',' + places.y + '); ">경유지로 추가</button>' + '</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) {
var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
imageSize = new kakao.maps.Size(27, 28), // 마커 이미지의 크기
function addMarker(position, idx, title) {
var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
imageSize = new kakao.maps.Size(36, 37), // 마커 이미지의 크기
imgOptions = {
spriteSize : new kakao.maps.Size(72, 208), // 스프라이트 이미지의 크기
spriteOrigin : new kakao.maps.Point(46, (order*36)), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
offset: new kakao.maps.Point(11, 28) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
spriteSize : new kakao.maps.Size(36, 694), // 스프라이트 이미지의 크기
spriteOrigin : new kakao.maps.Point(0, (idx*46)+10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
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
......