김민규 / rest_stop_list

Go to a project
Toggle navigation Toggle navigation pinning
지창언
76f81ab7 1 parent b2c620ff

mapAPI updated

Inline Side-by-side
Showing 5 changed files with 61 additions and 3 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)
......
This diff could not be displayed because it is too large.
1 +var express = require('express')
2 +var router = express.Router();
3 +
4 +router.get('/',function(req,res){
5 + res.render('data.csv')
6 +})
7 +
8 +
9 +module.exports = router
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
...@@ -12,6 +12,8 @@ ...@@ -12,6 +12,8 @@
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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
16 +
15 </head> 17 </head>
16 <body class="d-flex flex-column h-100"> 18 <body class="d-flex flex-column h-100">
17 <main class="flex-shrink-0"> 19 <main class="flex-shrink-0">
...@@ -59,8 +61,53 @@ ...@@ -59,8 +61,53 @@
59 </div> 61 </div>
60 </div> 62 </div>
61 </div> 63 </div>
62 - <!--여기 image 자리에 지도 api 삽입--> 64 +
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> 65 + <div id="map" style="width:600px;height:400px;"></div>
66 + <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c71c02e15245260c3350614980ba87c8"></script>
67 + <!-- services와 clusterer, drawing 라이브러리 불러오기 -->
68 + <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY&libraries=services,clusterer,drawing"></script>
69 +
70 + <script type="text/javascript">
71 + var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
72 + var options = { //지도를 생성할 때 필요한 기본 옵션
73 + center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
74 + level: 3 //지도의 레벨(확대, 축소 정도)
75 + };
76 +
77 + var testA1 = [
78 + 210352512672,
79 + 26871772376272,
80 + 7726284477,
81 + 277457742787
82 + ]
83 +
84 + var filename = "/csv"
85 + // 아래 함수는 10번 고속도로의 모든 이정표의 x,y 좌표값을 linepath 변수에 저장
86 + $.ajax({
87 + url: filename,
88 + dataType: 'text',
89 + success: function(data){
90 + var allRows = data.split(/\r?\n|\r/);
91 + $('#testArea').append(allRows)
92 + }
93 + });
94 +
95 + var linepath = [
96 + new kakao.maps.LatLng(33.452344169439975, 126.56878163224233),
97 + new kakao.maps.LatLng(33.452739313807456, 126.5709308145358),
98 + new kakao.maps.LatLng(33.45178067090639, 126.5726886938753)
99 + ]
100 + var polyline = new kakao.maps.Polyline({
101 + map: map,
102 + path: linepath,
103 + strokeWeight: 2,
104 + strokeColor: '#FF00FF',
105 + strokeOpacity: 0.8,
106 + strokeStyle: 'dashed'
107 + });
108 + var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
109 + polyline.set(map)
110 + </script>
64 </div> 111 </div>
65 </div> 112 </div>
66 </header> 113 </header>
...@@ -103,7 +150,7 @@ ...@@ -103,7 +150,7 @@
103 <div class="row gx-5 justify-content-center"> 150 <div class="row gx-5 justify-content-center">
104 <div class="col-lg-10 col-xl-7"> 151 <div class="col-lg-10 col-xl-7">
105 <div class="text-center"> 152 <div class="text-center">
106 - <div class="fs-4 mb-4 fst-italic">이 아래는 그다지 필요하지 않을것 같으니 일단 두고 나중에 전부삭제</div> 153 + <div class="fs-4 mb-4 fst-italic" id ="testArea">이 아래는 그다지 필요하지 않을것 같으니 일단 두고 나중에 전부삭제</div>
107 <div class="d-flex align-items-center justify-content-center"> 154 <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="..." /> 155 <img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
109 <div class="fw-bold"> 156 <div class="fw-bold">
......