최지우 / oss_project

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

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

Expand all
Inline Side-by-side
Showing 8 changed files with 170 additions and 16 deletions
## Subject
Kakao 지도 API를 이용한 여행 경로 추천 서비스
출발지와 도착지를 설정하면 사이 경로의 유명 관광지/음식점/카페 등을 카테고리 별로 반환
원하는 장소를 경유지로 추가하여 경로를 재검색
Kakao 지도 API를 이용한 여행 경로 추천 서비스
출발지와 도착지를 설정하면 사이 경로의 유명 관광지/음식점/카페 등을 카테고리 별로 반환
원하는 장소를 경유지로 추가하여 경로를 재검색
## How to build
### git clone
~$ git clone http://khuhub.khu.ac.kr/2014104158/oss_project.git
### npm
~$ npm install
~/oss_project$ npm install
### Kakao 지도 API
<https://apis.map.kakao.com/web/>
카카오계정을 통해 APP KEY를 발급받은 후 views/main.ejs, views/search.ejs의 아래 부분에 추가
src = "//dapi.kakao.com/v2/maps/sdk.js?appkey=APPKEY&libraries=services"
<https://apis.map.kakao.com/web/>
카카오계정을 통해 APP KEY를 발급받은 후 views/main.ejs, views/search.ejs, views/near.ejs의 아래 부분에 추가
src = "//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY 입력&libraries=services"
## How to use
- 메인 페이지 지도상에서 출발지와 도착지를 선택하고 검색버튼 클릭
- 검색된 페이지에서 이동 경로에 있는 카테고리 별 장소(관광명소, 숙박, 카페, 음식점)를 검색 가능
- 지도 상에 마커와 인포윈도우를 통해 결과를 출력
- 원하는 경유지를 선택하여 경로 재검색 가능
* 메인 페이지에서 '여행 경유지 추천' 서비스와 '주변 장소' 서비스 선택 가능
- '여행 경유지 추천' 서비스는 출발지와 도착지를 설정하고 검색된 페이지에서 이동 경로에 있는 카테고리 별 장소(관광명소, 숙박, 카페, 음식점)를 검색 가능
+ 지도 상에 마커와 인포윈도우를 통해 결과를 출력
+ 원하는 경유지를 선택하여 경로 재검색 가능
- '주변 장소 검색' 서비스는 현재 위치를 설정해주면 주변 카테고리 별 장소(관광명소, 숙박, 카페, 음식점, 마트, 은행)를 검색 가능
+ 지도 상에 마커와 인포윈도우를 통해 결과를 출력
+ 마커를 클릭하면 해당 장소의 정보 조회 가능
## License
MIT License
Copyright (c) 2020 Jiwoo Choi
Copyright (c) 2020 Jiwoo Choi
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
......
......@@ -4,8 +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 app = express();
// view engine setup
......@@ -19,7 +21,9 @@ app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', mainRouter);
app.use('/pass', passRouter);
app.use('/search', searchRouter);
app.use('/near', nearRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
......
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
res.render('near', { title: 'MINE' });
});
module.exports = router;
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
res.render('pass', { title: 'MINE' });
});
module.exports = router;
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pass-Path</title>
<style>body, html {height: 100%;}</style>
</head>
<body>
<p>출발지와 도착지를 설정해주세요!</p>
<button type="button" onclick="Search();">검색</button>
<script>
function Search(){
var startx = startMarker.getPosition().getLat();
var starty = startMarker.getPosition().getLng();
var endx = arriveMarker.getPosition().getLat();
var endy = arriveMarker.getPosition().getLng();
location.href ='/search?startx='+ startx +'&starty='+ starty +'&endx=' + endx + '&endy=' + endy;
}
</script>
<div id="map" style="width:100%;height:90%;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=비밀"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(35.950000, 128.250000),
level: 12 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var startSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_b.png', // 출발 마커이미지의 주소입니다
startSize = new kakao.maps.Size(50, 45), // 출발 마커이미지의 크기입니다
startOption = {
offset: new kakao.maps.Point(15, 43) // 출발 마커이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
};
// 출발 마커 이미지를 생성합니다
var startImage = new kakao.maps.MarkerImage(startSrc, startSize, startOption);
var startDragSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_drag.png', // 출발 마커의 드래그 이미지 주소입니다
startDragSize = new kakao.maps.Size(50, 64), // 출발 마커의 드래그 이미지 크기입니다
startDragOption = {
offset: new kakao.maps.Point(15, 54) // 출발 마커의 드래그 이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
};
// 출발 마커의 드래그 이미지를 생성합니다
var startDragImage = new kakao.maps.MarkerImage(startDragSrc, startDragSize, startDragOption);
// 출발 마커가 표시될 위치입니다
var startPosition = new kakao.maps.LatLng(37.571589, 126.975005);
// 출발 마커를 생성합니다
var startMarker = new kakao.maps.Marker({
map: map, // 출발 마커가 지도 위에 표시되도록 설정합니다
position: startPosition,
draggable: true, // 출발 마커가 드래그 가능하도록 설정합니다
image: startImage // 출발 마커이미지를 설정합니다
});
// 출발 마커에 dragstart 이벤트를 등록합니다
kakao.maps.event.addListener(startMarker, 'dragstart', function() {
// 출발 마커의 드래그가 시작될 때 마커 이미지를 변경합니다
startMarker.setImage(startDragImage);
});
// 출발 마커에 dragend 이벤트를 등록합니다
kakao.maps.event.addListener(startMarker, 'dragend', function() {
// 출발 마커의 드래그가 종료될 때 마커 이미지를 원래 이미지로 변경합니다
startMarker.setImage(startImage);
});
var arriveSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/blue_b.png', // 도착 마커이미지 주소입니다
arriveSize = new kakao.maps.Size(50, 45), // 도착 마커이미지의 크기입니다
arriveOption = {
offset: new kakao.maps.Point(15, 43) // 도착 마커이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
};
// 도착 마커 이미지를 생성합니다
var arriveImage = new kakao.maps.MarkerImage(arriveSrc, arriveSize, arriveOption);
var arriveDragSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/blue_drag.png', // 도착 마커의 드래그 이미지 주소입니다
arriveDragSize = new kakao.maps.Size(50, 64), // 도착 마커의 드래그 이미지 크기입니다
arriveDragOption = {
offset: new kakao.maps.Point(15, 54) // 도착 마커의 드래그 이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
};
// 도착 마커의 드래그 이미지를 생성합니다
var arriveDragImage = new kakao.maps.MarkerImage(arriveDragSrc, arriveDragSize, arriveDragOption);
// 도착 마커가 표시될 위치입니다
var arrivePosition = new kakao.maps.LatLng(37.280916, 127.102116);
// 도착 마커를 생성합니다
var arriveMarker = new kakao.maps.Marker({
map: map, // 도착 마커가 지도 위에 표시되도록 설정합니다
position: arrivePosition,
draggable: true, // 도착 마커가 드래그 가능하도록 설정합니다
image: arriveImage // 도착 마커이미지를 설정합니다
});
// 도착 마커에 dragstart 이벤트를 등록합니다
kakao.maps.event.addListener(arriveMarker, 'dragstart', function() {
// 도착 마커의 드래그가 시작될 때 마커 이미지를 변경합니다
arriveMarker.setImage(arriveDragImage);
});
// 도착 마커에 dragend 이벤트를 등록합니다
kakao.maps.event.addListener(arriveMarker, 'dragend', function() {
// 도착 마커의 드래그가 종료될 때 마커 이미지를 원래 이미지로 변경합니다
arriveMarker.setImage(arriveImage);
});
</script>
</body>
</html>
\ No newline at end of file
......@@ -4,8 +4,9 @@
<meta charset="utf-8">
<title>검색 결과</title>
<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:800px;}
.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 li.on {background: #eee;}
......@@ -67,7 +68,7 @@
<body>
<div class="map_wrap">
<div id="map" style="width:100%;height:800px;position:relative;overflow:hidden;"></div>
<div id="map" style="width:100%;height:100%;position:relative;overflow:hidden;"></div>
<ul id="category">
<li id="AT4" data-order="0">
<span class="category_bg oil"></span>
......@@ -128,7 +129,7 @@ var placeOverlay = new kakao.maps.CustomOverlay({zIndex:1}),
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(endx, endy), // 지도의 중심좌표
level: 8 // 지도의 확대 레벨
level: 11 // 지도의 확대 레벨
};
// 지도를 생성합니다
......