-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
202 lines (172 loc) · 8.45 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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>c4k.together</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
div.t4left {
width: 30%;
float: left;
box-sizing: border-box;
}
div.t4right {
width: 70%;
height: 800px;
float: right;
box-sizing: border-box;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg" style="background-color: #490841;">
<a class="navbar-brand" href="http://codefor.kr" target="new">Code for Korea</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<div id="info_area">
<div id="list" class="t4left">
<h4>설치 위치 목록</h4>
<table class="table">
<thead>
<tr>
<th scope="col">주소</th>
<th scope="col">상태</th>
</tr>
</thead>
<tbody id="list_body">
</tbody>
</table>
</div>
<div id="map_group" class="t4right" style="background-color: orange;">
<div id="map" style="width:100%;height:90%; background-color: gray;"></div>
<div id="mapInfo"></div>
</div>
</div>
<br><br><br>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=07d2c3a356d8de5c9e3b858db0aded78&libraries=services,clusterer,drawing"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.7/firebase-app.js";
import { collection, addDoc, getFirestore, getDocs } from "https://www.gstatic.com/firebasejs/9.6.7/firebase-firestore.js";
import { getStorage } from "https://www.gstatic.com/firebasejs/9.6.7/firebase-storage.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyDGPUHbbaAwk5Sug_NEO7x3b4sCDGbeRxE",
authDomain: "together-map.firebaseapp.com",
projectId: "together-map",
storageBucket: "together-map.appspot.com",
messagingSenderId: "237459537822",
appId: "1:237459537822:web:6ecbacf2d232896256608f"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore();
const storage = getStorage(app);
var all_pois = [];
// 마커 이미지의 이미지 주소입니다
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// DB 읽기
const querySnapshot = await getDocs(collection(db, "ramp_yangcheon"));
querySnapshot.forEach((doc) => {
const poi = doc.data();
const title = poi.title;
const address = poi.address;
const lat = poi.lat;
const lon = poi.lon;
let state = '신청';
if (poi.state === 1)
state = '완료'
$("#list_body").append(`<tr><td>${address}</td><td>${state}</td></tr>`);
var item = {
title : title,
address : address,
state : state,
lat : lat,
lon : lon
}
all_pois.push(item);
});
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(37.53005936200752, 126.85655618649268),
level: 6
};
var map = new kakao.maps.Map(container, options);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new kakao.maps.MapTypeControl();
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
// 지도가 확대 또는 축소되면 마지막 파라미터로 넘어온 함수를 호출하도록 이벤트를 등록합니다
kakao.maps.event.addListener(map, 'zoom_changed', updateMapInfo);
kakao.maps.event.addListener(map, 'center_changed', updateMapInfo)
var mapInfo = document.getElementById('mapInfo');
function updateMapInfo() {
geocoder.coord2Address(map.getCenter().getLng(), map.getCenter().getLat(), getAddress);
}
function showMapInfo(address) {
// 지도의 현재 중심좌표를 얻어옵니다
var center = map.getCenter();
// 지도의 현재 레벨을 얻어옵니다
var level = map.getLevel();
var message = '중심좌표(위도,경도) = [ ' + center.getLat() + ', ' + center.getLng() + ' ]<br>';
message += '주소 = ' + address;
mapInfo.innerHTML = message;
}
//geocoding callback
function getAddress(result, status) {
var address = '';
if (status === kakao.maps.services.Status.OK) {
for(var i = 0; i < result.length; i++) {
// 행정동의 region_type 값은 'H' 이므로
address += result[i].address.address_name;
}
}
showMapInfo(address);
}
all_pois.forEach((poi) => {
var coords = new daum.maps.LatLng(poi.lat, poi.lon);
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: coords
});
marker.setMap(map);
var iwContent = `<div style="padding:5px;">${poi.title}</div>`, // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);
});
});
</script>
</body>
</html>