최지우 / oss_project

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

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

Inline Side-by-side
Showing 8 changed files with 612 additions and 125 deletions
...@@ -4,20 +4,29 @@ Kakao 지도 API를 이용한 여행 경로 추천 서비스 ...@@ -4,20 +4,29 @@ Kakao 지도 API를 이용한 여행 경로 추천 서비스
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
......
...@@ -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;
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 -<html> 2 +<html lang="ko">
3 -<head>
4 - <meta charset="utf-8">
5 - <title>Pass-Path</title>
6 3
7 -</head> 4 +<head>
8 -<body> 5 +<link rel="stylesheet" type="text/css" href="https://t1.daumcdn.net/tistory_admin/lib/lightbox/css/lightbox.min.css" /><link rel="stylesheet" type="text/css" href="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-4143aead47fb3d3c83016433af84643a03241408/blogs/style/content/font.css?_version_=tistory-4143aead47fb3d3c83016433af84643a03241408" /><link rel="stylesheet" type="text/css" href="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-4143aead47fb3d3c83016433af84643a03241408/blogs/style/content/content.css?_version_=tistory-4143aead47fb3d3c83016433af84643a03241408" /><!--[if lt IE 9]><script src="https://t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script><![endif]--><!--[if gte IE 9]>
9 -<div id="map" style="width:100%;height:800px;"></div> 6 +<!--><script src="https://t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.2.1.min.js"></script><!--<![endif]-->
10 -<p>출발지와 도착지를 설정해주세요!</p> 7 +<script src="https://t1.daumcdn.net/tistory_admin/lib/lightbox/js/lightbox-plus-jquery.min.js"></script>
8 +<script>
9 +lightbox.options.fadeDuration = 200;
10 +lightbox.options.resizeDuration = 200;
11 +lightbox.options.wrapAround = false;
12 +lightbox.options.albumLabel = "%1 / %2";
13 +</script>
11 14
15 +<script type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"WebSite","url":"\/","potentialAction":{"@type":"SearchAction","target":"\/search\/{search_term_string}","query-input":"required name=search_term_string"}}</script>
16 +<!-- END STRUCTURED_DATA -->
12 17
13 -<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=비밀"></script>
14 -<script>
15 -var mapContainer = document.getElementById('map'), // 지도를 표시할 div
16 - mapOption = {
17 - center: new kakao.maps.LatLng(37.564213, 127.001698),
18 - level: 10 // 지도의 확대 레벨
19 - };
20 -
21 -var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
22 -
23 -var startSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_b.png', // 출발 마커이미지의 주소입니다
24 - startSize = new kakao.maps.Size(50, 45), // 출발 마커이미지의 크기입니다
25 - startOption = {
26 - offset: new kakao.maps.Point(15, 43) // 출발 마커이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
27 - };
28 -
29 -// 출발 마커 이미지를 생성합니다
30 -var startImage = new kakao.maps.MarkerImage(startSrc, startSize, startOption);
31 -
32 -var startDragSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_drag.png', // 출발 마커의 드래그 이미지 주소입니다
33 - startDragSize = new kakao.maps.Size(50, 64), // 출발 마커의 드래그 이미지 크기입니다
34 - startDragOption = {
35 - offset: new kakao.maps.Point(15, 54) // 출발 마커의 드래그 이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
36 - };
37 -
38 -// 출발 마커의 드래그 이미지를 생성합니다
39 -var startDragImage = new kakao.maps.MarkerImage(startDragSrc, startDragSize, startDragOption);
40 -
41 -// 출발 마커가 표시될 위치입니다
42 -var startPosition = new kakao.maps.LatLng(37.564213, 127.001698);
43 -
44 -
45 -// 출발 마커를 생성합니다
46 -var startMarker = new kakao.maps.Marker({
47 - map: map, // 출발 마커가 지도 위에 표시되도록 설정합니다
48 - position: startPosition,
49 - draggable: true, // 출발 마커가 드래그 가능하도록 설정합니다
50 - image: startImage // 출발 마커이미지를 설정합니다
51 -});
52 -
53 -
54 -// 출발 마커에 dragstart 이벤트를 등록합니다
55 -kakao.maps.event.addListener(startMarker, 'dragstart', function() {
56 - // 출발 마커의 드래그가 시작될 때 마커 이미지를 변경합니다
57 - startMarker.setImage(startDragImage);
58 -});
59 -
60 -// 출발 마커에 dragend 이벤트를 등록합니다
61 -kakao.maps.event.addListener(startMarker, 'dragend', function() {
62 - // 출발 마커의 드래그가 종료될 때 마커 이미지를 원래 이미지로 변경합니다
63 - startMarker.setImage(startImage);
64 -});
65 -
66 -var arriveSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/blue_b.png', // 도착 마커이미지 주소입니다
67 -arriveSize = new kakao.maps.Size(50, 45), // 도착 마커이미지의 크기입니다
68 -arriveOption = {
69 - offset: new kakao.maps.Point(15, 43) // 도착 마커이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
70 -};
71 -
72 -
73 -// 도착 마커 이미지를 생성합니다
74 -var arriveImage = new kakao.maps.MarkerImage(arriveSrc, arriveSize, arriveOption);
75 -
76 -var arriveDragSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/blue_drag.png', // 도착 마커의 드래그 이미지 주소입니다
77 - arriveDragSize = new kakao.maps.Size(50, 64), // 도착 마커의 드래그 이미지 크기입니다
78 - arriveDragOption = {
79 - offset: new kakao.maps.Point(15, 54) // 도착 마커의 드래그 이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
80 - };
81 -
82 -// 도착 마커의 드래그 이미지를 생성합니다
83 -var arriveDragImage = new kakao.maps.MarkerImage(arriveDragSrc, arriveDragSize, arriveDragOption);
84 -
85 -// 도착 마커가 표시될 위치입니다
86 -var arrivePosition = new kakao.maps.LatLng(37.564213, 127.011698);
87 -
88 -// 도착 마커를 생성합니다
89 -var arriveMarker = new kakao.maps.Marker({
90 - map: map, // 도착 마커가 지도 위에 표시되도록 설정합니다
91 - position: arrivePosition,
92 - draggable: true, // 도착 마커가 드래그 가능하도록 설정합니다
93 - image: arriveImage // 도착 마커이미지를 설정합니다
94 -});
95 -
96 -// 도착 마커에 dragstart 이벤트를 등록합니다
97 -kakao.maps.event.addListener(arriveMarker, 'dragstart', function() {
98 - // 도착 마커의 드래그가 시작될 때 마커 이미지를 변경합니다
99 - arriveMarker.setImage(arriveDragImage);
100 -});
101 -
102 -// 도착 마커에 dragend 이벤트를 등록합니다
103 -kakao.maps.event.addListener(arriveMarker, 'dragend', function() {
104 - // 도착 마커의 드래그가 종료될 때 마커 이미지를 원래 이미지로 변경합니다
105 - arriveMarker.setImage(arriveImage);
106 -});
107 18
108 -</script> 19 + <title>Pass-Path</title>
109 -<button type="button" onclick="Search();">text</button> 20 + <meta name="title" content="PASS-PATH" />
110 -<script> 21 + <meta name="description" Content="여행 경로 리커맨더" />
111 - function Search(){ 22 + <meta charset="utf-8" />
112 - var startx = startMarker.getPosition().getLat(); 23 + <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
113 - var starty = startMarker.getPosition().getLng(); 24 + <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
114 - var endx = arriveMarker.getPosition().getLat(); 25 +
115 - var endy = arriveMarker.getPosition().getLng(); 26 + <link rel="stylesheet" href="https://t1.daumcdn.net/tistory_admin/static/font/AvenirLTStd/AvenirLTStd.css" />
116 - location.href ='/search?startx='+ startx +'&starty='+ starty +'&endx=' + endx + '&endy=' + endy; 27 + <link rel="stylesheet" href="https://t1.daumcdn.net/tistory_admin/static/font/SpoqaHanSans/SpoqaHanSans.css" />
117 -} 28 + <link rel="stylesheet" href="https://t1.daumcdn.net/tistory_admin/static/font/icomoon/icomoon.css" />
118 -</script> 29 + <link rel="stylesheet" href="https://tistory3.daumcdn.net/tistory/0/xf_Portfolio/style.css" />
30 + <link rel="stylesheet" href="https://tistory3.daumcdn.net/tistory/0/xf_Portfolio/images/slick.css" />
31 + <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
32 + <script src="https://tistory3.daumcdn.net/tistory/0/xf_Portfolio/images/slick.js"></script>
33 + <script src="https://tistory3.daumcdn.net/tistory/0/xf_Portfolio/images/common.js"></script>
34 + <script src="https://unpkg.com/vh-check/dist/vh-check.min.js"></script>
35 + <script>
36 + (function () {
37 + // initialize the test
38 + var test = vhCheck();
39 + }());
40 + </script>
41 +
42 +<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" />
43 +<script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-4143aead47fb3d3c83016433af84643a03241408/blogs/plugins/TistoryProfileLayer/profile.js?_version_=tistory-4143aead47fb3d3c83016433af84643a03241408"></script>
44 + <style type="text/css">
45 + .another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin:10px 0; clear: both; }
46 + .another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important; }
47 + .another_category h4 a { font-weight: bold !important; }
48 + .another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important; }
49 + * html .another_category table { width: auto !important; }
50 + *:first-child+html .another_category table { width: auto !important; }
51 + .another_category th, .another_category td { padding: 0 0 4px !important; }
52 + .another_category th { text-align: left; font-size: 12px !important; font-weight: normal; word-break: break-all; overflow: hidden; line-height: 1.5; }
53 + .another_category td { text-align: right; width: 80px; font-size: 11px; }
54 + .another_category th a { font-weight: normal; text-decoration: none; border: none !important; }
55 + .another_category th a.current{ font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important; }
56 + .another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important; }
57 +
58 + .another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important; }
59 + .another_category_color_gray * { color: #909090 !important; }
60 + .another_category_color_gray th a.current{border-color:#909090 !important;}
61 + .another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important; }
62 +
63 +
64 + .another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important; }
65 + .another_category_color_red * { color: #E86869 !important; }
66 + .another_category_color_red th a.current{border-color:#E86869 !important;}
67 + .another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important; }
68 +
69 +
70 + .another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important; }
71 + .another_category_color_green * { color: #64C05B !important; }
72 + .another_category_color_green th a.current{border-color:#64C05B !important;}
73 + .another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important; }
74 +
75 +
76 + .another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important; }
77 + .another_category_color_blue * { color: #477FD6 !important; }
78 + .another_category_color_blue th a.current{border-color:#477FD6 !important;}
79 + .another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important; }
80 +
81 +
82 + .another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important; }
83 + .another_category_color_violet * { color:#9D64C5 !important; }
84 + .another_category_color_violet th a.current{border-color:#9D64C5 !important;}
85 + .another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important; }
86 + </style>
87 +</head>
119 88
120 -</body> 89 +<body id="tt-body-index" class="theme_blue">
90 +
91 + <script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-4143aead47fb3d3c83016433af84643a03241408/blogs/script/owner.js?_version_=tistory-4143aead47fb3d3c83016433af84643a03241408"></script>
92 +<script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-4143aead47fb3d3c83016433af84643a03241408/blogs/script/blog/common.js?_version_=tistory-4143aead47fb3d3c83016433af84643a03241408"></script>
93 +<div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
94 + <!-- warp / 테마 변경시 theme_pink / theme_blue / theme_green / theme_gray-->
95 + <div id="wrap">
96 +
97 + <!-- box_header -->
98 + <header class="box_header">
99 + <h1 class="title_logo">
100 + <a href="/" title="Pass-Path" class="link_logo">
101 +
102 + Pass-Path
103 +
104 + </a>
105 + </h1>
106 + </header>
107 +
108 + <div id="container">
109 + <main id="main">
110 +
111 + <div class="area_cover">
112 +
113 + <!-- type_featured -->
114 + <div class="type_featured">
115 +
116 + <div class="slide_item">
117 + <div class="link_slide item-thumbnail" style="background-image:url('https://tistory4.daumcdn.net/tistory/1978677/skinCover/fcb080e7767a4941964dfee78420025e');">
118 + <div class="text_slide thema_apply">
119 + <strong>PASS-PATH</strong>
120 + <p class="text">여행지와 가고 싶은 장소만 선택하면<br>
121 + 경로가 자동으로 완성되는<br>
122 + 쉽고 간편한 여행 경로 리커맨더</p>
123 + <a href="/pass" class="link_detail">경유지</a><br>
124 + <a href="/near" class="link_detail">현재지</a>
125 + </div>
126 + </div>
127 + </div>
128 +
129 + <div class="inner_main_slide">
130 +
131 + </div>
132 + </div>
133 + <!-- // type_featured -->
134 + </div>
135 + </main>
136 + </div>
137 +
138 + <footer id="footer">
139 + <div class="inner_footer">
140 + <a href="" class="link_footer">ERASER</a>
141 + </div>
142 + <div>
143 + <address>© 2020 Pass-Path. All rights reserved.</address>
144 + </div>
145 + </footer>
146 +
147 + </div>
121 </html> 148 </html>
......
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset="utf-8">
5 + <title>주변 검색</title>
6 + <style>
7 +body, html {height: 100%;}
8 +.map_wrap, .map_wrap * {margin:0; padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;}
9 +.map_wrap {position:relative;width:100%;height:100%;}
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;}
11 +#category li {float:left;list-style: none;width:50px;px;border-right:1px solid #acacac;padding:6px 0;text-align: center; cursor: pointer;}
12 +#category li.on {background: #eee;}
13 +#category li:hover {background: #ffe6e6;border-left:1px solid #acacac;margin-left: -1px;}
14 +#category li:last-child{margin-right:0;border-right:0;}
15 +#category li span {display: block;margin:0 auto 3px;width:27px;height: 28px;}
16 +#category li .category_bg {background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png) no-repeat;}
17 +#category li .bank {background-position: -10px 0;}
18 +#category li .mart {background-position: -10px -36px;}
19 +#category li .pharmacy {background-position: -10px -72px;}
20 +#category li .oil {background-position: -10px -108px;}
21 +#category li .cafe {background-position: -10px -144px;}
22 +#category li .store {background-position: -10px -180px;}
23 +#category li.on .category_bg {background-position-x:-46px;}
24 +.placeinfo_wrap {position:absolute;bottom:28px;left:-150px;width:300px;}
25 +.placeinfo {position:relative;width:100%;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;padding-bottom: 10px;background: #fff;}
26 +.placeinfo:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888;}
27 +.placeinfo_wrap .after {content:'';position:relative;margin-left:-12px;left:50%;width:22px;height:12px;background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}
28 +.placeinfo a, .placeinfo a:hover, .placeinfo a:active{color:#fff;text-decoration: none;}
29 +.placeinfo a, .placeinfo span {display: block;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
30 +.placeinfo span {margin:5px 5px 0 5px;cursor: default;font-size:13px;}
31 +.placeinfo .title {font-weight: bold; font-size:14px;border-radius: 6px 6px 0 0;margin: -1px -1px 0 -1px;padding:10px; color: #fff;background: #d95050;background: #d95050 url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 14px center;}
32 +.placeinfo .tel {color:#0f7833;}
33 +.placeinfo .jibun {color:#999;font-size:11px;margin-top:0;}
34 +</style>
35 +</head>
36 +<body>
37 +<p style="margin-top:-12px">
38 +
39 +</p>
40 +<div class="map_wrap">
41 + <div id="map" style="width:100%;height:100%;position:relative;overflow:hidden;"></div>
42 + <ul id="category">
43 + <li id="BK9" data-order="0">
44 + <span class="category_bg bank"></span>
45 + 은행
46 + </li>
47 + <li id="MT1" data-order="1">
48 + <span class="category_bg mart"></span>
49 + 마트
50 + </li>
51 + <li id="PM9" data-order="2">
52 + <span class="category_bg pharmacy"></span>
53 + 약국
54 + </li>
55 + <li id="AT4" data-order="3">
56 + <span class="category_bg oil"></span>
57 + 관광지
58 + </li>
59 + <li id="CE7" data-order="4">
60 + <span class="category_bg cafe"></span>
61 + 카페
62 + </li>
63 + <li id="CS2" data-order="5">
64 + <span class="category_bg store"></span>
65 + 편의점
66 + </li>
67 + </ul>
68 +</div>
69 +
70 +<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=비밀&libraries=services"></script>
71 +<script>
72 +// 마커를 클릭했을 때 해당 장소의 상세정보를 보여줄 커스텀오버레이입니다
73 +var placeOverlay = new kakao.maps.CustomOverlay({zIndex:1}),
74 + contentNode = document.createElement('div'), // 커스텀 오버레이의 컨텐츠 엘리먼트 입니다
75 + markers = [], // 마커를 담을 배열입니다
76 + currCategory = ''; // 현재 선택된 카테고리를 가지고 있을 변수입니다
77 +
78 +var mapContainer = document.getElementById('map'), // 지도를 표시할 div
79 + mapOption = {
80 + center: new kakao.maps.LatLng(35.950000, 128.250000), // 지도의 중심좌표
81 + level: 12 // 지도의 확대 레벨
82 + };
83 +
84 +// 지도를 생성합니다
85 +var map = new kakao.maps.Map(mapContainer, mapOption);
86 +var startSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_b.png', // 출발 마커이미지의 주소입니다
87 + startSize = new kakao.maps.Size(50, 45), // 출발 마커이미지의 크기입니다
88 + startOption = {
89 + offset: new kakao.maps.Point(15, 43) // 출발 마커이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
90 + };
91 +
92 +// 출발 마커 이미지를 생성합니다
93 +var startImage = new kakao.maps.MarkerImage(startSrc, startSize, startOption);
94 +
95 +var startDragSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_drag.png', // 출발 마커의 드래그 이미지 주소입니다
96 + startDragSize = new kakao.maps.Size(50, 64), // 출발 마커의 드래그 이미지 크기입니다
97 + startDragOption = {
98 + offset: new kakao.maps.Point(15, 54) // 출발 마커의 드래그 이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
99 + };
100 +
101 +// 출발 마커의 드래그 이미지를 생성합니다
102 +var startDragImage = new kakao.maps.MarkerImage(startDragSrc, startDragSize, startDragOption);
103 +
104 +// 출발 마커가 표시될 위치입니다
105 +var startPosition = new kakao.maps.LatLng(37.245635, 127.179108);
106 +
107 +// 출발 마커를 생성합니다
108 +var startMarker = new kakao.maps.Marker({
109 + map: map, // 출발 마커가 지도 위에 표시되도록 설정합니다
110 + position: startPosition,
111 + draggable: true, // 출발 마커가 드래그 가능하도록 설정합니다
112 + image: startImage // 출발 마커이미지를 설정합니다
113 +});
114 +
115 +// 출발 마커에 dragstart 이벤트를 등록합니다
116 +kakao.maps.event.addListener(startMarker, 'dragstart', function() {
117 + // 출발 마커의 드래그가 시작될 때 마커 이미지를 변경합니다
118 + startMarker.setImage(startDragImage);
119 +});
120 +
121 +// 출발 마커에 dragend 이벤트를 등록합니다
122 +kakao.maps.event.addListener(startMarker, 'dragend', function() {
123 + // 출발 마커의 드래그가 종료될 때 마커 이미지를 원래 이미지로 변경합니다
124 + startMarker.setImage(startImage);
125 +});
126 +
127 +// 장소 검색 객체를 생성합니다
128 +var ps = new kakao.maps.services.Places();
129 +
130 +// 지도에 idle 이벤트를 등록합니다
131 +kakao.maps.event.addListener(map, 'idle', searchPlaces);
132 +
133 +// 커스텀 오버레이의 컨텐츠 노드에 css class를 추가합니다
134 +contentNode.className = 'placeinfo_wrap';
135 +
136 +// 커스텀 오버레이의 컨텐츠 노드에 mousedown, touchstart 이벤트가 발생했을때
137 +// 지도 객체에 이벤트가 전달되지 않도록 이벤트 핸들러로 kakao.maps.event.preventMap 메소드를 등록합니다
138 +addEventHandle(contentNode, 'mousedown', kakao.maps.event.preventMap);
139 +addEventHandle(contentNode, 'touchstart', kakao.maps.event.preventMap);
140 +
141 +// 커스텀 오버레이 컨텐츠를 설정합니다
142 +placeOverlay.setContent(contentNode);
143 +
144 +// 각 카테고리에 클릭 이벤트를 등록합니다
145 +addCategoryClickEvent();
146 +
147 +// 엘리먼트에 이벤트 핸들러를 등록하는 함수입니다
148 +function addEventHandle(target, type, callback) {
149 + if (target.addEventListener) {
150 + target.addEventListener(type, callback);
151 + } else {
152 + target.attachEvent('on' + type, callback);
153 + }
154 +}
155 +
156 +// 카테고리 검색을 요청하는 함수입니다
157 +function searchPlaces() {
158 + if (!currCategory) {
159 + return;
160 + }
161 + var startx = startMarker.getPosition().getLat();
162 + var starty = startMarker.getPosition().getLng();
163 + // 커스텀 오버레이를 숨깁니다
164 + placeOverlay.setMap(null);
165 +
166 + // 지도에 표시되고 있는 마커를 제거합니다
167 + removeMarker();
168 +
169 + ps.categorySearch(currCategory, placesSearchCB, {location: new kakao.maps.LatLng(startx, starty)});
170 +}
171 +
172 +// 장소검색이 완료됐을 때 호출되는 콜백함수 입니다
173 +function placesSearchCB(data, status, pagination) {
174 + if (status === kakao.maps.services.Status.OK) {
175 +
176 + // 정상적으로 검색이 완료됐으면 지도에 마커를 표출합니다
177 + displayPlaces(data);
178 + } else if (status === kakao.maps.services.Status.ZERO_RESULT) {
179 + // 검색결과가 없는경우 해야할 처리가 있다면 이곳에 작성해 주세요
180 +
181 + } else if (status === kakao.maps.services.Status.ERROR) {
182 + // 에러로 인해 검색결과가 나오지 않은 경우 해야할 처리가 있다면 이곳에 작성해 주세요
183 +
184 + }
185 +}
186 +
187 +// 지도에 마커를 표출하는 함수입니다
188 +function displayPlaces(places) {
189 +
190 + // 몇번째 카테고리가 선택되어 있는지 얻어옵니다
191 + // 이 순서는 스프라이트 이미지에서의 위치를 계산하는데 사용됩니다
192 + var order = document.getElementById(currCategory).getAttribute('data-order');
193 +
194 +
195 +
196 + for ( var i=0; i<places.length; i++ ) {
197 +
198 + // 마커를 생성하고 지도에 표시합니다
199 + var marker = addMarker(new kakao.maps.LatLng(places[i].y, places[i].x), order);
200 +
201 + // 마커와 검색결과 항목을 클릭 했을 때
202 + // 장소정보를 표출하도록 클릭 이벤트를 등록합니다
203 + (function(marker, place) {
204 + kakao.maps.event.addListener(marker, 'click', function() {
205 + displayPlaceInfo(place);
206 + });
207 + })(marker, places[i]);
208 + }
209 +}
210 +
211 +// 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
212 +function addMarker(position, order) {
213 + var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
214 + imageSize = new kakao.maps.Size(27, 28), // 마커 이미지의 크기
215 + imgOptions = {
216 + spriteSize : new kakao.maps.Size(72, 208), // 스프라이트 이미지의 크기
217 + spriteOrigin : new kakao.maps.Point(46, (order*36)), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
218 + offset: new kakao.maps.Point(11, 28) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
219 + },
220 + markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions),
221 + marker = new kakao.maps.Marker({
222 + position: position, // 마커의 위치
223 + image: markerImage
224 + });
225 +
226 + marker.setMap(map); // 지도 위에 마커를 표출합니다
227 + markers.push(marker); // 배열에 생성된 마커를 추가합니다
228 +
229 + return marker;
230 +}
231 +
232 +// 지도 위에 표시되고 있는 마커를 모두 제거합니다
233 +function removeMarker() {
234 + for ( var i = 0; i < markers.length; i++ ) {
235 + markers[i].setMap(null);
236 + }
237 + markers = [];
238 +}
239 +
240 +// 클릭한 마커에 대한 장소 상세정보를 커스텀 오버레이로 표시하는 함수입니다
241 +function displayPlaceInfo (place) {
242 + var content = '<div class="placeinfo">' +
243 + ' <a class="title" href="' + place.place_url + '" target="_blank" title="' + place.place_name + '">' + place.place_name + '</a>';
244 +
245 + if (place.road_address_name) {
246 + content += ' <span title="' + place.road_address_name + '">' + place.road_address_name + '</span>' +
247 + ' <span class="jibun" title="' + place.address_name + '">(지번 : ' + place.address_name + ')</span>';
248 + } else {
249 + content += ' <span title="' + place.address_name + '">' + place.address_name + '</span>';
250 + }
251 +
252 + content += ' <span class="tel">' + place.phone + '</span>' +
253 + '</div>' +
254 + '<div class="after"></div>';
255 +
256 + contentNode.innerHTML = content;
257 + placeOverlay.setPosition(new kakao.maps.LatLng(place.y, place.x));
258 + placeOverlay.setMap(map);
259 +}
260 +
261 +
262 +// 각 카테고리에 클릭 이벤트를 등록합니다
263 +function addCategoryClickEvent() {
264 + var category = document.getElementById('category'),
265 + children = category.children;
266 +
267 + for (var i=0; i<children.length; i++) {
268 + children[i].onclick = onClickCategory;
269 + }
270 +}
271 +
272 +// 카테고리를 클릭했을 때 호출되는 함수입니다
273 +function onClickCategory() {
274 + var id = this.id,
275 + className = this.className;
276 +
277 + placeOverlay.setMap(null);
278 +
279 + if (className === 'on') {
280 + currCategory = '';
281 + changeCategoryClass();
282 + removeMarker();
283 + } else {
284 + currCategory = id;
285 + changeCategoryClass(this);
286 + searchPlaces();
287 + }
288 +}
289 +
290 +// 클릭된 카테고리에만 클릭된 스타일을 적용하는 함수입니다
291 +function changeCategoryClass(el) {
292 + var category = document.getElementById('category'),
293 + children = category.children,
294 + i;
295 +
296 + for ( i=0; i<children.length; i++ ) {
297 + children[i].className = '';
298 + }
299 +
300 + if (el) {
301 + el.className = 'on';
302 + }
303 +}
304 +</script>
305 +</body>
306 +</html>
...\ No newline at end of file ...\ No newline at end of file
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 // 지도를 생성합니다
......