최지우

Main page & 주변 장소 검색 기능 추가

1 ## Subject 1 ## Subject
2 -Kakao 지도 API를 이용한 여행 경로 추천 서비스 2 +Kakao 지도 API를 이용한 여행 경로 추천 서비스
3 -출발지와 도착지를 설정하면 사이 경로의 유명 관광지/음식점/카페 등을 카테고리 별로 반환 3 +출발지와 도착지를 설정하면 사이 경로의 유명 관광지/음식점/카페 등을 카테고리 별로 반환
4 -원하는 장소를 경유지로 추가하여 경로를 재검색 4 +원하는 장소를 경유지로 추가하여 경로를 재검색
5 5
6 ## How to build 6 ## How to build
7 +### git clone
8 +
9 + ~$ git clone http://khuhub.khu.ac.kr/2014104158/oss_project.git
10 +
7 ### npm 11 ### npm
8 12
9 - ~$ npm install 13 + ~/oss_project$ npm install
10 14
11 ### Kakao 지도 API 15 ### Kakao 지도 API
12 -<https://apis.map.kakao.com/web/> 16 +<https://apis.map.kakao.com/web/>
13 -카카오계정을 통해 APP KEY를 발급받은 후 views/main.ejs, views/search.ejs의 아래 부분에 추가 17 +카카오계정을 통해 APP KEY를 발급받은 후 views/main.ejs, views/search.ejs, views/near.ejs의 아래 부분에 추가
14 -src = "//dapi.kakao.com/v2/maps/sdk.js?appkey=APPKEY&libraries=services" 18 +src = "//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY 입력&libraries=services"
15 19
16 ## How to use 20 ## How to use
17 -- 메인 페이지 지도상에서 출발지와 도착지를 선택하고 검색버튼 클릭 21 +* 메인 페이지에서 '여행 경유지 추천' 서비스와 '주변 장소' 서비스 선택 가능
18 -- 검색된 페이지에서 이동 경로에 있는 카테고리 별 장소(관광명소, 숙박, 카페, 음식점)를 검색 가능 22 +
19 -- 지도 상에 마커와 인포윈도우를 통해 결과를 출력 23 +- '여행 경유지 추천' 서비스는 출발지와 도착지를 설정하고 검색된 페이지에서 이동 경로에 있는 카테고리 별 장소(관광명소, 숙박, 카페, 음식점)를 검색 가능
20 -- 원하는 경유지를 선택하여 경로 재검색 가능 24 ++ 지도 상에 마커와 인포윈도우를 통해 결과를 출력
25 ++ 원하는 경유지를 선택하여 경로 재검색 가능
26 +
27 +- '주변 장소 검색' 서비스는 현재 위치를 설정해주면 주변 카테고리 별 장소(관광명소, 숙박, 카페, 음식점, 마트, 은행)를 검색 가능
28 ++ 지도 상에 마커와 인포윈도우를 통해 결과를 출력
29 ++ 마커를 클릭하면 해당 장소의 정보 조회 가능
21 30
22 ## License 31 ## License
23 MIT License 32 MIT License
24 33
25 -Copyright (c) 2020 Jiwoo Choi 34 +Copyright (c) 2020 Jiwoo Choi
26 Permission is hereby granted, free of charge, to any person 35 Permission is hereby granted, free of charge, to any person
27 obtaining a copy of this software and associated documentation 36 obtaining a copy of this software and associated documentation
28 files (the "Software"), to deal in the Software without 37 files (the "Software"), to deal in the Software without
......
...@@ -4,8 +4,10 @@ var path = require('path'); ...@@ -4,8 +4,10 @@ var path = require('path');
4 var cookieParser = require('cookie-parser'); 4 var cookieParser = require('cookie-parser');
5 var logger = require('morgan'); 5 var logger = require('morgan');
6 6
7 -var mainRouter = require('./routes/main'); 7 +var mainRouter = require('./routes/main')
8 +var passRouter = require('./routes/pass');
8 var searchRouter = require('./routes/search') 9 var searchRouter = require('./routes/search')
10 +var nearRouter = require('./routes/near')
9 var app = express(); 11 var app = express();
10 12
11 // view engine setup 13 // view engine setup
...@@ -19,7 +21,9 @@ app.use(cookieParser()); ...@@ -19,7 +21,9 @@ app.use(cookieParser());
19 app.use(express.static(path.join(__dirname, 'public'))); 21 app.use(express.static(path.join(__dirname, 'public')));
20 22
21 app.use('/', mainRouter); 23 app.use('/', mainRouter);
24 +app.use('/pass', passRouter);
22 app.use('/search', searchRouter); 25 app.use('/search', searchRouter);
26 +app.use('/near', nearRouter);
23 27
24 // catch 404 and forward to error handler 28 // catch 404 and forward to error handler
25 app.use(function(req, res, next) { 29 app.use(function(req, res, next) {
......
1 +var express = require('express');
2 +var router = express.Router();
3 +
4 +router.get('/', function(req, res, next) {
5 + res.render('near', { title: 'MINE' });
6 +});
7 +
8 +module.exports = router;
1 +var express = require('express');
2 +var router = express.Router();
3 +
4 +router.get('/', function(req, res, next) {
5 + res.render('pass', { title: 'MINE' });
6 +});
7 +
8 +module.exports = router;
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset="utf-8">
5 + <title>Pass-Path</title>
6 + <style>body, html {height: 100%;}</style>
7 +
8 +</head>
9 +<body>
10 +<p>출발지와 도착지를 설정해주세요!</p>
11 +
12 +<button type="button" onclick="Search();">검색</button>
13 +<script>
14 + function Search(){
15 + var startx = startMarker.getPosition().getLat();
16 + var starty = startMarker.getPosition().getLng();
17 + var endx = arriveMarker.getPosition().getLat();
18 + var endy = arriveMarker.getPosition().getLng();
19 + location.href ='/search?startx='+ startx +'&starty='+ starty +'&endx=' + endx + '&endy=' + endy;
20 +}
21 +</script>
22 +<div id="map" style="width:100%;height:90%;"></div>
23 +
24 +
25 +
26 +<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=비밀"></script>
27 +<script>
28 +var mapContainer = document.getElementById('map'), // 지도를 표시할 div
29 + mapOption = {
30 + center: new kakao.maps.LatLng(35.950000, 128.250000),
31 + level: 12 // 지도의 확대 레벨
32 + };
33 +
34 +var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
35 +
36 +var startSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_b.png', // 출발 마커이미지의 주소입니다
37 + startSize = new kakao.maps.Size(50, 45), // 출발 마커이미지의 크기입니다
38 + startOption = {
39 + offset: new kakao.maps.Point(15, 43) // 출발 마커이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
40 + };
41 +
42 +// 출발 마커 이미지를 생성합니다
43 +var startImage = new kakao.maps.MarkerImage(startSrc, startSize, startOption);
44 +
45 +var startDragSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_drag.png', // 출발 마커의 드래그 이미지 주소입니다
46 + startDragSize = new kakao.maps.Size(50, 64), // 출발 마커의 드래그 이미지 크기입니다
47 + startDragOption = {
48 + offset: new kakao.maps.Point(15, 54) // 출발 마커의 드래그 이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
49 + };
50 +
51 +// 출발 마커의 드래그 이미지를 생성합니다
52 +var startDragImage = new kakao.maps.MarkerImage(startDragSrc, startDragSize, startDragOption);
53 +
54 +// 출발 마커가 표시될 위치입니다
55 +var startPosition = new kakao.maps.LatLng(37.571589, 126.975005);
56 +
57 +
58 +// 출발 마커를 생성합니다
59 +var startMarker = new kakao.maps.Marker({
60 + map: map, // 출발 마커가 지도 위에 표시되도록 설정합니다
61 + position: startPosition,
62 + draggable: true, // 출발 마커가 드래그 가능하도록 설정합니다
63 + image: startImage // 출발 마커이미지를 설정합니다
64 +});
65 +
66 +
67 +// 출발 마커에 dragstart 이벤트를 등록합니다
68 +kakao.maps.event.addListener(startMarker, 'dragstart', function() {
69 + // 출발 마커의 드래그가 시작될 때 마커 이미지를 변경합니다
70 + startMarker.setImage(startDragImage);
71 +});
72 +
73 +// 출발 마커에 dragend 이벤트를 등록합니다
74 +kakao.maps.event.addListener(startMarker, 'dragend', function() {
75 + // 출발 마커의 드래그가 종료될 때 마커 이미지를 원래 이미지로 변경합니다
76 + startMarker.setImage(startImage);
77 +});
78 +
79 +var arriveSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/blue_b.png', // 도착 마커이미지 주소입니다
80 +arriveSize = new kakao.maps.Size(50, 45), // 도착 마커이미지의 크기입니다
81 +arriveOption = {
82 + offset: new kakao.maps.Point(15, 43) // 도착 마커이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
83 +};
84 +
85 +
86 +// 도착 마커 이미지를 생성합니다
87 +var arriveImage = new kakao.maps.MarkerImage(arriveSrc, arriveSize, arriveOption);
88 +
89 +var arriveDragSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/blue_drag.png', // 도착 마커의 드래그 이미지 주소입니다
90 + arriveDragSize = new kakao.maps.Size(50, 64), // 도착 마커의 드래그 이미지 크기입니다
91 + arriveDragOption = {
92 + offset: new kakao.maps.Point(15, 54) // 도착 마커의 드래그 이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
93 + };
94 +
95 +// 도착 마커의 드래그 이미지를 생성합니다
96 +var arriveDragImage = new kakao.maps.MarkerImage(arriveDragSrc, arriveDragSize, arriveDragOption);
97 +
98 +// 도착 마커가 표시될 위치입니다
99 +var arrivePosition = new kakao.maps.LatLng(37.280916, 127.102116);
100 +
101 +// 도착 마커를 생성합니다
102 +var arriveMarker = new kakao.maps.Marker({
103 + map: map, // 도착 마커가 지도 위에 표시되도록 설정합니다
104 + position: arrivePosition,
105 + draggable: true, // 도착 마커가 드래그 가능하도록 설정합니다
106 + image: arriveImage // 도착 마커이미지를 설정합니다
107 +});
108 +
109 +// 도착 마커에 dragstart 이벤트를 등록합니다
110 +kakao.maps.event.addListener(arriveMarker, 'dragstart', function() {
111 + // 도착 마커의 드래그가 시작될 때 마커 이미지를 변경합니다
112 + arriveMarker.setImage(arriveDragImage);
113 +});
114 +
115 +// 도착 마커에 dragend 이벤트를 등록합니다
116 +kakao.maps.event.addListener(arriveMarker, 'dragend', function() {
117 + // 도착 마커의 드래그가 종료될 때 마커 이미지를 원래 이미지로 변경합니다
118 + arriveMarker.setImage(arriveImage);
119 +});
120 +</script>
121 +
122 +
123 +</body>
124 +</html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,8 +4,9 @@ ...@@ -4,8 +4,9 @@
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title>검색 결과</title> 5 <title>검색 결과</title>
6 <style> 6 <style>
7 +body, html {height: 100%;}
7 .map_wrap, .map_wrap * {margin:0; padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;} 8 .map_wrap, .map_wrap * {margin:0; padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;}
8 -.map_wrap {position:relative;width:100%;height:800px;} 9 +.map_wrap {position:relative;width:100%;height:100%;}
9 #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;} 10 #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;}
10 #category li {float:left;list-style: none;width:50px;px;border-right:1px solid #acacac;padding:6px 0;text-align: center; cursor: pointer;} 11 #category li {float:left;list-style: none;width:50px;px;border-right:1px solid #acacac;padding:6px 0;text-align: center; cursor: pointer;}
11 #category li.on {background: #eee;} 12 #category li.on {background: #eee;}
...@@ -67,7 +68,7 @@ ...@@ -67,7 +68,7 @@
67 <body> 68 <body>
68 69
69 <div class="map_wrap"> 70 <div class="map_wrap">
70 - <div id="map" style="width:100%;height:800px;position:relative;overflow:hidden;"></div> 71 + <div id="map" style="width:100%;height:100%;position:relative;overflow:hidden;"></div>
71 <ul id="category"> 72 <ul id="category">
72 <li id="AT4" data-order="0"> 73 <li id="AT4" data-order="0">
73 <span class="category_bg oil"></span> 74 <span class="category_bg oil"></span>
...@@ -128,7 +129,7 @@ var placeOverlay = new kakao.maps.CustomOverlay({zIndex:1}), ...@@ -128,7 +129,7 @@ var placeOverlay = new kakao.maps.CustomOverlay({zIndex:1}),
128 var mapContainer = document.getElementById('map'), // 지도를 표시할 div 129 var mapContainer = document.getElementById('map'), // 지도를 표시할 div
129 mapOption = { 130 mapOption = {
130 center: new kakao.maps.LatLng(endx, endy), // 지도의 중심좌표 131 center: new kakao.maps.LatLng(endx, endy), // 지도의 중심좌표
131 - level: 8 // 지도의 확대 레벨 132 + level: 11 // 지도의 확대 레벨
132 }; 133 };
133 134
134 // 지도를 생성합니다 135 // 지도를 생성합니다
......