김동훈 / OpenSource_Project

Go to a project
Toggle navigation Toggle navigation pinning
전수민
06e971b5 1 parent 0d3b0504

font link

Inline Side-by-side
Showing 4 changed files with 157 additions and 83 deletions
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 3
4 - <head> 4 +<head>
5 5
6 <meta charset="utf-8"> 6 <meta charset="utf-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
...@@ -23,9 +23,11 @@ ...@@ -23,9 +23,11 @@
23 <!-- Custom styles for this template--> 23 <!-- Custom styles for this template-->
24 <link href="css/sb-admin.css" rel="stylesheet"> 24 <link href="css/sb-admin.css" rel="stylesheet">
25 25
26 - </head> 26 + <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&amp;subset=korean" rel="stylesheet">
27 27
28 - <body id="page-top"> 28 +</head>
29 +
30 +<body id="page-top">
29 31
30 <nav class="navbar navbar-expand navbar-dark bg-dark static-top"> 32 <nav class="navbar navbar-expand navbar-dark bg-dark static-top">
31 33
...@@ -51,7 +53,7 @@ ...@@ -51,7 +53,7 @@
51 53
52 <li class="nav-item"> 54 <li class="nav-item">
53 <a class="nav-link" href="Foods.html"> 55 <a class="nav-link" href="Foods.html">
54 - <i class="fas fa-utensils" area-hidden ="true"></i> 56 + <i class="fas fa-utensils" area-hidden="true"></i>
55 <span>Foods</span> 57 <span>Foods</span>
56 </a> 58 </a>
57 </li> 59 </li>
...@@ -84,83 +86,122 @@ ...@@ -84,83 +86,122 @@
84 86
85 </ol> 87 </ol>
86 88
89 + <!-- Icon Cards-->
90 + <div class="row" id="cardBody">
91 + </div>
92 +
93 + <!-- <script>
94 + var result_entertainment = []
95 + </script> -->
87 <script> 96 <script>
88 var result_entertainment = [] 97 var result_entertainment = []
89 - </script> 98 + var entName = '';
90 - <script type="text/javascript" src="/js/showEnt.js"></script> 99 + var entType = '';
91 - <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDg4CkUEEt_96n1ork1nL5t4E_SpdKrgMI&libraries=places&callback=initMap" async defer></script> 100 + var card = '';
101 +
102 + var map;
103 + var service;
104 +
105 + function initMap() {
106 + // Try HTML5 geolocation.
107 + if (navigator.geolocation) {
108 + navigator.geolocation.getCurrentPosition(function (position) {
109 + pos = {
110 + lat: position.coords.latitude,
111 + lng: position.coords.longitude
112 + };
113 +
114 + map = new google.maps.Map(document.getElementById('map'), {
115 + center: pos,
116 + zoom: 17
117 + });
118 +
119 + map.setCenter(pos);
120 +
121 + service = new google.maps.places.PlacesService(map);
122 +
123 + searchPlace('department_store', 'entertainment');
124 + searchPlace('movie_theater', 'entertainment');
125 + searchPlace('museum', 'entertainment');
126 + searchPlace('night_club', 'entertainment');
127 + searchPlace('shopping_mall', 'entertainment');
128 + searchPlace('zoo', 'entertainment');
129 + });
130 + }
131 + }
132 +
133 + async function searchPlace(str, placeType) {
134 + switch (placeType) {
135 + case 'food':
136 + service.nearbySearch({
137 + location: pos,
138 + radius: 500,
139 + type: [str]
140 + }, await callback_foods);
141 + break;
142 + case 'entertainment':
143 + service.nearbySearch({
144 + location: pos,
145 + radius: 500,
146 + type: [str]
147 + }, await callback_entertainment);
148 + break;
149 + case 'room':
150 + service.nearbySearch({
151 + location: pos,
152 + radius: 500,
153 + type: [str]
154 + }, await callback_rooms);
155 + break;
156 + default:
157 + break;
158 + }
159 + }
160 +
161 + function callback_entertainment(results, status) {
162 + if (status === google.maps.places.PlacesServiceStatus.OK) {
163 + for (var i = 0; i < results.length; i++) {
164 + console.log(results[i]);
165 + result_entertainment.push(results[i])
166 + }
167 + }
168 + }
169 +
170 + // const id = result['id'];
171 + // const place_id =result['place_id'];
172 + // const name = result['name'];
173 + // const address = result['vicinity'];
174 + // let category_big = category1
175 + // const category_small = result.types[0];
176 + // const image = "default"
177 + // const rating = result.rating;
178 + // const lng = result.geometry.viewport.ea.j;
179 + // const lat =result.geometry.viewport.la.j;
180 +
181 + setTimeout(function(){
182 + for (var i = 0; i < result_entertainment.length; i++) {
183 + entName = result_entertainment[i][name];
184 + entType = "result_entertainment[i][types];"
185 +
186 + var tmp = '<div class="col-xl-6 col-sm-6 mb-3">' +
187 + '<div class="card text-white bg-light o-hidden h-100">' +
188 + '<div class="card-body"' + ' style="height:350px; background-image:url(' + "'entertainment.jpg'" + '); background-size: 100% 100%; background-repeat: no-repeat;">' + // place photo
189 + '<div class="mr-5" id="nameDiv">'+entName+'</div>'+ // place name
190 + '<div class="mr-5" id="typeDiv">'+entType+'</div>'+ // place type
191 + '</div>' +
192 + '</div>' +
193 + '</div>';
194 + card+=tmp;
195 + }
196 + }, 5000);
197 +
198 + document.getElementById("cardBody").innerHTML = card;
92 199
93 - <!-- Icon Cards--> 200 + </script>
94 - <div class="row">
95 - <div class="col-xl-3 col-sm-6 mb-3">
96 - <div class="card text-white bg-primary o-hidden h-100">
97 - <div class="card-body">
98 - <div class="card-body-icon">
99 - <i class="fas fa-fw fa-comments"></i>
100 - </div>
101 - <div class="mr-5">26 New Messages!</div>
102 - </div>
103 - <a class="card-footer text-white clearfix small z-1" href="#">
104 - <span class="float-left">View Details</span>
105 - <span class="float-right">
106 - <i class="fas fa-angle-right"></i>
107 - </span>
108 - </a>
109 - </div>
110 - </div>
111 - <div class="col-xl-3 col-sm-6 mb-3">
112 - <div class="card text-white bg-warning o-hidden h-100">
113 - <div class="card-body">
114 - <div class="card-body-icon">
115 - <i class="fas fa-fw fa-list"></i>
116 - </div>
117 - <div class="mr-5">11 New Tasks!</div>
118 - </div>
119 - <a class="card-footer text-white clearfix small z-1" href="#">
120 - <span class="float-left">View Details</span>
121 - <span class="float-right">
122 - <i class="fas fa-angle-right"></i>
123 - </span>
124 - </a>
125 - </div>
126 - </div>
127 - <div class="col-xl-3 col-sm-6 mb-3">
128 - <div class="card text-white bg-success o-hidden h-100">
129 - <div class="card-body">
130 - <div class="card-body-icon">
131 - <i class="fas fa-fw fa-shopping-cart"></i>
132 - </div>
133 - <div class="mr-5">123 New Orders!</div>
134 - </div>
135 - <a class="card-footer text-white clearfix small z-1" href="#">
136 - <span class="float-left">View Details</span>
137 - <span class="float-right">
138 - <i class="fas fa-angle-right"></i>
139 - </span>
140 - </a>
141 - </div>
142 - </div>
143 - <div class="col-xl-3 col-sm-6 mb-3">
144 - <div class="card text-white bg-danger o-hidden h-100">
145 - <div class="card-body">
146 - <div class="card-body-icon">
147 - <i class="fas fa-fw fa-life-ring"></i>
148 - </div>
149 - <div class="mr-5">13 New Tickets!</div>
150 - </div>
151 - <a class="card-footer text-white clearfix small z-1" href="#">
152 - <span class="float-left">View Details</span>
153 - <span class="float-right">
154 - <i class="fas fa-angle-right"></i>
155 - </span>
156 - </a>
157 - </div>
158 - </div>
159 - </div>
160 201
161 - <p class="small text-center text-muted my-5"> 202 + <div id="map"></div>
162 - <em>More chart examples coming soon...</em> 203 + <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDg4CkUEEt_96n1ork1nL5t4E_SpdKrgMI&libraries=places&callback=initMap"
163 - </p> 204 + async defer></script>
164 205
165 </div> 206 </div>
166 <!-- /.container-fluid --> 207 <!-- /.container-fluid -->
...@@ -205,6 +246,6 @@ ...@@ -205,6 +246,6 @@
205 <script src="js/demo/chart-bar-demo.js"></script> 246 <script src="js/demo/chart-bar-demo.js"></script>
206 <script src="js/demo/chart-pie-demo.js"></script> 247 <script src="js/demo/chart-pie-demo.js"></script>
207 248
208 - </body> 249 +</body>
209 250
210 </html> 251 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -23,6 +23,8 @@ ...@@ -23,6 +23,8 @@
23 <!-- Custom styles for this template--> 23 <!-- Custom styles for this template-->
24 <link href="css/sb-admin.css" rel="stylesheet"> 24 <link href="css/sb-admin.css" rel="stylesheet">
25 25
26 + <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&amp;subset=korean" rel="stylesheet">
27 +
26 </head> 28 </head>
27 29
28 <body id="page-top"> 30 <body id="page-top">
......
1 +var entName = '';
2 +var entType = '';
3 +var entPhoto = '';
4 +var card = '';
5 +
1 function initMap() { 6 function initMap() {
2 // Try HTML5 geolocation. 7 // Try HTML5 geolocation.
3 if (navigator.geolocation) { 8 if (navigator.geolocation) {
...@@ -17,28 +22,28 @@ function initMap() { ...@@ -17,28 +22,28 @@ function initMap() {
17 } 22 }
18 } 23 }
19 24
20 -function searchPlace(str, placeType) { 25 +async function searchPlace(str, placeType) {
21 switch(placeType) { 26 switch(placeType) {
22 case 'food': 27 case 'food':
23 service.nearbySearch({ 28 service.nearbySearch({
24 location: pos, 29 location: pos,
25 radius: 500, 30 radius: 500,
26 type: [str] 31 type: [str]
27 - }, callback_foods); 32 + }, await callback_foods);
28 break; 33 break;
29 case 'entertainment': 34 case 'entertainment':
30 service.nearbySearch({ 35 service.nearbySearch({
31 location: pos, 36 location: pos,
32 radius: 500, 37 radius: 500,
33 type: [str] 38 type: [str]
34 - }, callback_entertainment); 39 + }, await callback_entertainment);
35 break; 40 break;
36 case 'room': 41 case 'room':
37 service.nearbySearch({ 42 service.nearbySearch({
38 location: pos, 43 location: pos,
39 radius: 500, 44 radius: 500,
40 type: [str] 45 type: [str]
41 - }, callback_rooms); 46 + }, await callback_rooms);
42 break; 47 break;
43 default: 48 default:
44 break; 49 break;
...@@ -48,6 +53,7 @@ function searchPlace(str, placeType) { ...@@ -48,6 +53,7 @@ function searchPlace(str, placeType) {
48 function callback_entertainment(results, status) { 53 function callback_entertainment(results, status) {
49 if (status === google.maps.places.PlacesServiceStatus.OK) { 54 if (status === google.maps.places.PlacesServiceStatus.OK) {
50 for (var i = 0; i < results.length; i++) { 55 for (var i = 0; i < results.length; i++) {
56 + console.log(results[i]);
51 result_entertainment.push(result[i]) 57 result_entertainment.push(result[i])
52 } 58 }
53 } 59 }
...@@ -62,4 +68,29 @@ function callback_entertainment(results, status) { ...@@ -62,4 +68,29 @@ function callback_entertainment(results, status) {
62 // const image = "default" 68 // const image = "default"
63 // const rating = result.rating; 69 // const rating = result.rating;
64 // const lng = result.geometry.viewport.ea.j; 70 // const lng = result.geometry.viewport.ea.j;
65 - const lat =result.geometry.viewport.la.j; 71 + // const lat =result.geometry.viewport.la.j;
72 +
73 +
74 +for(var i=0; i<entList.size(); i++){
75 + entName = result_entertainment[i][name];
76 + entType = result_entertainment[i][category];
77 + // if(result_entertainment[i][photo]==undefined){
78 + // entPhoto = "noimage.png";
79 + // }
80 + // else{
81 + // entPhoto = entList[i][photo];
82 + }
83 +
84 + var tmp = '<div class="col-xl-6 col-sm-6 mb-3">'+
85 + '<div class="card text-white bg-light o-hidden h-100">'+
86 + '<div class="card-body"' + ' style="height:350px; background-image:url(' + "'2.jpg'" + '); background-size: 100% 100%; background-repeat: no-repeat;">' + // place photo
87 + // '<div class="mr-5" id="nameDiv">'+entName+'</div>'+ // place name
88 + // '<div class="mr-5" id="typeDiv">'+entType+'</div>'+ // place type
89 + '<div class="mr-5" id="nameDiv">가게이름</div>'+ // place name
90 + '<div class="mr-5" id="typeDiv">타입</div>'+ // place type
91 + '</div>'+
92 + '</div>'+
93 + '</div>';
94 + //card+=tmp;
95 +
96 +document.getElementById("cardBody").innerHTML=tmp;
...\ No newline at end of file ...\ No newline at end of file
......