김태민 / OpenSource_Project

Go to a project
Toggle navigation Toggle navigation pinning
김민석
8bbdd881 1 parent 999f57a4

지도부분 추가

Expand all
Inline Side-by-side
Showing 9 changed files with 796 additions and 177 deletions
......@@ -18,9 +18,9 @@ app.get(['/food', '/food/:id'], function(req, res) {
var id = req.params.id;
if (id) {
if (id == 'search') {
res.render('search.ejs', {
res.render('map.ejs', {
title: 'Searching',
description: 'You can search for food here.'
searching: '경희대학교 국제캠퍼스'
});
} else if (id == 'recommendation') {
res.render('recommendation.ejs', {
......@@ -38,8 +38,12 @@ app.get(['/food', '/food/:id'], function(req, res) {
//사용자가 호출한 search page
app.post('/food/search', function(req, res) {
var title=req.body.title;
res.redirect("https://www.google.com/search?q="+title+"&oq="+title+"&aqs=chrome..69i57j0l3j69i60j69i61.3149j0j9&sourceid=chrome&ie=UTF-8")
var title = req.body.title;
res.render('map.ejs', {
title: 'Search',
searching: title
});
// res.redirect("https://www.google.com/search?q=" + title + "&oq=" + title + "&aqs=chrome..69i57j0l3j69i60j69i61.3149j0j9&sourceid=chrome&ie=UTF-8")
})
//사용자가 호출한 recommendation page
......@@ -54,25 +58,66 @@ app.post('/food/recommendation', function(req, res) {
var shape = req.body.shape;
var kinds = req.body.kinds;
var rand = Math.floor(Math.random() * 3); //(Math.random() * (max - min)) + min
var i = 0;
if (!Array.isArray(shape) && shape) {
var shape = [];
shape.push(req.body.shape);
}
if (!Array.isArray(kinds) && kinds) {
var kinds = [];
kinds.push(req.body.kinds);
}
var set1 = new Set();
var set2 = new Set();
var set3 = new Set();
function add(users, price, shape, kinds, callback) {
for (var foods in users) {
if (rand == i) {
var food_value=foods;
// $('<li>').text(foods).appendTo('#users');
if (shape) {
for (var i = 0; i < shape.length; i++) {
if (users[foods]['shape'] == shape[i]) {
set1.add(foods);
}
}
} else {
set1.add(foods);
}
if (kinds) {
for (var j = 0; j < kinds.length; j++) {
if (users[foods]['kinds'] == kinds[j]) {
set2.add(foods);
}
}
} else {
set2.add(foods);
}
if (!price || (price && users[foods]['price'] <= Number(price) + 5000 && users[foods]['price'] >= Number(price) - 5000)) {
set3.add(foods);
}
i++;
}
callback(set1, set2, set3);
}
add(users, price, shape, kinds, function(set1, set2, set3) {
let difference1 = new Set([...set1].filter(i => set2.has(i)));
let difference2 = new Set([...difference1].filter(i => set3.has(i)));
var food = [...difference2];
var length = food.length;
console.log('food 목록: '+food);
console.log('food 갯수: '+length);
var rand = Math.floor(Math.random() * length); //(Math.random() * (max - min)) + min
var food_value = food[rand];
console.log('랜덤 food 번호: '+rand);
res.render('print.ejs', {
title: 'Recommendation',
description: 'We recommend this...',
// name: users,
randvalue: food_value
});
}); //rander closed
}); //add closed
}
});
})
}); //readFile closed
}); //post closed
app.listen(3000, function() {
console.log('Connected, 3000');
......
{
"바게뜨":{
"짜장면": {
"price": 5000,
"shape": "면",
"kinds": "중식"
},
"짬뽕": {
"price": 6000,
"shape": "면",
"kinds": "중식"
},
"우동": {
"price": 6000,
"shape": "면",
"kinds": "중식"
},
"울면": {
"price": 6000,
"shape": "면",
"kinds": "중식"
},
"간짜장": {
"price": 6000,
"shape": "면",
"kinds": "중식"
},
"냉면": {
"price": 6000,
"shape": "면",
"kinds": "중식"
},
"중국냉면": {
"price": 9000,
"shape": "면",
"kinds": "중식"
},
"만두": {
"price": 5000,
"shape": "기타",
"kinds": "중식"
},
"볶음밥": {
"price": 5000,
"shape": "밥",
"kinds": "중식"
},
"짬뽕밥": {
"price": 6000,
"shape": "밥",
"kinds": "중식"
},
"짜장밥": {
"price": 6000,
"shape": "밥",
"kinds": "중식"
},
"잡채밥": {
"price": 7000,
"shape": "밥",
"kinds": "중식"
},
"제육덮밥": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"오징어덮밥": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"오므라이스": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"새우볶음밥": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"김치볶음밥": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"소고기덮밥": {
"price": 8000,
"shape": "밥",
"kinds": "한식"
},
"탕수육": {
"price": 15000,
"shape": "고기",
"kinds": "중식"
},
"깐풍기": {
"price": 20000,
"shape": "빵",
"kinds": "양식"
"shape": "고기",
"kinds": "중식"
},
"난자완스": {
"price": 20000,
"shape": "고기",
"kinds": "중식"
},
"깐쇼새우": {
"price": 20000,
"shape": "고기",
"kinds": "중식"
},
"도시락":{
"초밥": {
"price": 10000,
"shape": "밥",
"kinds": "한식"
"kinds": "일식"
},
"회덮밥": {
"price": 10000,
"shape": "밥",
"kinds": "일식"
},
"스파게티":{
"회": {
"price": 20000,
"shape": "고기",
"kinds": "일식"
},
"라멘": {
"price": 10000,
"shape": "면",
"kinds": "양식"
"kinds": "일식"
},
"돈까스": {
"price": 8000,
"shape": "고기",
"kinds": "일식"
},
"햄버거":{
"순대국밥": {
"price": 6000,
"shape": "밥",
"kinds": "한식"
},
"뼈다귀해장국": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"돼지국밥": {
"price": 6000,
"shape": "밥",
"kinds": "한식"
},
"콩나물국밥": {
"price": 5000,
"shape": "밥",
"kinds": "한식"
},
"굴국밥": {
"price": 6000,
"shape": "밥",
"kinds": "한식"
},
"육개장": {
"price": 8000,
"shape": "밥",
"kinds": "한식"
},
"라면": {
"price": 1000,
"shape": "면",
"kinds": "한식"
},
"순두부찌개": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"김치찌개": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"생선구이": {
"price": 10000,
"shape": "빵",
"shape": "고기",
"kinds": "한식"
},
"된장찌개": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"청국장": {
"price": 8000,
"shape": "밥",
"kinds": "한식"
},
"갈비탕": {
"price": 8000,
"shape": "밥",
"kinds": "한식"
},
"내장탕": {
"price": 8000,
"shape": "밥",
"kinds": "한식"
},
"곰탕": {
"price": 8000,
"shape": "밥",
"kinds": "한식"
},
"부대찌개": {
"price": 8000,
"shape": "밥",
"kinds": "한식"
},
"삼계탕": {
"price": 15000,
"shape": "밥",
"kinds": "한식"
},
"오뎅탕": {
"price": 5000,
"shape": "밥",
"kinds": "한식"
},
"참치마요": {
"price": 4000,
"shape": "밥",
"kinds": "한식"
},
"치킨마요": {
"price": 4000,
"shape": "밥",
"kinds": "한식"
},
"스팸마요": {
"price": 4000,
"shape": "밥",
"kinds": "한식"
},
"떡볶이": {
"price": 5000,
"shape": "밥",
"kinds": "한식"
},
"순대": {
"price": 5000,
"shape": "고기",
"kinds": "한식"
},
"치킨": {
"price": 20000,
"shape": "고기",
"kinds": "양식"
}
}
......
......@@ -88,7 +88,8 @@
<ul class="nav navbar-nav menu_nav justify-content-center">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li>
<li class="nav-item"><a class="nav-link" href="service.html">추천</a>
<li class="nav-item"><a class="nav-link" href="service.html">추천</a></li>
<li class="nav-item"><a class="nav-link" href="blog.html">지도</a>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
......
This diff is collapsed. Click to expand it.
......@@ -38,7 +38,8 @@
<ul class="nav navbar-nav menu_nav justify-content-center">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li> <!-- 나중에 연결 html이름 수정-->
<li class="nav-item"><a class="nav-link" href="service.html">추천</a>
<li class="nav-item"><a class="nav-link" href="service.html">추천</a></li>
<li class="nav-item"><a class="nav-link" href="blog.html">지도</a>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
......
.map_wrap, .map_wrap * {
margin: 0;
padding: 0;
font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;
font-size: 12px;
}
.map_wrap a, .map_wrap a:hover, .map_wrap a:active {
color: #000;
text-decoration: none;
}
.map_wrap {
position: relative;
width: 100%;
height: 500px;
}
#map {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#menu_wrap {
position: absolute;
top: 0;
left:0;
bottom: 0;
width: 250px;
margin: 10px 0 30px 10px;
padding: 5px;
overflow-y: auto;
background: rgba(255, 255, 255, 0.7);
z-index: 1;
font-size: 12px;
border-radius: 10px;
}
.bg_white {
background: #fff;
}
#menu_wrap hr {
display: block;
height: 1px;
border: 0;
border-top: 2px solid #5F5F5F;
margin: 3px 0;
}
#menu_wrap .option {
text-align: center;
}
#menu_wrap .option p {
margin: 10px 0;
}
#menu_wrap .option button {
margin-left: 5px;
}
#placesList li {
list-style: none;
}
#placesList .item {
position: relative;
border-bottom: 1px solid #888;
overflow: hidden;
cursor: pointer;
min-height: 65px;
}
#placesList .item span {
display: block;
margin-top: 4px;
}
#placesList .item h5, #placesList .item .info {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#placesList .item .info {
padding: 10px 0 10px 55px;
}
#placesList .info .gray {
color: #8a8a8a;
}
#placesList .info .jibun {
padding-left: 26px;
background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;
}
#placesList .info .tel {
color: #009900;
}
#placesList .item .markerbg {
float: left;
position: absolute;
width: 36px;
height: 37px;
margin: 10px 0 0 10px;
background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png) no-repeat;
}
#placesList .item .marker_1 {
background-position: 0 -10px;
}
#placesList .item .marker_2 {
background-position: 0 -56px;
}
#placesList .item .marker_3 {
background-position: 0 -102px
}
#placesList .item .marker_4 {
background-position: 0 -148px;
}
#placesList .item .marker_5 {
background-position: 0 -194px;
}
#placesList .item .marker_6 {
background-position: 0 -240px;
}
#placesList .item .marker_7 {
background-position: 0 -286px;
}
#placesList .item .marker_8 {
background-position: 0 -332px;
}
#placesList .item .marker_9 {
background-position: 0 -378px;
}
#placesList .item .marker_10 {
background-position: 0 -423px;
}
#placesList .item .marker_11 {
background-position: 0 -470px;
}
#placesList .item .marker_12 {
background-position: 0 -516px;
}
#placesList .item .marker_13 {
background-position: 0 -562px;
}
#placesList .item .marker_14 {
background-position: 0 -608px;
}
#placesList .item .marker_15 {
background-position: 0 -654px;
}
#pagination {
margin: 10px auto;
text-align: center;
}
#pagination a {
display: inline-block;
margin-right: 10px;
}
#pagination .on {
font-weight: bold;
cursor: default;
color: #777;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="img/favicon.png" type="image/png">
<title>음식 추천 웹사이트 이름</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="vendors/linericon/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="vendors/lightbox/simpleLightbox.css">
<link rel="stylesheet" href="vendors/nice-select/css/nice-select.css">
<link rel="stylesheet" href="vendors/animate-css/animate.css">
<link rel="stylesheet" href="vendors/swiper/css/swiper.min.css">
<!-- main css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<!--================Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container box_1620">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav justify-content-center">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li>
<li class="nav-item"><a class="nav-link" href="service.html">추천</a>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================Header Menu Area =================-->
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="/../style.css">
</head>
<!--================Home Banner Area =================-->
<section class="home_banner_area">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/slider/slider-1.jpg" alt=""> <!-- 여기다가 음식 슬라이더 이미지를 넣자-->
<div class="slider_text_inner">
<div class="container">
<div class="row">
<div class="col-lg-7">
<div class="slider_text">
<h2>음식 추천 설명 <br />사진은 나중에 바꾸자</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide"><img src="img/slider/slider-1.jpg" alt=""> <!-- 여기다가 음식 슬라이더 이미지를 넣자-->
<div class="slider_text_inner">
<div class="container">
<div class="row">
<div class="col-lg-7">
<div class="slider_text">
<h2>음식 추천 설명<br />사진은 나중에 바꾸자</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide"><img src="img/slider/slider-1.jpg" alt=""> <!-- 여기다가 음식 슬라이더 이미지를 넣자-->
<div class="slider_text_inner">
<div class="container">
<div class="row">
<div class="col-lg-7">
<div class="slider_text">
<h2>음식 추천 설명<br />사진은 나중에 바꾸자</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================End Home Banner Area =================-->
<body>
<h1><a href="/food">점심 메뉴 정하기</a></h1>
<!--================ start footer Area =================-->
<footer class="footer-area">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6 class="footer_title">여기는 설명쓰자</h6>
<p>아하하하핳ㅎ</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6 class="footer_title">여기는 바로 메뉴로 이동 쌉가능</h6>
<div class="row">
<div class="col-4">
<ul class="list">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="grid">
<ul>
<il><a href="/food/search">검색</a></il><br>
<il><a href="/food/recommendation">추천</a></il>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="border_line"></div>
<div class="container">
<div class="row footer-bottom d-flex justify-content-between align-items-center">
<p class="col-lg-8 col-md-8 footer-text m-0">
밑에 하고싶은 말 적는곳
</p>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<article class="">
<h2>
<%= title %>
</h2>
<p><%= description %></p>
</article>
</div class="grid">
</body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/stellar.js"></script>
<script src="vendors/lightbox/simpleLightbox.min.js"></script>
<script src="vendors/nice-select/js/jquery.nice-select.min.js"></script>
<script src="vendors/isotope/imagesloaded.pkgd.min.js"></script>
<script src="vendors/isotope/isotope-min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="vendors/counter-up/jquery.waypoints.min.js"></script>
<script src="vendors/counter-up/jquery.counterup.js"></script>
<script src="js/mail-script.js"></script>
<script src="vendors/popup/jquery.magnific-popup.min.js"></script>
<script src="vendors/swiper/js/swiper.min.js"></script>
<script src="js/theme.js"></script>
</body>
</html>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/../map.css">
<!-- <link rel="stylesheet" href="/../style.css"> -->
<title>키워드로 장소검색하고 목록으로 표출하기</title>
</head>
<body>
<h1><a href="/food">점심 메뉴 정하기</a></h1>
<div class="grid">
<ul>
<il><a href="/food/search">검색</a></il><br>
<il><a href="/food/recommendation">추천</a></il>
</ul>
<article>
<h2>
<%= title %>
</h2>
<form action='/food/search' method='post'>
<p>
검색 :
<input type="text" name="title" placeholder="검색">
<input type="submit">
</p>
</form>
</article>
</div class="grid">
<div class="map_wrap">
<div id="map" ></div>
<div id="menu_wrap" class="bg_white">
<div class="option">
<div>
<form onsubmit="searchPlaces(); return false;">
키워드 : <input type="text" value='<%=searching%>' id="keyword" size="15">
<button type="submit">검색하기</button>
</form>
</div>
</div>
<hr>
<ul id="placesList"></ul>
<div id="pagination"></div>
</div>
</div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a8a43eda451b054ac46a281a3db5d536&libraries=services"></script>
<script>
// 마커를 담을 배열입니다
var markers = [];
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 장소 검색 객체를 생성합니다
var ps = new kakao.maps.services.Places();
// 검색 결과 목록이나 마커를 클릭했을 때 장소명을 표출할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
zIndex: 1
});
// 키워드로 장소를 검색합니다
searchPlaces();
// 키워드 검색을 요청하는 함수입니다
function searchPlaces() {
var keyword = document.getElementById('keyword').value;
if (!keyword.replace(/^\s+|\s+$/g, '')) {
alert('키워드를 입력해주세요!');
return false;
}
// 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
ps.keywordSearch(keyword, placesSearchCB);
}
// 장소검색이 완료됐을 때 호출되는 콜백함수 입니다
function placesSearchCB(data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
// 정상적으로 검색이 완료됐으면
// 검색 목록과 마커를 표출합니다
displayPlaces(data);
// 페이지 번호를 표출합니다
displayPagination(pagination);
} else if (status === kakao.maps.services.Status.ZERO_RESULT) {
alert('검색 결과가 존재하지 않습니다.');
return;
} else if (status === kakao.maps.services.Status.ERROR) {
alert('검색 결과 중 오류가 발생했습니다.');
return;
}
}
// 검색 결과 목록과 마커를 표출하는 함수입니다
function displayPlaces(places) {
var listEl = document.getElementById('placesList'),
menuEl = document.getElementById('menu_wrap'),
fragment = document.createDocumentFragment(),
bounds = new kakao.maps.LatLngBounds(),
listStr = '';
// 검색 결과 목록에 추가된 항목들을 제거합니다
removeAllChildNods(listEl);
// 지도에 표시되고 있는 마커를 제거합니다
removeMarker();
for (var i = 0; i < places.length; i++) {
// 마커를 생성하고 지도에 표시합니다
var placePosition = new kakao.maps.LatLng(places[i].y, places[i].x),
marker = addMarker(placePosition, i),
itemEl = getListItem(i, places[i]); // 검색 결과 항목 Element를 생성합니다
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
// LatLngBounds 객체에 좌표를 추가합니다
bounds.extend(placePosition);
// 마커와 검색결과 항목에 mouseover 했을때
// 해당 장소에 인포윈도우에 장소명을 표시합니다
// mouseout 했을 때는 인포윈도우를 닫습니다
(function(marker, title) {
kakao.maps.event.addListener(marker, 'mouseover', function() {
displayInfowindow(marker, title);
});
kakao.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
itemEl.onmouseover = function() {
displayInfowindow(marker, title);
};
itemEl.onmouseout = function() {
infowindow.close();
};
})(marker, places[i].place_name);
fragment.appendChild(itemEl);
}
// 검색결과 항목들을 검색결과 목록 Elemnet에 추가합니다
listEl.appendChild(fragment);
menuEl.scrollTop = 0;
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds);
}
// 검색결과 항목을 Element로 반환하는 함수입니다
function getListItem(index, places) {
var el = document.createElement('li'),
itemStr = '<span class="markerbg marker_' + (index + 1) + '"></span>' +
'<div class="info">' +
' <h5>' + places.place_name + '</h5>';
if (places.road_address_name) {
itemStr += ' <span>' + places.road_address_name + '</span>' +
' <span class="jibun gray">' + places.address_name + '</span>';
} else {
itemStr += ' <span>' + places.address_name + '</span>';
}
itemStr += ' <span class="tel">' + places.phone + '</span>' +
'</div>';
el.innerHTML = itemStr;
el.className = 'item';
return el;
}
// 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
function addMarker(position, idx, title) {
var imageSrc = 'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
imageSize = new kakao.maps.Size(36, 37), // 마커 이미지의 크기
imgOptions = {
spriteSize: new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
spriteOrigin: new kakao.maps.Point(0, (idx * 46) + 10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
},
markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions),
marker = new kakao.maps.Marker({
position: position, // 마커의 위치
image: markerImage
});
marker.setMap(map); // 지도 위에 마커를 표출합니다
markers.push(marker); // 배열에 생성된 마커를 추가합니다
return marker;
}
// 지도 위에 표시되고 있는 마커를 모두 제거합니다
function removeMarker() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}
// 검색결과 목록 하단에 페이지번호를 표시는 함수입니다
function displayPagination(pagination) {
var paginationEl = document.getElementById('pagination'),
fragment = document.createDocumentFragment(),
i;
// 기존에 추가된 페이지번호를 삭제합니다
while (paginationEl.hasChildNodes()) {
paginationEl.removeChild(paginationEl.lastChild);
}
for (i = 1; i <= pagination.last; i++) {
var el = document.createElement('a');
el.href = "#";
el.innerHTML = i;
if (i === pagination.current) {
el.className = 'on';
} else {
el.onclick = (function(i) {
return function() {
pagination.gotoPage(i);
}
})(i);
}
fragment.appendChild(el);
}
paginationEl.appendChild(fragment);
}
// 검색결과 목록 또는 마커를 클릭했을 때 호출되는 함수입니다
// 인포윈도우에 장소명을 표시합니다
function displayInfowindow(marker, title) {
var content = '<div style="padding:5px;z-index:1;">' + title + '</div>';
infowindow.setContent(content);
infowindow.open(map, marker);
}
// 검색결과 목록의 자식 Element를 제거하는 함수입니다
function removeAllChildNods(el) {
while (el.hasChildNodes()) {
el.removeChild(el.lastChild);
}
}
</script>
</body>
</html>
This diff is collapsed. Click to expand it.