-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
169 lines (146 loc) · 9.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<title>해수욕장 </title>
<link rel="stylesheet" href="search_button.scss">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=04c3ceb47c6f2051a73fd25ba1c4cf01"></script>
<script type="text/javascript" src="beach_data.js"></script>
<script type="text/javascript" src="beach_data_code.js"></script>
<style>
input:focus {outline: 2px solid #d50000;}
input:focus {outline: none;}
.customoverlay {position:relative;bottom:0px;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;float:left;}
.customoverlay:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888;}
.customoverlay a {display:block;text-decoration:none;color:#000;text-align:center;border-radius:6px;font-size:10px;font-weight:bold;overflow:hidden;background: #d95050;background: #d95050 url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 14px center;}
.customoverlay .title {display:block;text-align:center;background:#fff;margin-right:35px;padding:10px 15px;font-size:11px;font-weight:bold;}
.customoverlay:after {content:'';position:absolute;margin-left:-12px;left:50%;bottom:-12px;width:22px;height:12px;background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}
input:focus {outline: 2px solid #d50000;}
input:focus {outline: none;}
.customoverlay2 {position:relative;bottom:0px;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;float:left;}
.customoverlay2:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888; background-color: #fffff3;}
</style>
</head>
<body>
<div onclick="history.back();" class="page_cover"></div>
<div id="menu">
<div onclick="history.back();" class="close"></div>
<br>
<div style="margin-bottom: 15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
</svg>
<a href="index.html" style="color: black;text-decoration: none;">Home</a>
</div>
<div style="margin-bottom: 15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people" viewBox="0 0 16 16">
<path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
</svg>
<a href="about.html" style="color: black;text-decoration: none;">About</a>
</div>
<div style="margin-bottom: 15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-text" viewBox="0 0 16 16">
<path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
<path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
</svg>
<a href="notice.html" style="color: black;text-decoration: none;">Notice</a>
</div>
</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded-pill position-absolute top-0 start-50 translate-middle-x mt-2" style="position: fixed; z-index: 1; width:93%; ">
<div class="search-container" style="width: 85%;float: left;margin-top: 2px;">
<input class="search-bar container" id="search_box" style="border: 0;" placeholder="해수욕장 검색" type="text" />
<div class="suggestions-cap container"></div>
<div class="suggestions-container container col-9" style="display: none;">
<div class="suggestions-list"></div>
</div>
</div>
<div class="menu-btn" style="margin-right: 10px; float: right;"></div>
</div>
<div id="map" style="width:100%; height:100vh; z-index: 0;"></div>
<script>
$(".menu-btn").click(function () {
$("#menu,.page_cover,html").addClass("open"); // 메뉴 버튼을 눌렀을때 메뉴, 커버, html에 open 클래스를 추가해서 효과를 준다.
window.location.hash = "#open"; // 페이지가 이동한것 처럼 URL 뒤에 #를 추가해 준다.
});
window.onhashchange = function () {
if (location.hash != "#open") { // URL에 #가 있을 경우 아래 명령을 실행한다.
$("#menu,.page_cover,html").removeClass("open"); // open 클래스를 지워 원래대로 돌린다.
}
};
</script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.80433333333333 , 128.90983055555557), // 지도의 중심좌표
level: 4, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 해수욕장 마커
const positions=beachInfo();
for (let i = 0; i < positions.length; i ++) {
if(String(positions[i].title)!="undefined"){
var infowindow = new kakao.maps.CustomOverlay({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됨
content : '<div class="customoverlay"><a href="beach_info.html?num='+String(positions[i].num)+'" ><span class="title">'+positions[i].title+'</span></a></div>' // 인포윈도우에 표시할 내용
});
}
}
let rip_current_url = "http://www.khoa.go.kr/api/oceangrid/ripCurrentRecent/search.do?ServiceKey=J17oJtuWp5DrMImonXgIsw==&ResultType=json";
fetch(rip_current_url)
.then(res => res.json())
.then(toJson => {
let ripArray=toJson.result.data;
for(var i=0; i<ripArray.length; i++){
var infowindow = new kakao.maps.CustomOverlay({
map: map,
title: ripArray[i].beach_name,
position: new kakao.maps.LatLng( ripArray[i].lat , ripArray[i].lon ),
content: '<div class="customoverlay2"><img style="float:left" src="warning.png" width="30"><h5 class="title container fw-bold">이안류 주의</h5><p class="title container " style="text-align:center;">이안류 지수: '+ripArray[i].score_msg+'</p></div>'
});
}
})
let searchInput = document.querySelector('#search_box');
let filteredList = document.querySelector('.suggestions-list');
let resultContainer = document.querySelector(".suggestions-container");
const accountArray = beachData1();
const searchFunc = (objId) => {
searchId = searchInput.value;
return objId.indexOf(searchId) !== -1;
}
const showFilteredAccount = (account) => {
const containerCap = document.querySelector(".suggestions-container");
containerCap.style.display = "block";
const filteredOne = document.createElement("div");
filteredOne.innerHTML = `<div class="suggest-container container col-12", style="margin-top:10px;">
<a style="text-decoration: none; color: black;"href="beach_info.html?num=${account.num}">${account.title}</a>
<hr style="margin-bottom:1px">
</div>`;
filteredList.append(filteredOne);
};
searchInput.addEventListener("keyup", () => {
console.log("on")
// 초기화
filteredList.innerHTML = "";
// input 값이 있다면,
if (searchInput.value) {
const filteredAccount = accountArray.filter((x) => searchFunc(x.title));
// filteredAccout 배열이 있다면,
if (filteredAccount) {
filteredAccount.forEach((acc) => showFilteredAccount(acc));
}
}
});
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</body>
</html>