유현수 / coin_karaoke

Go to a project
Toggle navigation Toggle navigation pinning
유현수
7ce26cce 1 parent 3701c1c3

second html folder

Inline Side-by-side
Showing 3 changed files with 135 additions and 52 deletions
...@@ -9,11 +9,8 @@ ...@@ -9,11 +9,8 @@
9 <meta name = "author" content = "Hyun Soo Yoo"> 9 <meta name = "author" content = "Hyun Soo Yoo">
10 10
11 <style> 11 <style>
12 - div{ 12 + body {
13 - height: 100vh; 13 + background-color : background-color: rgb(1, 255, 200);
14 - background-image: url('C:/Users/user/Documents/coinkaraoke/css/Sing.jpg');
15 - background-repeat : no-repeat;
16 - background-size : cover;
17 } 14 }
18 15
19 #title_message{ 16 #title_message{
...@@ -39,15 +36,13 @@ ...@@ -39,15 +36,13 @@
39 </style> 36 </style>
40 37
41 <title>Coin_Karaoke</title> 38 <title>Coin_Karaoke</title>
42 - 39 +
43 - <!-- <link rel="stylesheet" href="css/coin.css" type="text/css">-->
44 - <!-- link x -->
45 </head> 40 </head>
46 41
47 <body> 42 <body>
48 43
49 <H1 id = "title_message"> 44 <H1 id = "title_message">
50 - <center>코인 노래방 검색창</center> 45 + <center>경기 남부 코인 노래방 검색창</center>
51 </H1> 46 </H1>
52 47
53 <form class = "form"> 48 <form class = "form">
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 22
23 <body> 23 <body>
24 <H2 id = "title_message"> 24 <H2 id = "title_message">
25 - <center>코인 노래방 검색창</center> 25 + <center>경기 남부 코인 노래방 검색창</center>
26 </H2> 26 </H2>
27 27
28 <div id="map" style="width:95%;height:600px;"></div> 28 <div id="map" style="width:95%;height:600px;"></div>
...@@ -31,65 +31,153 @@ ...@@ -31,65 +31,153 @@
31 </script> 31 </script>
32 32
33 <script> 33 <script>
34 - var mapContainer = document.getElementById('map'); // div to display map 34 + var mapContainer = document.getElementById('map'), // 지도를 표시할 div
35 - var mapOption = { 35 + mapOption = {
36 - center: new kakao.maps.LatLng(33.450701, 126.570667), // coordinates of the center of the map 36 + center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
37 - level: 3 // Magnification level of the map 37 + level: 3 // 지도의 확대 레벨
38 - }; 38 + };
39 - // Create a map with a div to display the map and map options 39 +
40 - var map = new kakao.maps.Map(mapContainer, mapOption); 40 + var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성
41 - 41 +
42 + // HTML5의 geolocation으로 사용할 수 있는지 확인
42 if (navigator.geolocation) { 43 if (navigator.geolocation) {
43 44
44 - // Get the connection location using GeoLocation 45 + // GeoLocation을 이용해서 접속 위치를 얻어옴
45 navigator.geolocation.getCurrentPosition(function(position) { 46 navigator.geolocation.getCurrentPosition(function(position) {
46 -
47 - var lat = position.coords.latitude, // latitude
48 - lon = position.coords.longitude; // longitude
49 -
50 - // Creates the location where the marker will be displayed with the coordinates obtained from geolocation
51 - var locPosition = new kakao.maps.LatLng(lat, lon)
52 - message = '<div style="padding:1px;">여기에 계신가요?!</div>';
53 47
54 - // display a marker 48 + var now_lat = position.coords.latitude, // 현재 위도
55 - displayMarker(locPosition,message); 49 + now_lon = position.coords.longitude; // 현재 경도
50 +
51 + var locPosition = new kakao.maps.LatLng(now_lat, now_lon) // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성
52 +
53 + // 마커를 표시
54 + displayMarker(locPosition);
56 55
57 }); 56 });
58 - 57 +
59 - } 58 + } else { //GeoLocation을 사용할 수 없을때 마커 표시 위치 설정
60 - else { // When HTML5 GeoLocation is not available, set the marker display location and infowindow content 59 +
61 - 60 + var locPosition = new kakao.maps.LatLng(33.450701, 126.570667)
62 - var locPosition = new kakao.maps.LatLng(33.450701, 126.570667), 61 +
63 - message = 'geolocation을 사용할수 없어요..' 62 + displayMarker(locPosition);
64 -
65 - displayMarker(locPosition,message);
66 } 63 }
67 64
68 - //function to display a marker on the map 65 + // 지도에 마커를 표시하는 함수
69 - function displayMarker(locPosition, message) { 66 + function displayMarker(locPosition) {
70 67
71 - // create a marker 68 + // 마커를 생성
72 var marker = new kakao.maps.Marker({ 69 var marker = new kakao.maps.Marker({
73 map: map, 70 map: map,
74 position: locPosition 71 position: locPosition
75 }); 72 });
76 73
77 - var iwContent = message, //Contents to display in info window 74 + // 지도 중심좌표를 접속위치로 변경
75 + map.setCenter(locPosition);
76 + }
77 +
78 + //엑셀 파일 데이터 불러오기
79 + var XLSX = require("xlsx");
80 + var workbook = XLSX.readFile("C:/Users/user/Documents/coinkaraoke/coin_karaoke/public/xlsx/latitude_longitute.xlsx")
78 81
79 - iwRemoveable = true; 82 + var worksheet = workbook.Sheets[workbook.SheetNames[0]];
80 - 83 +
81 - // make info window 84 + var location_arr = []; //경기 나무 코인 노래방 주소 배열
82 - var infowindow = new kakao.maps.InfoWindow({ 85 + var latitude_arr = []; //경기 나무 코인 노래방 위도 배열
83 - content : iwContent, 86 + var longitude_arr = []; //경기 나무 코인 노래방 경도 배열
84 - removable :iwRemoveable 87 +
88 + //엑셀 파일 데이터(주소) 배열 저장
89 + for(var i = 2 ; i <= 406; i++){
90 + location_arr.push(worksheet[`A${i}`].v);
91 + }
92 +
93 + var geocoder = new kakao.maps.services.Geocoder();
94 + //주소로부터 위도, 경도 찾기
95 + for(var i = 0 ; i < 405 ; i ++){
96 + geocoder.addressSearch(location_arr[i], function(result, status) {
97 + latitude_arr[i].push(result[i].y);
98 + longitude_arr[i].push(result[i].x);
85 }); 99 });
86 - 100 + }
87 - // Display the info window on the marker 101 +
88 - infowindow.open(map, marker); 102 + var distance = []; //거리
103 + var cal_distance = []; //거리
104 + var near_coin_address = new Array(5); //가까운 코인 노래방 5개
105 + var near_coin_latitude = new Array(5); //가까운 코인 노래방 5개
106 + var near_coin_longtitude = new Array(5); //가까운 코인 노래방 5개
107 + var near_coin_distance = new Array(5);
108 +
109 + //거리계산
110 + for(var i = 0 ; i < 405 ; i ++){
111 + distance.push(Math.sqrt(Math.pow((now_lat - latitude_arr[i])) + Math.pow((now_lon -longitude_arr[i]))));
112 + cal_distance.push(Math.sqrt(Math.pow((now_lat - latitude_arr[i])) + Math.pow((now_lon -longitude_arr[i]))));
113 + }
114 +
115 + //거리에 따른 정렬
116 + var temp;
117 + for(var i = 0; i < 404 ; i ++){
118 + for(var j = 0 ; j < 404-j ; j ++){
119 + if(cal_distance[j] > cal_distance[j+1]){
120 + temp = cal_distance[j];
121 + cal_distance[j] = cal_distance[j+1];
122 + cal_distance[j] = temp;
123 + }
124 + }
125 + }
126 +
127 + //가까운 거리 배열
128 + for(var i = 0 ; i < 5 ; i ++){
129 + near_coin_distance[i] = cal_distance[i];
130 + }
131 +
132 + for(var i = 0 ; i < 5 ; i ++){
133 + for(var j = 0; j < 404 ; j ++){
134 + if(near_coin_distance[i] == distance[j]){
135 + near_coin_address[i] = location_arr[j];
136 + near_coin_latitude[i] = latitude_arr[j];
137 + near_coin_longtitude[i] = longitude_arr[j];
138 + }
139 + }
140 + }
141 +
142 + //가까운 코인 노래방 마킹
143 +
144 + var positions = [
145 + {
146 + latlng: new kakao.maps.LatLng(near_coin_latitude[0], near_coin_longtitude[0])
147 + },
148 + {
149 + latlng: new kakao.maps.LatLng(near_coin_latitude[1], near_coin_longtitude[1])
150 + },
151 + {
152 + latlng: new kakao.maps.LatLng(near_coin_latitude[2], near_coin_longtitude[2])
153 + },
154 + {
155 + latlng: new kakao.maps.LatLng(near_coin_latitude[3], near_coin_longtitude[3])
156 + },
157 + {
158 + latlng: new kakao.maps.LatLng(near_coin_latitude[4], near_coin_longtitude[4])
159 + }
160 + ];
161 +
162 + // 마커 이미지의 이미지 주소
163 + var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
164 +
165 + for (var i = 0; i < positions.length; i ++) {
166 +
167 + // 마커 이미지의 이미지 크기
168 + var imageSize = new kakao.maps.Size(24, 35);
169 +
170 + // 마커 이미지를 생성
171 + var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
172 +
173 + // 마커를 생성
174 + var marker = new kakao.maps.Marker({
175 + map: map, // 마커를 표시할 지도
176 + position: positions[i].latlng, // 마커를 표시할 위치
177 + image : markerImage // 마커 이미지
178 + });
179 + }
89 180
90 - // Change the map center coordinates to the connection location
91 - map.setCenter(locPosition);
92 - }
93 </script> 181 </script>
94 182
95 </body> 183 </body>
......