mapPage.ejs
8.26 KB
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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html>
<head>
<title>
<script>title</script>
</title>
<link rel="stylesheet" href='/stylesheets/mapPage_style.css' type="text/css">
<link rel="shortcut icon" href="/images/favicon.ico">
<link rel="icon" href="/images/favicon.ico">
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
Kakao.init('0678e32dab56db1c52ac63ab4ccb7663')
function sendLink(id) {
var data = [];
var strData = "<%= data %>";
var splitData = strData.split(',');
for (var i = 0; i < splitData.length; i += 5) {
data.push([Number(splitData[i]), splitData[i + 1], Number(splitData[i + 2]), Number(splitData[i + 3]), splitData[i + 4], splitData[i + 5]]);
}
var index;
for (var i = 0; i < data.length; i++) {
console.log(data.length);
if (data[i][0] === id) {
index = i;
Kakao.Link.sendDefault({
objectType: 'location',
address: `${data[i][5]}`,
addressTitle: `${data[i][1]}`,
content: {
title: `공연 이름: ${data[i][1]}\n공연 위치: ${data[i][5]}`,
description: `${splitData[i + 2]}`,
imageUrl: 'https://ifh.cc/g/aEvr86.png',
link: {
mobileWebUrl: 'http://naver.com',
webUrl: 'http://naver.com',
},
},
buttons: [
{
title: 'Culture Gallery',
link: {
mobileWebUrl: 'http://naver.com',
webUrl: 'http://naver.com',
},
},
],
})
}
}
}
</script>
</head>
<body>
<header>
<div class="nav-bar">
<img src="../images/icon.png" alt="" class="logo">
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Testimonimal</a></li>
<li><a href="">Career</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</header>
<div class="welcome">
<h1>당신 주위에서 열릴 공연들입니다</h1>
</div>
<div class="box1">
<div id="map" style="
position: absolute;
border-radius: 5%;
width:500px; height:60vh;
top:40vh;
left: 50%;
margin-left:-250px;
margin-top:-30x;
"></div>
</div>
<div>
<div style="position:absolute; top: 110vh; width:100%; color: #000;">
<h2 style="text-align:center;"> 찾은 공연 </h2>
</div>
<table class="table">
<tr>
<th>id</th>
<th>행사 이름</th>
<th>시작 날짜</th>
<th>주소</th>
<th>이동하기</th>
</tr>
<tbody id="map-data">
</tbody>
</table>
</div>
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script>
<script>
var dataContainer = document.getElementById('map-data');
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 10 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;">내 위치</div>'; // 인포윈도우에 표시될 내용입니다
displayMarker(locPosition, message);
function funcA() {
alert("hi");
}
var data = [];
var strData = "<%= data %>";
var splitData = strData.split(',');
for (var i = 0; i < splitData.length; i += 5) {
data.push([Number(splitData[i]), splitData[i + 1], Number(splitData[i + 2]), Number(splitData[i + 3]), splitData[i + 4], splitData[i + 5]]);
}
for (var i = 0; i < data.length; i++) {
var latgap = (lat - data[i][2]) * 110;
var longap = (lon - data[i][3]) * 91;
var cal = latgap * latgap + longap * longap;
if (cal <= 1600) {
var locP = new kakao.maps.LatLng(data[i][2], data[i][3]),
message = `${data[i][0]} : ${data[i][1]}`;
displayShowMarker(locP, message);
var row = `<tr>
<td> ${data[i][0]}</td>
<td> ${data[i][1]}</td>
<td> ${data[i][4]}</td>
<td> ${data[i][5]}</td>
<td> <input type="button" onclick="sendLink(${data[i][0]})" value="전송하기"> </td>
</tr>`
dataContainer.innerHTML += row;
}
}
//
// 마커와 인포윈도우를 표시합니다
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'
displayMarker(locPosition, message);
}
function displayShowMarker(locPosition, message) {
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
var marker = new kakao.maps.Marker({
map: map,
position: locPosition,
title: message,
image: markerImage
});
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map,
position: locPosition
});
var iwContent = message, // 인포윈도우에 표시할 내용
iwRemoveable = true;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: iwContent,
removable: iwRemoveable
});
// 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
</script>
<div style="position:absolute; top:200vh"> _ </div>
</body>
</html>