김민규 / rest_stop_list

Go to a project
Toggle navigation Toggle navigation pinning
지창언
1f83bd71 2 parents 0937dc04 556f319c

Merge branch 'map_api' into 'master' 

Map api

kakao open source map api updated

See merge request !2
Inline Side-by-side
Showing 6 changed files with 272 additions and 8 deletions
...@@ -11,6 +11,7 @@ var signupRouter = require('./routes/signup') ...@@ -11,6 +11,7 @@ var signupRouter = require('./routes/signup')
11 var lpgRouter = require('./routes/lpg') 11 var lpgRouter = require('./routes/lpg')
12 var weatherRouter = require('./routes/weather') 12 var weatherRouter = require('./routes/weather')
13 var menuRouter = require('./routes/menu') 13 var menuRouter = require('./routes/menu')
14 +var csvRouter = require('./routes/csv')
14 var app = express(); 15 var app = express();
15 var router = express.Router(); 16 var router = express.Router();
16 17
...@@ -36,6 +37,7 @@ app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); ...@@ -36,6 +37,7 @@ app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css'));
36 37
37 38
38 // 39 //
40 +app.use('/csv',csvRouter)
39 app.use('/menu',menuRouter) 41 app.use('/menu',menuRouter)
40 app.use('/login',loginRouter); // login page route 42 app.use('/login',loginRouter); // login page route
41 app.use('/weather',weatherRouter) 43 app.use('/weather',weatherRouter)
...@@ -48,7 +50,7 @@ app.use('/', indexRouter); // main page route ...@@ -48,7 +50,7 @@ app.use('/', indexRouter); // main page route
48 //모든 router 처리가 끝난 후 404 오류 페이지 처리 50 //모든 router 처리가 끝난 후 404 오류 페이지 처리
49 var errorHandler = expressErrorHandler({ 51 var errorHandler = expressErrorHandler({
50 static: { 52 static: {
51 - '404': './app/public/404.html' 53 + '404': './rest_stop_list/app/public/404.html'
52 } 54 }
53 }); 55 });
54 app.use(expressErrorHandler.httpError(404)); 56 app.use(expressErrorHandler.httpError(404));
......
This diff could not be displayed because it is too large.
1 +var express = require('express')
2 +var router = express.Router();
3 +
4 +
5 +
6 +
7 +router.get('/',function(req,res){
8 + res.render('data.csv')
9 +})
10 +
11 +
12 +module.exports = router
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,6 +2,8 @@ var express = require('express') ...@@ -2,6 +2,8 @@ var express = require('express')
2 var router = express.Router(); 2 var router = express.Router();
3 3
4 4
5 +
6 +
5 router.get('/',function(req,res){ 7 router.get('/',function(req,res){
6 res.render('index.html') 8 res.render('index.html')
7 }) 9 })
......
This diff could not be displayed because it is too large.
...@@ -12,6 +12,205 @@ ...@@ -12,6 +12,205 @@
12 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" /> 12 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
13 <!-- Core theme CSS (includes Bootstrap)--> 13 <!-- Core theme CSS (includes Bootstrap)-->
14 <link href="css/styles.css" rel="stylesheet" /> 14 <link href="css/styles.css" rel="stylesheet" />
15 + <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c71c02e15245260c3350614980ba87c8&libraries=services,clusterer,drawing"></script>
16 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
17 + <script>
18 + function makeOverListener(map, marker, infowindow) {
19 + return function() {
20 + infowindow.open(map, marker);
21 + };
22 + }
23 +
24 + // 인포윈도우를 닫는 클로저를 만드는 함수입니다
25 + function makeOutListener(infowindow) {
26 + return function() {
27 + infowindow.close();
28 + };
29 + }
30 + // 고속도로 선택 함수
31 + function showline(lineNumber){
32 + // 이 위치에 이전에 켜져있는 map을 지우는 기능 넣어야해 ...
33 + var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
34 +
35 + var options = { //지도를 생성할 때 필요한 기본 옵션
36 + center: new kakao.maps.LatLng(36.137944,128.044905), //지도의 중심좌표.
37 + level: 13 //지도의 레벨(확대, 축소 정도)
38 + };
39 + var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
40 + line = []
41 +
42 + //csv 파일에서 이정 좌표 가져와서 line 변수에 저장
43 + $.ajax({
44 + url: 'data.csv',
45 + dataType: 'text',
46 + async: false,
47 + success: function(data){
48 + var allRows = data.split(/\r?\n|\r/);
49 +
50 + for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
51 + var rowCells = allRows[singleRow].split(',');
52 + if(rowCells[0] == lineNumber){
53 + line.push(new kakao.maps.LatLng(rowCells[3],rowCells[4]))
54 + }
55 + }
56 + }
57 + });
58 + var polyline = new kakao.maps.Polyline({
59 + path: line, // 선을 구성하는 좌표배열 입니다
60 + strokeWeight: 5, // 선의 두께 입니다
61 + strokeColor: '#FF4500', // 선의 색깔입니다
62 + strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
63 + strokeStyle: 'solid' // 선의 스타일입니다
64 + });
65 + polyline.setMap(map)
66 +
67 +
68 + var userData;
69 + var markers = [];
70 + var infos = [];
71 + var routeCodes = [];
72 + var svarAddrs = [];
73 + var rest_names = [];
74 + // 1번 페이지
75 + $.ajax({
76 + url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=1",
77 + async:false,
78 + success: function(data){
79 + //변수 설정
80 + userData = data;
81 + },
82 + }).done(function() {
83 + var routeCode = "";
84 + var svarAddr = "";
85 + var rest_name = "";
86 + var data_count = userData["list"].length // 데이터 개수 얻기
87 +
88 + for (var i =0; i<data_count; i++){
89 + routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
90 + svarAddr = JSON.stringify(userData["list"][i]["svarAddr"]);
91 + rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]);
92 +
93 + if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
94 +
95 + routeCodes.push(routeCode);
96 + svarAddrs.push(svarAddr);
97 + rest_names.push(rest_name);
98 + var geocoder = new kakao.maps.services.Geocoder();
99 +
100 + }
101 + }
102 + svarAddrs.forEach(function(addr,index){
103 + geocoder.addressSearch(addr,function(result,status){
104 + if(status === kakao.maps.services.Status.OK){
105 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
106 + var marker = new kakao.maps.Marker({
107 + position:coords,
108 + map:map,
109 + })
110 + var infowindow = new kakao.maps.InfoWindow({
111 + content: rest_names[index],
112 + });
113 + kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
114 + kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
115 + }
116 + })
117 + })
118 + })
119 +
120 + // 2번 페이지
121 + $.ajax({
122 + url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=2",
123 + async:false,
124 + success: function(data){
125 + //변수 설정
126 + userData = data;
127 + },
128 + }).done(function() {
129 + var routeCode = "";
130 + var svarAddr = "";
131 + var rest_name = "";
132 + var data_count = userData["list"].length // 데이터 개수 얻기
133 +
134 + for (var i =0; i<data_count; i++){
135 + routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
136 + svarAddr = JSON.stringify(userData["list"][i]["svarAddr"]);
137 + rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]);
138 +
139 + if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
140 +
141 + routeCodes.push(routeCode);
142 + svarAddrs.push(svarAddr);
143 + rest_names.push(rest_name);
144 + var geocoder = new kakao.maps.services.Geocoder();
145 +
146 + }
147 + }
148 + svarAddrs.forEach(function(addr,index){
149 + geocoder.addressSearch(addr,function(result,status){
150 + if(status === kakao.maps.services.Status.OK){
151 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
152 + var marker = new kakao.maps.Marker({
153 + position:coords,
154 + map:map,
155 + })
156 + var infowindow = new kakao.maps.InfoWindow({
157 + content: rest_names[index],
158 + });
159 + kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
160 + kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
161 + }
162 + })
163 + })
164 + })
165 +
166 + // 3번 페이지
167 + $.ajax({
168 + url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=3",
169 + async:false,
170 + success: function(data){
171 + //변수 설정
172 + userData = data;
173 + },
174 + }).done(function() {
175 + var routeCode = "";
176 + var svarAddr = "";
177 + var rest_name = "";
178 + var data_count = userData["list"].length // 데이터 개수 얻기
179 +
180 + for (var i =0; i<data_count; i++){
181 + routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
182 + svarAddr = JSON.stringify(userData["list"][i]["svarAddr"]);
183 + rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]);
184 +
185 + if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
186 +
187 + routeCodes.push(routeCode);
188 + svarAddrs.push(svarAddr);
189 + rest_names.push(rest_name);
190 + var geocoder = new kakao.maps.services.Geocoder();
191 +
192 + }
193 + }
194 + svarAddrs.forEach(function(addr,index){
195 + geocoder.addressSearch(addr,function(result,status){
196 + if(status === kakao.maps.services.Status.OK){
197 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
198 + var marker = new kakao.maps.Marker({
199 + position:coords,
200 + map:map,
201 + })
202 + var infowindow = new kakao.maps.InfoWindow({
203 + content: rest_names[index],
204 + });
205 + kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
206 + kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
207 + }
208 + })
209 + })
210 + })
211 + }
212 +
213 + </script>
15 </head> 214 </head>
16 <body class="d-flex flex-column h-100"> 215 <body class="d-flex flex-column h-100">
17 <main class="flex-shrink-0"> 216 <main class="flex-shrink-0">
...@@ -53,15 +252,64 @@ ...@@ -53,15 +252,64 @@
53 <div class="my-5 text-center text-xl-start"> 252 <div class="my-5 text-center text-xl-start">
54 <h1 class="display-5 fw-bolder text-white mb-2">각 고속도로별 휴게소 지도 오픈 API 삽입 >></h1> 253 <h1 class="display-5 fw-bolder text-white mb-2">각 고속도로별 휴게소 지도 오픈 API 삽입 >></h1>
55 <p class="lead fw-normal text-white-50 mb-4">적당히 텍스트 삽입</p> 254 <p class="lead fw-normal text-white-50 mb-4">적당히 텍스트 삽입</p>
56 - <div class="d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xl-start"> 255 + <div class="dropdown">
57 - <a class="btn btn-primary btn-lg px-4 me-sm-3" href="#features">이자리 버튼 대신 드랍다운(고속도로선택)</a> 256 + <button class ="btn btn-primary dropdown-toggle " data-bs-toggle="dropdown">
58 - <a class="btn btn-outline-light btn-lg px-4" href="#!">Learn More</a> 257 + 고속도로 선택
258 + </button>
259 + <div class ="dropdown-menu">
260 + <a class="dropdown-item" onclick="showline('0010')">경부선</a>
261 + <a class="dropdown-item" onclick="showline('0550')">중앙선</a>
262 + <a class="dropdown-item" onclick="showline('0500')">영동선</a>
263 + </div>
59 </div> 264 </div>
60 </div> 265 </div>
61 </div> 266 </div>
62 - <!--여기 image 자리에 지도 api 삽입--> 267 + <script>
63 - <div class="col-xl-5 col-xxl-6 d-none d-xl-block text-center"><img class="img-fluid rounded-3 my-5" src="https://dummyimage.com/600x400/343a40/6c757d" alt="..." /></div> 268 + // 지도 구현 부분
64 - </div> 269 + </script>
270 +
271 +
272 + <div id="map" style="width:600px;height:400px;"></div>
273 +
274 + <script>
275 + var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
276 +
277 + var options = { //지도를 생성할 때 필요한 기본 옵션
278 + center: new kakao.maps.LatLng(36.137944,128.044905), //지도의 중심좌표.
279 + level: 13 //지도의 레벨(확대, 축소 정도)
280 + };
281 + var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
282 +
283 + // 마커표시
284 + var geocoder = new kakao.maps.services.Geocoder();
285 +
286 + // 휴게소 주소 입력시, 마커 표시 및 이동
287 + geocoder.addressSearch('경기도 용인시 고림동9', function(result, status) {
288 + // 정상적으로 검색이 완료됐으면
289 +
290 + if (status === kakao.maps.services.Status.OK) {
291 +
292 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
293 +
294 + // 결과값으로 받은 위치를 마커로 표시합니다
295 + var marker = new kakao.maps.Marker({
296 + map: map,
297 + position: coords
298 + });
299 +
300 + // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
301 + map.setLevel(4);
302 + map.setCenter(new kakao.maps.LatLng(result[0].y, result[0].x));
303 +
304 + }
305 + });
306 +
307 +
308 +
309 +
310 +
311 + </script>
312 + </div>
65 </div> 313 </div>
66 </header> 314 </header>
67 <!-- Features section--> 315 <!-- Features section-->
...@@ -103,7 +351,7 @@ ...@@ -103,7 +351,7 @@
103 <div class="row gx-5 justify-content-center"> 351 <div class="row gx-5 justify-content-center">
104 <div class="col-lg-10 col-xl-7"> 352 <div class="col-lg-10 col-xl-7">
105 <div class="text-center"> 353 <div class="text-center">
106 - <div class="fs-4 mb-4 fst-italic">이 아래는 그다지 필요하지 않을것 같으니 일단 두고 나중에 전부삭제</div> 354 + <div class="fs-4 mb-4 fst-italic" id ="testArea">이 아래는 그다지 필요하지 않을것 같으니 일단 두고 나중에 전부삭제</div>
107 <div class="d-flex align-items-center justify-content-center"> 355 <div class="d-flex align-items-center justify-content-center">
108 <img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." /> 356 <img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
109 <div class="fw-bold"> 357 <div class="fw-bold">
......