김동훈 / 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
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
......@@ -23,9 +23,11 @@
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<link href="https://fonts.googleapis.com/css?family=Do+Hyeon&amp;subset=korean" rel="stylesheet">
<body id="page-top">
</head>
<body id="page-top">
<nav class="navbar navbar-expand navbar-dark bg-dark static-top">
......@@ -51,7 +53,7 @@
<li class="nav-item">
<a class="nav-link" href="Foods.html">
<i class="fas fa-utensils" area-hidden ="true"></i>
<i class="fas fa-utensils" area-hidden="true"></i>
<span>Foods</span>
</a>
</li>
......@@ -84,83 +86,122 @@
</ol>
<!-- Icon Cards-->
<div class="row" id="cardBody">
</div>
<!-- <script>
var result_entertainment = []
</script> -->
<script>
var result_entertainment = []
</script>
<script type="text/javascript" src="/js/showEnt.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDg4CkUEEt_96n1ork1nL5t4E_SpdKrgMI&libraries=places&callback=initMap" async defer></script>
var entName = '';
var entType = '';
var card = '';
var map;
var service;
function initMap() {
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map = new google.maps.Map(document.getElementById('map'), {
center: pos,
zoom: 17
});
map.setCenter(pos);
service = new google.maps.places.PlacesService(map);
searchPlace('department_store', 'entertainment');
searchPlace('movie_theater', 'entertainment');
searchPlace('museum', 'entertainment');
searchPlace('night_club', 'entertainment');
searchPlace('shopping_mall', 'entertainment');
searchPlace('zoo', 'entertainment');
});
}
}
async function searchPlace(str, placeType) {
switch (placeType) {
case 'food':
service.nearbySearch({
location: pos,
radius: 500,
type: [str]
}, await callback_foods);
break;
case 'entertainment':
service.nearbySearch({
location: pos,
radius: 500,
type: [str]
}, await callback_entertainment);
break;
case 'room':
service.nearbySearch({
location: pos,
radius: 500,
type: [str]
}, await callback_rooms);
break;
default:
break;
}
}
function callback_entertainment(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
console.log(results[i]);
result_entertainment.push(results[i])
}
}
}
// const id = result['id'];
// const place_id =result['place_id'];
// const name = result['name'];
// const address = result['vicinity'];
// let category_big = category1
// const category_small = result.types[0];
// const image = "default"
// const rating = result.rating;
// const lng = result.geometry.viewport.ea.j;
// const lat =result.geometry.viewport.la.j;
setTimeout(function(){
for (var i = 0; i < result_entertainment.length; i++) {
entName = result_entertainment[i][name];
entType = "result_entertainment[i][types];"
var tmp = '<div class="col-xl-6 col-sm-6 mb-3">' +
'<div class="card text-white bg-light o-hidden h-100">' +
'<div class="card-body"' + ' style="height:350px; background-image:url(' + "'entertainment.jpg'" + '); background-size: 100% 100%; background-repeat: no-repeat;">' + // place photo
'<div class="mr-5" id="nameDiv">'+entName+'</div>'+ // place name
'<div class="mr-5" id="typeDiv">'+entType+'</div>'+ // place type
'</div>' +
'</div>' +
'</div>';
card+=tmp;
}
}, 5000);
document.getElementById("cardBody").innerHTML = card;
<!-- Icon Cards-->
<div class="row">
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-primary o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-fw fa-comments"></i>
</div>
<div class="mr-5">26 New Messages!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fas fa-angle-right"></i>
</span>
</a>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-warning o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-fw fa-list"></i>
</div>
<div class="mr-5">11 New Tasks!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fas fa-angle-right"></i>
</span>
</a>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-success o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-fw fa-shopping-cart"></i>
</div>
<div class="mr-5">123 New Orders!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fas fa-angle-right"></i>
</span>
</a>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-danger o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-fw fa-life-ring"></i>
</div>
<div class="mr-5">13 New Tickets!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fas fa-angle-right"></i>
</span>
</a>
</div>
</div>
</div>
</script>
<p class="small text-center text-muted my-5">
<em>More chart examples coming soon...</em>
</p>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDg4CkUEEt_96n1ork1nL5t4E_SpdKrgMI&libraries=places&callback=initMap"
async defer></script>
</div>
<!-- /.container-fluid -->
......@@ -205,6 +246,6 @@
<script src="js/demo/chart-bar-demo.js"></script>
<script src="js/demo/chart-pie-demo.js"></script>
</body>
</body>
</html>
\ No newline at end of file
......
......@@ -23,6 +23,8 @@
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Do+Hyeon&amp;subset=korean" rel="stylesheet">
</head>
<body id="page-top">
......
var entName = '';
var entType = '';
var entPhoto = '';
var card = '';
function initMap() {
// Try HTML5 geolocation.
if (navigator.geolocation) {
......@@ -17,28 +22,28 @@ function initMap() {
}
}
function searchPlace(str, placeType) {
async function searchPlace(str, placeType) {
switch(placeType) {
case 'food':
service.nearbySearch({
location: pos,
radius: 500,
type: [str]
}, callback_foods);
}, await callback_foods);
break;
case 'entertainment':
service.nearbySearch({
location: pos,
radius: 500,
type: [str]
}, callback_entertainment);
}, await callback_entertainment);
break;
case 'room':
service.nearbySearch({
location: pos,
radius: 500,
type: [str]
}, callback_rooms);
}, await callback_rooms);
break;
default:
break;
......@@ -48,6 +53,7 @@ function searchPlace(str, placeType) {
function callback_entertainment(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
console.log(results[i]);
result_entertainment.push(result[i])
}
}
......@@ -62,4 +68,29 @@ function callback_entertainment(results, status) {
// const image = "default"
// const rating = result.rating;
// const lng = result.geometry.viewport.ea.j;
const lat =result.geometry.viewport.la.j;
// const lat =result.geometry.viewport.la.j;
for(var i=0; i<entList.size(); i++){
entName = result_entertainment[i][name];
entType = result_entertainment[i][category];
// if(result_entertainment[i][photo]==undefined){
// entPhoto = "noimage.png";
// }
// else{
// entPhoto = entList[i][photo];
}
var tmp = '<div class="col-xl-6 col-sm-6 mb-3">'+
'<div class="card text-white bg-light o-hidden h-100">'+
'<div class="card-body"' + ' style="height:350px; background-image:url(' + "'2.jpg'" + '); background-size: 100% 100%; background-repeat: no-repeat;">' + // place photo
// '<div class="mr-5" id="nameDiv">'+entName+'</div>'+ // place name
// '<div class="mr-5" id="typeDiv">'+entType+'</div>'+ // place type
'<div class="mr-5" id="nameDiv">가게이름</div>'+ // place name
'<div class="mr-5" id="typeDiv">타입</div>'+ // place type
'</div>'+
'</div>'+
'</div>';
//card+=tmp;
document.getElementById("cardBody").innerHTML=tmp;
\ No newline at end of file
......