김민규 / rest_stop_list

Go to a project
Toggle navigation Toggle navigation pinning
지창언
f9aac8d8 1 parent 0e52ba09

It is updated for marker to be set in map,

Inline Side-by-side
Showing 1 changed file with 205 additions and 78 deletions
...@@ -12,8 +12,183 @@ ...@@ -12,8 +12,183 @@
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 - 15 + <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c71c02e15245260c3350614980ba87c8&libraries=services,clusterer,drawing"></script>
16 - 16 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
17 + <script>
18 + // 고속도로 선택 함수
19 + function showline(lineNumber){
20 + // 이 위치에 이전에 켜져있는 map을 지우는 기능 넣어야해 ...
21 + var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
22 +
23 + var options = { //지도를 생성할 때 필요한 기본 옵션
24 + center: new kakao.maps.LatLng(36.137944,128.044905), //지도의 중심좌표.
25 + level: 13 //지도의 레벨(확대, 축소 정도)
26 + };
27 + var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
28 + line = []
29 +
30 + //csv 파일에서 이정 좌표 가져와서 line 변수에 저장
31 + $.ajax({
32 + url: 'data.csv',
33 + dataType: 'text',
34 + async: false,
35 + success: function(data){
36 + var allRows = data.split(/\r?\n|\r/);
37 +
38 + for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
39 + var rowCells = allRows[singleRow].split(',');
40 + if(rowCells[0] == lineNumber){
41 + line.push(new kakao.maps.LatLng(rowCells[3],rowCells[4]))
42 + }
43 + }
44 + }
45 + });
46 + var polyline = new kakao.maps.Polyline({
47 + path: line, // 선을 구성하는 좌표배열 입니다
48 + strokeWeight: 5, // 선의 두께 입니다
49 + strokeColor: '#FF4500', // 선의 색깔입니다
50 + strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
51 + strokeStyle: 'solid' // 선의 스타일입니다
52 + });
53 + polyline.setMap(map)
54 +
55 +
56 +
57 + // 1번 페이지
58 + $.ajax({
59 + url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=1",
60 + success: function(data){
61 + var userData = JSON.stringify(data);
62 + var result_str="";
63 + var routeCode = "";
64 + var svarAddr = "";
65 + var count = data["list"].length;
66 +
67 + for (var i =0; i<count; i++){
68 + routeCode = JSON.stringify(data["list"][i]["routeCode"]);
69 + svarAddr = JSON.stringify(data["list"][i]["svarAddr"]);
70 + if(routeCode.substring(1,5) === lineNumber){
71 + document.getElementById("testArea").innerHTML += routeCode.substring(1,5)+ " ";
72 + var geocoder = new kakao.maps.services.Geocoder();
73 +
74 + // 주소로 좌표를 검색합니다
75 + geocoder.addressSearch(svarAddr, function(result, status) {
76 +
77 + // 정상적으로 검색이 완료됐으면
78 + if (status === kakao.maps.services.Status.OK) {
79 +
80 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
81 +
82 + // 결과값으로 받은 위치를 마커로 표시합니다
83 + var marker = new kakao.maps.Marker({
84 + map: map,
85 + position: coords
86 + });
87 +
88 + // 인포윈도우로 장소에 대한 설명을 표시합니다
89 + var infowindow = new kakao.maps.InfoWindow({
90 + content: '<div style="width:150px;text-align:center;padding:6px 0;" id ="position_ex"></div>'
91 + });
92 + document.getElementById("position_ex").innerHTML = svarAddr;
93 + infowindow.open(map, marker);
94 + }
95 + });
96 + }
97 +
98 + }
99 + },
100 + })
101 + // 2번 페이지
102 + $.ajax({
103 + url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=2",
104 + success: function(data){
105 + var userData = JSON.stringify(data);
106 + var result_str="";
107 + var routeCode = "";
108 + var svarAddr = "";
109 + var count = data["list"].length;
110 +
111 + for (var i =0; i<count; i++){
112 + routeCode = JSON.stringify(data["list"][i]["routeCode"]);
113 + svarAddr = JSON.stringify(data["list"][i]["svarAddr"]);
114 + if(routeCode.substring(1,5) === lineNumber){
115 + document.getElementById("testArea").innerHTML += routeCode.substring(1,5)+ " ";
116 + var geocoder = new kakao.maps.services.Geocoder();
117 +
118 + // 주소로 좌표를 검색합니다
119 + geocoder.addressSearch(svarAddr, function(result, status) {
120 +
121 + // 정상적으로 검색이 완료됐으면
122 + if (status === kakao.maps.services.Status.OK) {
123 +
124 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
125 +
126 + // 결과값으로 받은 위치를 마커로 표시합니다
127 + var marker = new kakao.maps.Marker({
128 + map: map,
129 + position: coords
130 + });
131 +
132 + // 인포윈도우로 장소에 대한 설명을 표시합니다
133 + var infowindow = new kakao.maps.InfoWindow({
134 + content: '<div style="width:150px;text-align:center;padding:6px 0;" id ="position"></div>'
135 + });
136 + document.getElementById("position").innerHTML = svarAddr;
137 + infowindow.open(map, marker);
138 + }
139 + });
140 + }
141 +
142 + }
143 + },
144 + })
145 + // 3번 페이지
146 + $.ajax({
147 + url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=3",
148 + success: function(data){
149 + var userData = JSON.stringify(data);
150 + var result_str="";
151 + var routeCode = "";
152 + var svarAddr = "";
153 + var count = data["list"].length;
154 +
155 + for (var i =0; i<count; i++){
156 + routeCode = JSON.stringify(data["list"][i]["routeCode"]);
157 + svarAddr = JSON.stringify(data["list"][i]["svarAddr"]);
158 + if(routeCode.substring(1,5) === lineNumber){
159 + document.getElementById("testArea").innerHTML += routeCode.substring(1,5)+ " ";
160 + var geocoder = new kakao.maps.services.Geocoder();
161 +
162 + // 주소로 좌표를 검색합니다
163 + geocoder.addressSearch(svarAddr, function(result, status) {
164 +
165 + // 정상적으로 검색이 완료됐으면
166 + if (status === kakao.maps.services.Status.OK) {
167 +
168 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
169 +
170 + // 결과값으로 받은 위치를 마커로 표시합니다
171 + var marker = new kakao.maps.Marker({
172 + map: map,
173 + position: coords
174 + });
175 +
176 + // 인포윈도우로 장소에 대한 설명을 표시합니다
177 + var infowindow = new kakao.maps.InfoWindow({
178 + content: '<div style="width:150px;text-align:center;padding:6px 0;" id ="position"></div>'
179 + });
180 + document.getElementById("position").innerHTML = svarAddr;
181 + infowindow.open(map, marker);
182 + }
183 + });
184 + }
185 +
186 + }
187 + },
188 + })
189 +
190 + }
191 + </script>
17 </head> 192 </head>
18 <body class="d-flex flex-column h-100"> 193 <body class="d-flex flex-column h-100">
19 <main class="flex-shrink-0"> 194 <main class="flex-shrink-0">
...@@ -57,51 +232,20 @@ ...@@ -57,51 +232,20 @@
57 <p class="lead fw-normal text-white-50 mb-4">적당히 텍스트 삽입</p> 232 <p class="lead fw-normal text-white-50 mb-4">적당히 텍스트 삽입</p>
58 <div class="dropdown"> 233 <div class="dropdown">
59 <button class ="btn btn-primary dropdown-toggle " data-bs-toggle="dropdown"> 234 <button class ="btn btn-primary dropdown-toggle " data-bs-toggle="dropdown">
60 - 휴게소 선택 235 + 고속도로 선택
61 </button> 236 </button>
62 <div class ="dropdown-menu"> 237 <div class ="dropdown-menu">
63 <a class="dropdown-item" onclick="showline('0010')">경부선</a> 238 <a class="dropdown-item" onclick="showline('0010')">경부선</a>
64 - <a class="dropdown-item" onclick="showline('0600')">서울양양선</a> 239 + <a class="dropdown-item" onclick="showline('0550')">중앙선</a>
65 - <a class="dropdown-item" onclick="showline('0450')">중부내륙선</a> 240 + <a class="dropdown-item" onclick="showline('0500')">영동선</a>
66 </div> 241 </div>
67 </div> 242 </div>
68 </div> 243 </div>
69 </div> 244 </div>
70 245
71 <div id="map" style="width:600px;height:400px;"></div> 246 <div id="map" style="width:600px;height:400px;"></div>
72 - <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c71c02e15245260c3350614980ba87c8"></script> 247 +
73 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
74 <script> 248 <script>
75 - var x;
76 - var y;
77 -
78 - // 경로 생성
79 - var linepath = []
80 - // 아래 함수는 10번 고속도로의 모든 이정표의 x,y 좌표값을 linepath 변수에 저장
81 - $.ajax({
82 - url: 'data.csv',
83 - dataType: 'text',
84 - async: false,
85 - success: function(data){
86 - var allRows = data.split(/\r?\n|\r/);
87 -
88 - for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
89 - var rowCells = allRows[singleRow].split(',');
90 - if(rowCells[0] == '0010'){
91 - linepath.push(new kakao.maps.LatLng(rowCells[3],rowCells[4]))
92 - }
93 - }
94 - var rowCells = allRows[1].split(',');
95 - //linepath.append(new kakao.maps.LatLng(rowCells[3],rowCells[4]))
96 - x = rowCells[3]
97 - y = rowCells[4]
98 - $('#testArea').append(x)
99 -
100 - }
101 - });
102 - //linepath.append(new kakao.maps.LatLng())
103 -
104 -
105 var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스 249 var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
106 250
107 var options = { //지도를 생성할 때 필요한 기본 옵션 251 var options = { //지도를 생성할 때 필요한 기본 옵션
...@@ -110,51 +254,34 @@ ...@@ -110,51 +254,34 @@
110 }; 254 };
111 var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴 255 var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
112 256
257 + // 마커표시
258 + var geocoder = new kakao.maps.services.Geocoder();
113 259
114 - 260 + // 휴게소 주소 입력시, 마커 표시 및 이동
115 - var polyline = new kakao.maps.Polyline({ 261 + geocoder.addressSearch('경기도 용인시 고림동9', function(result, status) {
116 - path: linepath, // 선을 구성하는 좌표배열 입니다 262 + // 정상적으로 검색이 완료됐으면
117 - strokeWeight: 5, // 선의 두께 입니다
118 - strokeColor: '#FF4500', // 선의 색깔입니다
119 - strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
120 - strokeStyle: 'solid' // 선의 스타일입니다
121 - });
122 -
123 - polyline.setMap(map)
124 -
125 - function showline(lineNumber){
126 - var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
127 263
128 - var options = { //지도를 생성할 때 필요한 기본 옵션 264 + if (status === kakao.maps.services.Status.OK) {
129 - center: new kakao.maps.LatLng(36.137944,128.044905), //지도의 중심좌표. 265 +
130 - level: 13 //지도의 레벨(확대, 축소 정도) 266 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
131 - }; 267 +
132 - var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴 268 + // 결과값으로 받은 위치를 마커로 표시합니다
133 - line = [] 269 + var marker = new kakao.maps.Marker({
134 - $.ajax({ 270 + map: map,
135 - url: 'data.csv', 271 + position: coords
136 - dataType: 'text', 272 + });
137 - async: false, 273 +
138 - success: function(data){ 274 + // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
139 - var allRows = data.split(/\r?\n|\r/); 275 + map.setLevel(4);
276 + map.setCenter(new kakao.maps.LatLng(result[0].y, result[0].x));
140 277
141 - for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
142 - var rowCells = allRows[singleRow].split(',');
143 - if(rowCells[0] == lineNumber){
144 - line.push(new kakao.maps.LatLng(rowCells[3],rowCells[4]))
145 - }
146 - }
147 } 278 }
148 - }); 279 + });
149 - var polyline = new kakao.maps.Polyline({ 280 +
150 - path: line, // 선을 구성하는 좌표배열 입니다 281 +
151 - strokeWeight: 5, // 선의 두께 입니다 282 +
152 - strokeColor: '#FF4500', // 선의 색깔입니다 283 +
153 - strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다 284 +
154 - strokeStyle: 'solid' // 선의 스타일입니다
155 - });
156 - polyline.setMap(map)
157 - }
158 </script> 285 </script>
159 </div> 286 </div>
160 </div> 287 </div>
......