Showing
8 changed files
with
170 additions
and
16 deletions
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) { | ... | ... |
routes/near.js
0 → 100644
routes/pass.js
0 → 100644
This diff is collapsed. Click to expand it.
views/near.ejs
0 → 100644
This diff is collapsed. Click to expand it.
views/pass.ejs
0 → 100644
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 | // 지도를 생성합니다 | ... | ... |
-
Please register or login to post a comment