김태민 / OpenSource_Project

Go to a project
Toggle navigation Toggle navigation pinning
김민석
8bbdd881 1 parent 999f57a4

지도부분 추가

Expand all
Inline Side-by-side
Showing 9 changed files with 796 additions and 177 deletions
...@@ -18,9 +18,9 @@ app.get(['/food', '/food/:id'], function(req, res) { ...@@ -18,9 +18,9 @@ app.get(['/food', '/food/:id'], function(req, res) {
18 var id = req.params.id; 18 var id = req.params.id;
19 if (id) { 19 if (id) {
20 if (id == 'search') { 20 if (id == 'search') {
21 - res.render('search.ejs', { 21 + res.render('map.ejs', {
22 title: 'Searching', 22 title: 'Searching',
23 - description: 'You can search for food here.' 23 + searching: '경희대학교 국제캠퍼스'
24 }); 24 });
25 } else if (id == 'recommendation') { 25 } else if (id == 'recommendation') {
26 res.render('recommendation.ejs', { 26 res.render('recommendation.ejs', {
...@@ -38,8 +38,12 @@ app.get(['/food', '/food/:id'], function(req, res) { ...@@ -38,8 +38,12 @@ app.get(['/food', '/food/:id'], function(req, res) {
38 38
39 //사용자가 호출한 search page 39 //사용자가 호출한 search page
40 app.post('/food/search', function(req, res) { 40 app.post('/food/search', function(req, res) {
41 - var title=req.body.title; 41 + var title = req.body.title;
42 - res.redirect("https://www.google.com/search?q="+title+"&oq="+title+"&aqs=chrome..69i57j0l3j69i60j69i61.3149j0j9&sourceid=chrome&ie=UTF-8") 42 + res.render('map.ejs', {
43 + title: 'Search',
44 + searching: title
45 + });
46 + // res.redirect("https://www.google.com/search?q=" + title + "&oq=" + title + "&aqs=chrome..69i57j0l3j69i60j69i61.3149j0j9&sourceid=chrome&ie=UTF-8")
43 }) 47 })
44 48
45 //사용자가 호출한 recommendation page 49 //사용자가 호출한 recommendation page
...@@ -54,25 +58,66 @@ app.post('/food/recommendation', function(req, res) { ...@@ -54,25 +58,66 @@ app.post('/food/recommendation', function(req, res) {
54 var shape = req.body.shape; 58 var shape = req.body.shape;
55 var kinds = req.body.kinds; 59 var kinds = req.body.kinds;
56 60
57 - var rand = Math.floor(Math.random() * 3); //(Math.random() * (max - min)) + min 61 + if (!Array.isArray(shape) && shape) {
58 - var i = 0; 62 + var shape = [];
63 + shape.push(req.body.shape);
64 + }
65 + if (!Array.isArray(kinds) && kinds) {
66 + var kinds = [];
67 + kinds.push(req.body.kinds);
68 + }
69 + var set1 = new Set();
70 + var set2 = new Set();
71 + var set3 = new Set();
72 +
73 + function add(users, price, shape, kinds, callback) {
59 for (var foods in users) { 74 for (var foods in users) {
60 - if (rand == i) { 75 + if (shape) {
61 - var food_value=foods; 76 + for (var i = 0; i < shape.length; i++) {
62 - // $('<li>').text(foods).appendTo('#users'); 77 + if (users[foods]['shape'] == shape[i]) {
78 + set1.add(foods);
79 + }
80 + }
81 + } else {
82 + set1.add(foods);
83 + }
84 + if (kinds) {
85 + for (var j = 0; j < kinds.length; j++) {
86 + if (users[foods]['kinds'] == kinds[j]) {
87 + set2.add(foods);
88 + }
89 + }
90 + } else {
91 + set2.add(foods);
92 + }
93 + if (!price || (price && users[foods]['price'] <= Number(price) + 5000 && users[foods]['price'] >= Number(price) - 5000)) {
94 + set3.add(foods);
63 } 95 }
64 - i++; 96 + }
97 + callback(set1, set2, set3);
65 } 98 }
66 99
100 + add(users, price, shape, kinds, function(set1, set2, set3) {
101 + let difference1 = new Set([...set1].filter(i => set2.has(i)));
102 + let difference2 = new Set([...difference1].filter(i => set3.has(i)));
103 + var food = [...difference2];
104 + var length = food.length;
105 + console.log('food 목록: '+food);
106 + console.log('food 갯수: '+length);
107 + var rand = Math.floor(Math.random() * length); //(Math.random() * (max - min)) + min
108 + var food_value = food[rand];
109 + console.log('랜덤 food 번호: '+rand);
67 res.render('print.ejs', { 110 res.render('print.ejs', {
68 title: 'Recommendation', 111 title: 'Recommendation',
69 description: 'We recommend this...', 112 description: 'We recommend this...',
70 - // name: users,
71 randvalue: food_value 113 randvalue: food_value
72 - }); 114 + }); //rander closed
115 + }); //add closed
73 } 116 }
74 - }); 117 + }); //readFile closed
75 -}) 118 +}); //post closed
119 +
120 +
76 121
77 app.listen(3000, function() { 122 app.listen(3000, function() {
78 console.log('Connected, 3000'); 123 console.log('Connected, 3000');
......
1 { 1 {
2 - "바게뜨":{ 2 + "짜장면": {
3 + "price": 5000,
4 + "shape": "면",
5 + "kinds": "중식"
6 + },
7 + "짬뽕": {
8 + "price": 6000,
9 + "shape": "면",
10 + "kinds": "중식"
11 + },
12 + "우동": {
13 + "price": 6000,
14 + "shape": "면",
15 + "kinds": "중식"
16 + },
17 + "울면": {
18 + "price": 6000,
19 + "shape": "면",
20 + "kinds": "중식"
21 + },
22 + "간짜장": {
23 + "price": 6000,
24 + "shape": "면",
25 + "kinds": "중식"
26 + },
27 + "냉면": {
28 + "price": 6000,
29 + "shape": "면",
30 + "kinds": "중식"
31 + },
32 + "중국냉면": {
33 + "price": 9000,
34 + "shape": "면",
35 + "kinds": "중식"
36 + },
37 + "만두": {
38 + "price": 5000,
39 + "shape": "기타",
40 + "kinds": "중식"
41 + },
42 + "볶음밥": {
43 + "price": 5000,
44 + "shape": "밥",
45 + "kinds": "중식"
46 + },
47 + "짬뽕밥": {
48 + "price": 6000,
49 + "shape": "밥",
50 + "kinds": "중식"
51 + },
52 + "짜장밥": {
53 + "price": 6000,
54 + "shape": "밥",
55 + "kinds": "중식"
56 + },
57 + "잡채밥": {
58 + "price": 7000,
59 + "shape": "밥",
60 + "kinds": "중식"
61 + },
62 + "제육덮밥": {
63 + "price": 7000,
64 + "shape": "밥",
65 + "kinds": "한식"
66 + },
67 + "오징어덮밥": {
68 + "price": 7000,
69 + "shape": "밥",
70 + "kinds": "한식"
71 + },
72 + "오므라이스": {
73 + "price": 7000,
74 + "shape": "밥",
75 + "kinds": "한식"
76 + },
77 + "새우볶음밥": {
78 + "price": 7000,
79 + "shape": "밥",
80 + "kinds": "한식"
81 + },
82 + "김치볶음밥": {
83 + "price": 7000,
84 + "shape": "밥",
85 + "kinds": "한식"
86 + },
87 + "소고기덮밥": {
88 + "price": 8000,
89 + "shape": "밥",
90 + "kinds": "한식"
91 + },
92 + "탕수육": {
93 + "price": 15000,
94 + "shape": "고기",
95 + "kinds": "중식"
96 + },
97 + "깐풍기": {
3 "price": 20000, 98 "price": 20000,
4 - "shape": "빵", 99 + "shape": "고기",
5 - "kinds": "양식" 100 + "kinds": "중식"
101 + },
102 + "난자완스": {
103 + "price": 20000,
104 + "shape": "고기",
105 + "kinds": "중식"
106 + },
107 + "깐쇼새우": {
108 + "price": 20000,
109 + "shape": "고기",
110 + "kinds": "중식"
6 }, 111 },
7 - "도시락":{ 112 + "초밥": {
8 "price": 10000, 113 "price": 10000,
9 "shape": "밥", 114 "shape": "밥",
10 - "kinds": "한식" 115 + "kinds": "일식"
116 + },
117 + "회덮밥": {
118 + "price": 10000,
119 + "shape": "밥",
120 + "kinds": "일식"
11 }, 121 },
12 - "스파게티":{ 122 + "회": {
123 + "price": 20000,
124 + "shape": "고기",
125 + "kinds": "일식"
126 + },
127 + "라멘": {
13 "price": 10000, 128 "price": 10000,
14 "shape": "면", 129 "shape": "면",
15 - "kinds": "양식" 130 + "kinds": "일식"
131 + },
132 + "돈까스": {
133 + "price": 8000,
134 + "shape": "고기",
135 + "kinds": "일식"
16 }, 136 },
17 - "햄버거":{ 137 + "순대국밥": {
138 + "price": 6000,
139 + "shape": "밥",
140 + "kinds": "한식"
141 + },
142 + "뼈다귀해장국": {
143 + "price": 7000,
144 + "shape": "밥",
145 + "kinds": "한식"
146 + },
147 + "돼지국밥": {
148 + "price": 6000,
149 + "shape": "밥",
150 + "kinds": "한식"
151 + },
152 + "콩나물국밥": {
153 + "price": 5000,
154 + "shape": "밥",
155 + "kinds": "한식"
156 + },
157 + "굴국밥": {
158 + "price": 6000,
159 + "shape": "밥",
160 + "kinds": "한식"
161 + },
162 + "육개장": {
163 + "price": 8000,
164 + "shape": "밥",
165 + "kinds": "한식"
166 + },
167 + "라면": {
168 + "price": 1000,
169 + "shape": "면",
170 + "kinds": "한식"
171 + },
172 + "순두부찌개": {
173 + "price": 7000,
174 + "shape": "밥",
175 + "kinds": "한식"
176 + },
177 + "김치찌개": {
178 + "price": 7000,
179 + "shape": "밥",
180 + "kinds": "한식"
181 + },
182 + "생선구이": {
18 "price": 10000, 183 "price": 10000,
19 - "shape": "빵", 184 + "shape": "고기",
185 + "kinds": "한식"
186 + },
187 + "된장찌개": {
188 + "price": 7000,
189 + "shape": "밥",
190 + "kinds": "한식"
191 + },
192 + "청국장": {
193 + "price": 8000,
194 + "shape": "밥",
195 + "kinds": "한식"
196 + },
197 + "갈비탕": {
198 + "price": 8000,
199 + "shape": "밥",
200 + "kinds": "한식"
201 + },
202 + "내장탕": {
203 + "price": 8000,
204 + "shape": "밥",
205 + "kinds": "한식"
206 + },
207 + "곰탕": {
208 + "price": 8000,
209 + "shape": "밥",
210 + "kinds": "한식"
211 + },
212 + "부대찌개": {
213 + "price": 8000,
214 + "shape": "밥",
215 + "kinds": "한식"
216 + },
217 + "삼계탕": {
218 + "price": 15000,
219 + "shape": "밥",
220 + "kinds": "한식"
221 + },
222 + "오뎅탕": {
223 + "price": 5000,
224 + "shape": "밥",
225 + "kinds": "한식"
226 + },
227 + "참치마요": {
228 + "price": 4000,
229 + "shape": "밥",
230 + "kinds": "한식"
231 + },
232 + "치킨마요": {
233 + "price": 4000,
234 + "shape": "밥",
235 + "kinds": "한식"
236 + },
237 + "스팸마요": {
238 + "price": 4000,
239 + "shape": "밥",
240 + "kinds": "한식"
241 + },
242 + "떡볶이": {
243 + "price": 5000,
244 + "shape": "밥",
245 + "kinds": "한식"
246 + },
247 + "순대": {
248 + "price": 5000,
249 + "shape": "고기",
250 + "kinds": "한식"
251 + },
252 + "치킨": {
253 + "price": 20000,
254 + "shape": "고기",
20 "kinds": "양식" 255 "kinds": "양식"
21 } 256 }
257 +
258 +
259 +
260 +
22 } 261 }
......
...@@ -88,7 +88,8 @@ ...@@ -88,7 +88,8 @@
88 <ul class="nav navbar-nav menu_nav justify-content-center"> 88 <ul class="nav navbar-nav menu_nav justify-content-center">
89 <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li> 89 <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
90 <li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li> 90 <li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li>
91 - <li class="nav-item"><a class="nav-link" href="service.html">추천</a> 91 + <li class="nav-item"><a class="nav-link" href="service.html">추천</a></li>
92 + <li class="nav-item"><a class="nav-link" href="blog.html">지도</a>
92 </ul> 93 </ul>
93 <ul class="nav navbar-nav navbar-right"> 94 <ul class="nav navbar-nav navbar-right">
94 <li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li> 95 <li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
......
This diff is collapsed. Click to expand it.
...@@ -38,7 +38,8 @@ ...@@ -38,7 +38,8 @@
38 <ul class="nav navbar-nav menu_nav justify-content-center"> 38 <ul class="nav navbar-nav menu_nav justify-content-center">
39 <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li> 39 <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
40 <li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li> <!-- 나중에 연결 html이름 수정--> 40 <li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li> <!-- 나중에 연결 html이름 수정-->
41 - <li class="nav-item"><a class="nav-link" href="service.html">추천</a> 41 + <li class="nav-item"><a class="nav-link" href="service.html">추천</a></li>
42 + <li class="nav-item"><a class="nav-link" href="blog.html">지도</a>
42 </ul> 43 </ul>
43 <ul class="nav navbar-nav navbar-right"> 44 <ul class="nav navbar-nav navbar-right">
44 <li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li> 45 <li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
......
1 +.map_wrap, .map_wrap * {
2 + margin: 0;
3 + padding: 0;
4 + font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;
5 + font-size: 12px;
6 +}
7 +
8 +.map_wrap a, .map_wrap a:hover, .map_wrap a:active {
9 + color: #000;
10 + text-decoration: none;
11 +}
12 +
13 +.map_wrap {
14 + position: relative;
15 + width: 100%;
16 + height: 500px;
17 +}
18 +
19 +#map {
20 + top: 0;
21 + left: 0;
22 + width: 100%;
23 + height: 100%;
24 + position: relative;
25 + overflow: hidden;
26 +}
27 +
28 +#menu_wrap {
29 + position: absolute;
30 + top: 0;
31 + left:0;
32 + bottom: 0;
33 + width: 250px;
34 + margin: 10px 0 30px 10px;
35 + padding: 5px;
36 + overflow-y: auto;
37 + background: rgba(255, 255, 255, 0.7);
38 + z-index: 1;
39 + font-size: 12px;
40 + border-radius: 10px;
41 +}
42 +
43 +.bg_white {
44 + background: #fff;
45 +}
46 +
47 +#menu_wrap hr {
48 + display: block;
49 + height: 1px;
50 + border: 0;
51 + border-top: 2px solid #5F5F5F;
52 + margin: 3px 0;
53 +}
54 +
55 +#menu_wrap .option {
56 + text-align: center;
57 +}
58 +
59 +#menu_wrap .option p {
60 + margin: 10px 0;
61 +}
62 +
63 +#menu_wrap .option button {
64 + margin-left: 5px;
65 +}
66 +
67 +#placesList li {
68 + list-style: none;
69 +}
70 +
71 +#placesList .item {
72 + position: relative;
73 + border-bottom: 1px solid #888;
74 + overflow: hidden;
75 + cursor: pointer;
76 + min-height: 65px;
77 +}
78 +
79 +#placesList .item span {
80 + display: block;
81 + margin-top: 4px;
82 +}
83 +
84 +#placesList .item h5, #placesList .item .info {
85 + text-overflow: ellipsis;
86 + overflow: hidden;
87 + white-space: nowrap;
88 +}
89 +
90 +#placesList .item .info {
91 + padding: 10px 0 10px 55px;
92 +}
93 +
94 +#placesList .info .gray {
95 + color: #8a8a8a;
96 +}
97 +
98 +#placesList .info .jibun {
99 + padding-left: 26px;
100 + background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;
101 +}
102 +
103 +#placesList .info .tel {
104 + color: #009900;
105 +}
106 +
107 +#placesList .item .markerbg {
108 + float: left;
109 + position: absolute;
110 + width: 36px;
111 + height: 37px;
112 + margin: 10px 0 0 10px;
113 + background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png) no-repeat;
114 +}
115 +
116 +#placesList .item .marker_1 {
117 + background-position: 0 -10px;
118 +}
119 +
120 +#placesList .item .marker_2 {
121 + background-position: 0 -56px;
122 +}
123 +
124 +#placesList .item .marker_3 {
125 + background-position: 0 -102px
126 +}
127 +
128 +#placesList .item .marker_4 {
129 + background-position: 0 -148px;
130 +}
131 +
132 +#placesList .item .marker_5 {
133 + background-position: 0 -194px;
134 +}
135 +
136 +#placesList .item .marker_6 {
137 + background-position: 0 -240px;
138 +}
139 +
140 +#placesList .item .marker_7 {
141 + background-position: 0 -286px;
142 +}
143 +
144 +#placesList .item .marker_8 {
145 + background-position: 0 -332px;
146 +}
147 +
148 +#placesList .item .marker_9 {
149 + background-position: 0 -378px;
150 +}
151 +
152 +#placesList .item .marker_10 {
153 + background-position: 0 -423px;
154 +}
155 +
156 +#placesList .item .marker_11 {
157 + background-position: 0 -470px;
158 +}
159 +
160 +#placesList .item .marker_12 {
161 + background-position: 0 -516px;
162 +}
163 +
164 +#placesList .item .marker_13 {
165 + background-position: 0 -562px;
166 +}
167 +
168 +#placesList .item .marker_14 {
169 + background-position: 0 -608px;
170 +}
171 +
172 +#placesList .item .marker_15 {
173 + background-position: 0 -654px;
174 +}
175 +
176 +#pagination {
177 + margin: 10px auto;
178 + text-align: center;
179 +}
180 +
181 +#pagination a {
182 + display: inline-block;
183 + margin-right: 10px;
184 +}
185 +
186 +#pagination .on {
187 + font-weight: bold;
188 + cursor: default;
189 + color: #777;
190 +}
1 -<!doctype html> 1 +<!DOCTYPE html>
2 -<html lang="en"> 2 +<html lang="en" dir="ltr">
3 - <head>
4 - <!-- Required meta tags -->
5 - <meta charset="utf-8">
6 - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7 - <link rel="icon" href="img/favicon.png" type="image/png">
8 - <title>음식 추천 웹사이트 이름</title>
9 - <!-- Bootstrap CSS -->
10 - <link rel="stylesheet" href="css/bootstrap.css">
11 - <link rel="stylesheet" href="vendors/linericon/style.css">
12 - <link rel="stylesheet" href="css/font-awesome.min.css">
13 - <link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
14 - <link rel="stylesheet" href="vendors/lightbox/simpleLightbox.css">
15 - <link rel="stylesheet" href="vendors/nice-select/css/nice-select.css">
16 - <link rel="stylesheet" href="vendors/animate-css/animate.css">
17 - <link rel="stylesheet" href="vendors/swiper/css/swiper.min.css">
18 - <!-- main css -->
19 - <link rel="stylesheet" href="css/style.css">
20 - <link rel="stylesheet" href="css/responsive.css">
21 - </head>
22 - <body>
23 3
24 - <!--================Header Menu Area =================--> 4 +<head>
25 - <header class="header_area"> 5 + <meta charset="utf-8">
26 - <div class="main_menu"> 6 + <title>Test</title>
27 - <nav class="navbar navbar-expand-lg navbar-light"> 7 + <link rel="stylesheet" href="/../style.css">
28 - <div class="container box_1620"> 8 +</head>
29 - <!-- Brand and toggle get grouped for better mobile display -->
30 - <a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></a>
31 - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
32 - <span class="icon-bar"></span>
33 - <span class="icon-bar"></span>
34 - <span class="icon-bar"></span>
35 - </button>
36 - <!-- Collect the nav links, forms, and other content for toggling -->
37 - <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
38 - <ul class="nav navbar-nav menu_nav justify-content-center">
39 - <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
40 - <li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li>
41 - <li class="nav-item"><a class="nav-link" href="service.html">추천</a>
42 - </ul>
43 - <ul class="nav navbar-nav navbar-right">
44 - <li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
45 - </ul>
46 - </div>
47 - </div>
48 - </nav>
49 - </div>
50 - </header>
51 - <!--================Header Menu Area =================-->
52 9
53 - <!--================Home Banner Area =================--> 10 +<body>
54 - <section class="home_banner_area"> 11 + <h1><a href="/food">점심 메뉴 정하기</a></h1>
55 - <div class="swiper-container">
56 - <div class="swiper-wrapper">
57 - <div class="swiper-slide"><img src="img/slider/slider-1.jpg" alt=""> <!-- 여기다가 음식 슬라이더 이미지를 넣자-->
58 - <div class="slider_text_inner">
59 - <div class="container">
60 - <div class="row">
61 - <div class="col-lg-7">
62 - <div class="slider_text">
63 - <h2>음식 추천 설명 <br />사진은 나중에 바꾸자</h2>
64 - </div>
65 - </div>
66 - </div>
67 - </div>
68 - </div>
69 - </div>
70 - <div class="swiper-slide"><img src="img/slider/slider-1.jpg" alt=""> <!-- 여기다가 음식 슬라이더 이미지를 넣자-->
71 - <div class="slider_text_inner">
72 - <div class="container">
73 - <div class="row">
74 - <div class="col-lg-7">
75 - <div class="slider_text">
76 - <h2>음식 추천 설명<br />사진은 나중에 바꾸자</h2>
77 - </div>
78 - </div>
79 - </div>
80 - </div>
81 - </div>
82 - </div>
83 - <div class="swiper-slide"><img src="img/slider/slider-1.jpg" alt=""> <!-- 여기다가 음식 슬라이더 이미지를 넣자-->
84 - <div class="slider_text_inner">
85 - <div class="container">
86 - <div class="row">
87 - <div class="col-lg-7">
88 - <div class="slider_text">
89 - <h2>음식 추천 설명<br />사진은 나중에 바꾸자</h2>
90 - </div>
91 - </div>
92 - </div>
93 - </div>
94 - </div>
95 - </div>
96 - </div>
97 - </div>
98 - </section>
99 - <!--================End Home Banner Area =================-->
100 12
101 - <!--================ start footer Area =================--> 13 + <div class="grid">
102 - <footer class="footer-area"> 14 + <ul>
103 - <div class="container"> 15 + <il><a href="/food/search">검색</a></il><br>
104 - <div class="row"> 16 + <il><a href="/food/recommendation">추천</a></il>
105 - <div class="col-lg-3 col-md-6 col-sm-6">
106 - <div class="single-footer-widget">
107 - <h6 class="footer_title">여기는 설명쓰자</h6>
108 - <p>아하하하핳ㅎ</p>
109 - </div>
110 - </div>
111 - <div class="col-lg-3 col-md-6 col-sm-6">
112 - <div class="single-footer-widget">
113 - <h6 class="footer_title">여기는 바로 메뉴로 이동 쌉가능</h6>
114 - <div class="row">
115 - <div class="col-4">
116 - <ul class="list">
117 - <li><a href="#">1</a></li>
118 - <li><a href="#">2</a></li>
119 </ul> 17 </ul>
120 - </div>
121 - </div>
122 - </div>
123 - </div>
124 - </div>
125 -
126 - </div>
127 - <div class="border_line"></div>
128 - <div class="container">
129 - <div class="row footer-bottom d-flex justify-content-between align-items-center">
130 - <p class="col-lg-8 col-md-8 footer-text m-0">
131 - 밑에 하고싶은 말 적는곳
132 - </p>
133 - </div>
134 - </div>
135 - </footer>
136 - <!--================ End footer Area =================-->
137 -
138 18
139 19
20 + <article class="">
21 + <h2>
22 + <%= title %>
23 + </h2>
24 + <p><%= description %></p>
25 + </article>
26 + </div class="grid">
140 27
28 +</body>
141 29
142 - <!-- Optional JavaScript -->
143 - <!-- jQuery first, then Popper.js, then Bootstrap JS -->
144 - <script src="js/jquery-3.2.1.min.js"></script>
145 - <script src="js/popper.js"></script>
146 - <script src="js/bootstrap.min.js"></script>
147 - <script src="js/stellar.js"></script>
148 - <script src="vendors/lightbox/simpleLightbox.min.js"></script>
149 - <script src="vendors/nice-select/js/jquery.nice-select.min.js"></script>
150 - <script src="vendors/isotope/imagesloaded.pkgd.min.js"></script>
151 - <script src="vendors/isotope/isotope-min.js"></script>
152 - <script src="vendors/owl-carousel/owl.carousel.min.js"></script>
153 - <script src="js/jquery.ajaxchimp.min.js"></script>
154 - <script src="vendors/counter-up/jquery.waypoints.min.js"></script>
155 - <script src="vendors/counter-up/jquery.counterup.js"></script>
156 - <script src="js/mail-script.js"></script>
157 - <script src="vendors/popup/jquery.magnific-popup.min.js"></script>
158 - <script src="vendors/swiper/js/swiper.min.js"></script>
159 - <script src="js/theme.js"></script>
160 - </body>
161 </html> 30 </html>
......
1 +<!DOCTYPE html>
2 +<html>
3 +
4 +<head>
5 + <meta charset="utf-8">
6 + <link rel="stylesheet" href="/../map.css">
7 + <!-- <link rel="stylesheet" href="/../style.css"> -->
8 + <title>키워드로 장소검색하고 목록으로 표출하기</title>
9 +
10 +</head>
11 +
12 +<body>
13 + <h1><a href="/food">점심 메뉴 정하기</a></h1>
14 + <div class="grid">
15 + <ul>
16 + <il><a href="/food/search">검색</a></il><br>
17 + <il><a href="/food/recommendation">추천</a></il>
18 + </ul>
19 +
20 + <article>
21 + <h2>
22 + <%= title %>
23 + </h2>
24 + <form action='/food/search' method='post'>
25 + <p>
26 + 검색 :
27 + <input type="text" name="title" placeholder="검색">
28 + <input type="submit">
29 + </p>
30 + </form>
31 + </article>
32 + </div class="grid">
33 + <div class="map_wrap">
34 + <div id="map" ></div>
35 +
36 + <div id="menu_wrap" class="bg_white">
37 + <div class="option">
38 + <div>
39 + <form onsubmit="searchPlaces(); return false;">
40 + 키워드 : <input type="text" value='<%=searching%>' id="keyword" size="15">
41 + <button type="submit">검색하기</button>
42 + </form>
43 + </div>
44 + </div>
45 + <hr>
46 + <ul id="placesList"></ul>
47 + <div id="pagination"></div>
48 + </div>
49 + </div>
50 +
51 + <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a8a43eda451b054ac46a281a3db5d536&libraries=services"></script>
52 + <script>
53 + // 마커를 담을 배열입니다
54 + var markers = [];
55 +
56 + var mapContainer = document.getElementById('map'), // 지도를 표시할 div
57 + mapOption = {
58 + center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
59 + level: 3 // 지도의 확대 레벨
60 + };
61 +
62 + // 지도를 생성합니다
63 + var map = new kakao.maps.Map(mapContainer, mapOption);
64 +
65 + // 장소 검색 객체를 생성합니다
66 + var ps = new kakao.maps.services.Places();
67 +
68 + // 검색 결과 목록이나 마커를 클릭했을 때 장소명을 표출할 인포윈도우를 생성합니다
69 + var infowindow = new kakao.maps.InfoWindow({
70 + zIndex: 1
71 + });
72 +
73 + // 키워드로 장소를 검색합니다
74 + searchPlaces();
75 +
76 + // 키워드 검색을 요청하는 함수입니다
77 + function searchPlaces() {
78 +
79 + var keyword = document.getElementById('keyword').value;
80 +
81 + if (!keyword.replace(/^\s+|\s+$/g, '')) {
82 + alert('키워드를 입력해주세요!');
83 + return false;
84 + }
85 +
86 + // 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
87 + ps.keywordSearch(keyword, placesSearchCB);
88 + }
89 +
90 + // 장소검색이 완료됐을 때 호출되는 콜백함수 입니다
91 + function placesSearchCB(data, status, pagination) {
92 + if (status === kakao.maps.services.Status.OK) {
93 +
94 + // 정상적으로 검색이 완료됐으면
95 + // 검색 목록과 마커를 표출합니다
96 + displayPlaces(data);
97 +
98 + // 페이지 번호를 표출합니다
99 + displayPagination(pagination);
100 +
101 + } else if (status === kakao.maps.services.Status.ZERO_RESULT) {
102 +
103 + alert('검색 결과가 존재하지 않습니다.');
104 + return;
105 +
106 + } else if (status === kakao.maps.services.Status.ERROR) {
107 +
108 + alert('검색 결과 중 오류가 발생했습니다.');
109 + return;
110 +
111 + }
112 + }
113 +
114 + // 검색 결과 목록과 마커를 표출하는 함수입니다
115 + function displayPlaces(places) {
116 +
117 + var listEl = document.getElementById('placesList'),
118 + menuEl = document.getElementById('menu_wrap'),
119 + fragment = document.createDocumentFragment(),
120 + bounds = new kakao.maps.LatLngBounds(),
121 + listStr = '';
122 +
123 + // 검색 결과 목록에 추가된 항목들을 제거합니다
124 + removeAllChildNods(listEl);
125 +
126 + // 지도에 표시되고 있는 마커를 제거합니다
127 + removeMarker();
128 +
129 + for (var i = 0; i < places.length; i++) {
130 +
131 + // 마커를 생성하고 지도에 표시합니다
132 + var placePosition = new kakao.maps.LatLng(places[i].y, places[i].x),
133 + marker = addMarker(placePosition, i),
134 + itemEl = getListItem(i, places[i]); // 검색 결과 항목 Element를 생성합니다
135 +
136 + // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
137 + // LatLngBounds 객체에 좌표를 추가합니다
138 + bounds.extend(placePosition);
139 +
140 + // 마커와 검색결과 항목에 mouseover 했을때
141 + // 해당 장소에 인포윈도우에 장소명을 표시합니다
142 + // mouseout 했을 때는 인포윈도우를 닫습니다
143 + (function(marker, title) {
144 + kakao.maps.event.addListener(marker, 'mouseover', function() {
145 + displayInfowindow(marker, title);
146 + });
147 +
148 + kakao.maps.event.addListener(marker, 'mouseout', function() {
149 + infowindow.close();
150 + });
151 +
152 + itemEl.onmouseover = function() {
153 + displayInfowindow(marker, title);
154 + };
155 +
156 + itemEl.onmouseout = function() {
157 + infowindow.close();
158 + };
159 + })(marker, places[i].place_name);
160 +
161 + fragment.appendChild(itemEl);
162 + }
163 +
164 + // 검색결과 항목들을 검색결과 목록 Elemnet에 추가합니다
165 + listEl.appendChild(fragment);
166 + menuEl.scrollTop = 0;
167 +
168 + // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
169 + map.setBounds(bounds);
170 + }
171 +
172 + // 검색결과 항목을 Element로 반환하는 함수입니다
173 + function getListItem(index, places) {
174 +
175 + var el = document.createElement('li'),
176 + itemStr = '<span class="markerbg marker_' + (index + 1) + '"></span>' +
177 + '<div class="info">' +
178 + ' <h5>' + places.place_name + '</h5>';
179 +
180 + if (places.road_address_name) {
181 + itemStr += ' <span>' + places.road_address_name + '</span>' +
182 + ' <span class="jibun gray">' + places.address_name + '</span>';
183 + } else {
184 + itemStr += ' <span>' + places.address_name + '</span>';
185 + }
186 +
187 + itemStr += ' <span class="tel">' + places.phone + '</span>' +
188 + '</div>';
189 +
190 + el.innerHTML = itemStr;
191 + el.className = 'item';
192 +
193 + return el;
194 + }
195 +
196 + // 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
197 + function addMarker(position, idx, title) {
198 + var imageSrc = 'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
199 + imageSize = new kakao.maps.Size(36, 37), // 마커 이미지의 크기
200 + imgOptions = {
201 + spriteSize: new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
202 + spriteOrigin: new kakao.maps.Point(0, (idx * 46) + 10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
203 + offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
204 + },
205 + markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions),
206 + marker = new kakao.maps.Marker({
207 + position: position, // 마커의 위치
208 + image: markerImage
209 + });
210 +
211 + marker.setMap(map); // 지도 위에 마커를 표출합니다
212 + markers.push(marker); // 배열에 생성된 마커를 추가합니다
213 +
214 + return marker;
215 + }
216 +
217 + // 지도 위에 표시되고 있는 마커를 모두 제거합니다
218 + function removeMarker() {
219 + for (var i = 0; i < markers.length; i++) {
220 + markers[i].setMap(null);
221 + }
222 + markers = [];
223 + }
224 +
225 + // 검색결과 목록 하단에 페이지번호를 표시는 함수입니다
226 + function displayPagination(pagination) {
227 + var paginationEl = document.getElementById('pagination'),
228 + fragment = document.createDocumentFragment(),
229 + i;
230 +
231 + // 기존에 추가된 페이지번호를 삭제합니다
232 + while (paginationEl.hasChildNodes()) {
233 + paginationEl.removeChild(paginationEl.lastChild);
234 + }
235 +
236 + for (i = 1; i <= pagination.last; i++) {
237 + var el = document.createElement('a');
238 + el.href = "#";
239 + el.innerHTML = i;
240 +
241 + if (i === pagination.current) {
242 + el.className = 'on';
243 + } else {
244 + el.onclick = (function(i) {
245 + return function() {
246 + pagination.gotoPage(i);
247 + }
248 + })(i);
249 + }
250 +
251 + fragment.appendChild(el);
252 + }
253 + paginationEl.appendChild(fragment);
254 + }
255 +
256 + // 검색결과 목록 또는 마커를 클릭했을 때 호출되는 함수입니다
257 + // 인포윈도우에 장소명을 표시합니다
258 + function displayInfowindow(marker, title) {
259 + var content = '<div style="padding:5px;z-index:1;">' + title + '</div>';
260 +
261 + infowindow.setContent(content);
262 + infowindow.open(map, marker);
263 + }
264 +
265 + // 검색결과 목록의 자식 Element를 제거하는 함수입니다
266 + function removeAllChildNods(el) {
267 + while (el.hasChildNodes()) {
268 + el.removeChild(el.lastChild);
269 + }
270 + }
271 + </script>
272 +</body>
273 +
274 +</html>
This diff is collapsed. Click to expand it.