Toggle navigation
Toggle navigation
This project
Loading...
Sign in
이유제
/
CultureGallery
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
YujeLee
2020-12-10 00:24:03 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
1202fbf508ccca711c1b5ffdeb459258426e7d01
1202fbf5
1 parent
11f9a22c
map table 생성
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
45 additions
and
23 deletions
public/stylesheets/main_style.css
public/stylesheets/mapPage_style.css
routes/mapPage.ejs
public/stylesheets/main_style.css
View file @
1202fbf
...
...
@@ -160,10 +160,9 @@ header
.welcome
{
position
:
absolute
;
top
:
50%
;
top
:
20vh
;
left
:
50%
;
width
:
700px
;
height
:
160px
;
margin-top
:
-80px
;
margin-left
:
-350px
;
text-align
:
center
;
font-family
:
sans-serif
;
...
...
public/stylesheets/mapPage_style.css
View file @
1202fbf
...
...
@@ -7,7 +7,7 @@
font-family
:
'Poppins'
,
sans-serif
;
}
body
{
background-color
:
#
212620
;
background-color
:
#
fff
;
}
.nav-bar
{
...
...
@@ -52,14 +52,12 @@ body{
position
:
absolute
;
font-size
:
30px
;
width
:
100%
;
top
:
20%
;
left
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
height
:
50px
;
margin-top
:
40px
;
text-align
:
center
;
font-family
:
sans-serif
;
color
:
#
fff
;
color
:
#
000
;
}
.map-box
{
width
:
100%
...
...
routes/mapPage.ejs
View file @
1202fbf
...
...
@@ -20,25 +20,42 @@
<li><a
href=
""
>
Contact
</a></li>
</ul>
</div>
<div
class=
"welcome"
>
<h1>
당신 주위에서 열릴 공연들입니다
</h1>
</div>
</header>
<div
class=
"map-box"
>
<div
id=
"map"
style=
"
position: absolute;
border-radius: 5%;
width:500px; height:350px;
top:50%;
left: 30%;
"
></div>
</div>
<div
class=
"empty-box"
>
<div
class=
"welcome"
>
<h1>
당신 주위에서 열릴 공연들입니다
</h1>
</div>
<div
class=
"map-box"
>
<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
style=
"position:absolute; top: 110vh; color: #000;"
>
<h2
>
주변 공연
</h2>
</div>
</div>
<table
style=
"position: absolute; top: 120vh;"
>
<tr>
<th>
id
</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
),
// 지도의 중심좌표
...
...
@@ -76,8 +93,16 @@ if (navigator.geolocation) {
displayShowMarker
(
locP
,
message
);
console
.
log
(
"near_show:"
+
data
[
i
]);
var
row
=
`<tr>
<td>
${
data
[
i
][
0
]}
</td>
<td>
${
data
[
i
][
1
]}
</td>
<td>
${
data
[
i
][
2
]}
</td>
</tr>`
dataContainer
.
innerHTML
+=
row
;
}
}
}
// 마커와 인포윈도우를 표시합니다
...
...
Please
register
or
login
to post a comment