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-09 23:31:52 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
11f9a22cb1a264985bfc3cf0c66741c6f53dee14
11f9a22c
1 parent
6264205a
maptest css 수정
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
31 additions
and
20 deletions
public/stylesheets/mapPage_style.css
routes/mapPage.ejs
public/stylesheets/mapPage_style.css
View file @
11f9a22
...
...
@@ -6,7 +6,9 @@
box-sizing
:
border-box
;
font-family
:
'Poppins'
,
sans-serif
;
}
body
{
background-color
:
#212620
;
}
.nav-bar
{
position
:
relative
;
...
...
@@ -48,11 +50,21 @@
.welcome
{
position
:
absolute
;
font-size
:
30px
;
width
:
100%
;
top
:
20%
;
left
:
50%
;
width
:
700px
;
height
:
160px
;
transform
:
translate
(
-50%
,
-50%
);
margin-top
:
40px
;
text-align
:
center
;
font-family
:
sans-serif
;
color
:
#000
;
color
:
#fff
;
}
.map-box
{
width
:
100%
}
.empty-box
{
position
:
absolute
;
bottom
:
0%
;
}
\ No newline at end of file
...
...
routes/mapPage.ejs
View file @
11f9a22
...
...
@@ -21,23 +21,22 @@
</ul>
</div>
<div
class=
"welcome"
>
<h1>
어떤 공연을 찾으시나요?
</h1>
<a
href=
"mappage"
class=
"btn btn1"
>
나의 근처 공연
</a>
<a
href=
"#"
class=
"btn btn2"
>
검색하기
</a>
<a
href=
"login"
class=
"btn btn3"
>
로그인
</a>
<h1>
당신 주위에서 열릴 공연들입니다
</h1>
</div>
</header>
<div
id=
"map"
style=
"
position: absolute;
border-radius: 5%;
width:500px; height:350px;
top:50%;
left: 50%;
"
></div>
<div>
</div>
<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>
<script
type=
"text/javascript"
src=
"//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"
></script>
<script>
var
mapContainer
=
document
.
getElementById
(
'map'
),
// 지도를 표시할 div
...
...
@@ -58,7 +57,7 @@ if (navigator.geolocation) {
lon
=
position
.
coords
.
longitude
;
// 경도
var
locPosition
=
new
kakao
.
maps
.
LatLng
(
lat
,
lon
),
// 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message
=
'<div style="padding:5px;">
여기에 계신가요?!
</div>'
;
// 인포윈도우에 표시될 내용입니다
message
=
'<div style="padding:5px;">
내 위치
</div>'
;
// 인포윈도우에 표시될 내용입니다
displayMarker
(
locPosition
,
message
);
var
data
=
[];
...
...
@@ -84,7 +83,7 @@ if (navigator.geolocation) {
});
}
else
{
// HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var
locPosition
=
new
kakao
.
maps
.
LatLng
(
33.450701
,
126.570667
),
...
...
Please
register
or
login
to post a comment