최지우 / oss_project

Go to a project
Toggle navigation Toggle navigation pinning
최지우
ae6b9301 1 parent bcb863a5

Kakao Maps API 연동

Inline Side-by-side
Showing 6 changed files with 172 additions and 26 deletions
...@@ -4,9 +4,8 @@ var path = require('path'); ...@@ -4,9 +4,8 @@ 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 indexRouter = require('./routes/index'); 7 +var mainRouter = require('./routes/main');
8 -var usersRouter = require('./routes/users'); 8 +var searchRouter = require('./routes/search')
9 -
10 var app = express(); 9 var app = express();
11 10
12 // view engine setup 11 // view engine setup
...@@ -19,8 +18,8 @@ app.use(express.urlencoded({ extended: false })); ...@@ -19,8 +18,8 @@ app.use(express.urlencoded({ extended: false }));
19 app.use(cookieParser()); 18 app.use(cookieParser());
20 app.use(express.static(path.join(__dirname, 'public'))); 19 app.use(express.static(path.join(__dirname, 'public')));
21 20
22 -app.use('/', indexRouter); 21 +app.use('/', mainRouter);
23 -app.use('/users', usersRouter); 22 +app.use('/search', searchRouter);
24 23
25 // catch 404 and forward to error handler 24 // catch 404 and forward to error handler
26 app.use(function(req, res, next) { 25 app.use(function(req, res, next) {
......
...@@ -3,7 +3,7 @@ var router = express.Router(); ...@@ -3,7 +3,7 @@ var router = express.Router();
3 3
4 /* GET home page. */ 4 /* GET home page. */
5 router.get('/', function(req, res, next) { 5 router.get('/', function(req, res, next) {
6 - res.render('index', { title: 'Express' }); 6 + res.render('search', { title: 'Express' });
7 }); 7 });
8 8
9 module.exports = router; 9 module.exports = router;
......
1 -var express = require('express');
2 -var router = express.Router();
3 -
4 -/* GET users listing. */
5 -router.get('/', function(req, res, next) {
6 - res.send('respond with a resource');
7 -});
8 -
9 -module.exports = router;
1 -<!DOCTYPE html>
2 -<html>
3 -<head>
4 - <meta charset=”utf-8″>
5 - <title>Title</title>
6 -</head>
7 -<body>
8 - <h1>Title</h1>
9 - <p>Hello World</p>
10 -</body>
11 -</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 +
7 +</head>
8 +<body>
9 +<div id="map" style="width:100%;height:350px;"></div>
10 +<p><em>출발지와 도착지를 설정해주세요!</em></p>
11 +
12 +<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=비밀"></script>
13 +<script>
14 +var mapContainer = document.getElementById('map'), // 지도를 표시할 div
15 + mapOption = {
16 + center: new kakao.maps.LatLng(33.450701, 126.570667),
17 + level: 3 // 지도의 확대 레벨
18 + };
19 +
20 +var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
21 +
22 +var startSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_b.png', // 출발 마커이미지의 주소입니다
23 + startSize = new kakao.maps.Size(50, 45), // 출발 마커이미지의 크기입니다
24 + startOption = {
25 + offset: new kakao.maps.Point(15, 43) // 출발 마커이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
26 + };
27 +
28 +// 출발 마커 이미지를 생성합니다
29 +var startImage = new kakao.maps.MarkerImage(startSrc, startSize, startOption);
30 +
31 +var startDragSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_drag.png', // 출발 마커의 드래그 이미지 주소입니다
32 + startDragSize = new kakao.maps.Size(50, 64), // 출발 마커의 드래그 이미지 크기입니다
33 + startDragOption = {
34 + offset: new kakao.maps.Point(15, 54) // 출발 마커의 드래그 이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
35 + };
36 +
37 +// 출발 마커의 드래그 이미지를 생성합니다
38 +var startDragImage = new kakao.maps.MarkerImage(startDragSrc, startDragSize, startDragOption);
39 +
40 +// 출발 마커가 표시될 위치입니다
41 +var startPosition = new kakao.maps.LatLng(33.450701, 126.570667);
42 +
43 +// 출발 마커를 생성합니다
44 +var startMarker = new kakao.maps.Marker({
45 + map: map, // 출발 마커가 지도 위에 표시되도록 설정합니다
46 + position: startPosition,
47 + draggable: true, // 출발 마커가 드래그 가능하도록 설정합니다
48 + image: startImage // 출발 마커이미지를 설정합니다
49 +});
50 +
51 +// 출발 마커에 dragstart 이벤트를 등록합니다
52 +kakao.maps.event.addListener(startMarker, 'dragstart', function() {
53 + // 출발 마커의 드래그가 시작될 때 마커 이미지를 변경합니다
54 + startMarker.setImage(startDragImage);
55 +});
56 +
57 +// 출발 마커에 dragend 이벤트를 등록합니다
58 +kakao.maps.event.addListener(startMarker, 'dragend', function() {
59 + // 출발 마커의 드래그가 종료될 때 마커 이미지를 원래 이미지로 변경합니다
60 + startMarker.setImage(startImage);
61 +});
62 +
63 +var arriveSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/blue_b.png', // 도착 마커이미지 주소입니다
64 +arriveSize = new kakao.maps.Size(50, 45), // 도착 마커이미지의 크기입니다
65 +arriveOption = {
66 + offset: new kakao.maps.Point(15, 43) // 도착 마커이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
67 +};
68 +
69 +// 도착 마커 이미지를 생성합니다
70 +var arriveImage = new kakao.maps.MarkerImage(arriveSrc, arriveSize, arriveOption);
71 +
72 +var arriveDragSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/blue_drag.png', // 도착 마커의 드래그 이미지 주소입니다
73 + arriveDragSize = new kakao.maps.Size(50, 64), // 도착 마커의 드래그 이미지 크기입니다
74 + arriveDragOption = {
75 + offset: new kakao.maps.Point(15, 54) // 도착 마커의 드래그 이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
76 + };
77 +
78 +// 도착 마커의 드래그 이미지를 생성합니다
79 +var arriveDragImage = new kakao.maps.MarkerImage(arriveDragSrc, arriveDragSize, arriveDragOption);
80 +
81 +// 도착 마커가 표시될 위치입니다
82 +var arrivePosition = new kakao.maps.LatLng(33.450701, 126.572667);
83 +
84 +// 도착 마커를 생성합니다
85 +var arriveMarker = new kakao.maps.Marker({
86 + map: map, // 도착 마커가 지도 위에 표시되도록 설정합니다
87 + position: arrivePosition,
88 + draggable: true, // 도착 마커가 드래그 가능하도록 설정합니다
89 + image: arriveImage // 도착 마커이미지를 설정합니다
90 +});
91 +
92 +// 도착 마커에 dragstart 이벤트를 등록합니다
93 +kakao.maps.event.addListener(arriveMarker, 'dragstart', function() {
94 + // 도착 마커의 드래그가 시작될 때 마커 이미지를 변경합니다
95 + arriveMarker.setImage(arriveDragImage);
96 +});
97 +
98 +// 도착 마커에 dragend 이벤트를 등록합니다
99 +kakao.maps.event.addListener(arriveMarker, 'dragend', function() {
100 + // 도착 마커의 드래그가 종료될 때 마커 이미지를 원래 이미지로 변경합니다
101 + arriveMarker.setImage(arriveImage);
102 +});
103 +</script>
104 +</body>
105 +</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>카테고리로 장소 검색하기</title>
6 +
7 +</head>
8 +<body>
9 +<p style="margin-top:-12px">
10 + <em class="link">
11 + <a href="/web/documentation/#CategoryCode" target="_blank">카테고리 코드목록을 보시려면 여기를 클릭하세요!</a>
12 + </em>
13 +</p>
14 +<div id="map" style="width:100%;height:350px;"></div>
15 +
16 +<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=비밀&libraries=services"></script>
17 +<script>
18 +// 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
19 +var infowindow = new kakao.maps.InfoWindow({zIndex:1});
20 +
21 +var mapContainer = document.getElementById('map'), // 지도를 표시할 div
22 + mapOption = {
23 + center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
24 + level: 3 // 지도의 확대 레벨
25 + };
26 +
27 +// 지도를 생성합니다
28 +var map = new kakao.maps.Map(mapContainer, mapOption);
29 +
30 +// 장소 검색 객체를 생성합니다
31 +var ps = new kakao.maps.services.Places(map);
32 +
33 +// 카테고리로 은행을 검색합니다
34 +ps.categorySearch('BK9', placesSearchCB, {useMapBounds:true});
35 +
36 +// 키워드 검색 완료 시 호출되는 콜백함수 입니다
37 +function placesSearchCB (data, status, pagination) {
38 + if (status === kakao.maps.services.Status.OK) {
39 + for (var i=0; i<data.length; i++) {
40 + displayMarker(data[i]);
41 + }
42 + }
43 +}
44 +
45 +// 지도에 마커를 표시하는 함수입니다
46 +function displayMarker(place) {
47 + // 마커를 생성하고 지도에 표시합니다
48 + var marker = new kakao.maps.Marker({
49 + map: map,
50 + position: new kakao.maps.LatLng(place.y, place.x)
51 + });
52 +
53 + // 마커에 클릭이벤트를 등록합니다
54 + kakao.maps.event.addListener(marker, 'click', function() {
55 + // 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
56 + infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
57 + infowindow.open(map, marker);
58 + });
59 +}
60 +</script>
61 +</body>
62 +</html>
...\ No newline at end of file ...\ No newline at end of file