Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Joung Jiwon
/
OSS-TongGilMut
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
박재윤
2020-11-29 22:24:50 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
96ab698ba58eaea95e4ec4418711e18c792775c6
96ab698b
1 parent
7869ae91
지도와 길찾기 api 연결
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
211 additions
and
62 deletions
project/index.html
project/index.html
View file @
96ab698
...
...
@@ -2,77 +2,93 @@
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
/>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
/>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
/>
<meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
/>
<title>
The Town HTML CSS Template
</title>
<title>
DDuBuk
</title>
<link
rel=
"stylesheet"
href=
"fontawesome-5.5/css/all.min.css"
/>
<link
rel=
"stylesheet"
href=
"slick/slick.css"
>
<link
rel=
"stylesheet"
href=
"slick/slick-theme.css"
>
<link
rel=
"stylesheet"
href=
"magnific-popup/magnific-popup.css"
>
<link
rel=
"stylesheet"
href=
"css/bootstrap.min.css"
/>
<link
rel=
"stylesheet"
href=
"css/templatemo-style.css"
/>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css"
>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css"
>
<script
src=
"../../docs/js/jquery-1.9.1.js"
></script>
<script
type=
"text/javascript"
src=
"../../docs/js/examples-base.js"
></script>
<script
type=
"text/javascript"
src=
"../../docs/js/highlight.min.js"
></script>
<script
type=
"text/javascript"
src=
"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"
></script>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"../../docs/css/examples-base.css"
/>
<!--
The Town
https://templatemo.com/tm-525-the-town
-->
<script
type=
"text/css"
>
window
.
onload
=
function
(){
document
.
getElementById
(
'btn'
).
onclick
=
function
(){
document
.
getElementById
(
'frm'
).
submit
();
return
false
;
};
};
</script>
</head>
<body>
<body>
<!-- Hero section -->
<section
id=
"hero"
class=
"text-white tm-font-big tm-parallax"
>
<video
autoplay
muted
loop
id =
"hero-video"
>
<source
src=
"img/main-video1.mp4"
type=
"video/mp4"
>
</video>
<!-- Navigation -->
<nav
class=
"navbar navbar-expand-md tm-navbar"
id=
"tmNav"
>
<div
class=
"container"
>
<nav
class=
"navbar navbar-expand-md tm-navbar"
id=
"tmNav"
>
<div
class=
"container"
>
<div
class=
"tm-next"
>
<a
href=
"#hero"
class=
"navbar-brand"
>
뚜벅이
</a>
</div>
</div>
</div>
</nav>
<div
class=
"text-center tm-hero-text-container"
>
<div
class=
"tm-hero-text-container-inner"
>
<h2
class=
"tm-hero-title"
>
통학생은 길에서 몇시간을 보냈을까?
</h2>
<p
class=
"tm-hero-subtitle"
>
매일 학교에 통학하시나요?
<br>
뚜벅이님이 지금까지 몇시간을 길에서 보냈는지 보여드립니다.
뚜벅이님이 지금까지 몇
시간을 길에서 보냈는지 보여드립니다.
<br>
-뚜벅이-
</p>
</div>
</div>
</div>
<div
class=
"tm-next tm-intro-next"
>
<a
href=
"#introduction"
class=
"text-center tm-down-arrow-link"
>
<i
class=
"fas fa-3x fa-caret-down tm-down-arrow"
>
계산
해보
기
</i>
<i
class=
"fas fa-3x fa-caret-down tm-down-arrow"
>
계산
하
기
</i>
</a>
</div>
</div>
</section>
<!-- Contact -->
<section
id=
"contact"
class=
"tm-section-pad-top tm-parallax-2"
>
<div
class=
"container tm-container-contact"
>
<div
class=
"container tm-container-contact"
>
<div
class=
"row"
>
<div
class=
"container question-field"
>
<div
class=
"question-text"
>
어디에 사나요?
</div>
<div
class=
"question-input"
>
<label
for=
"question-input-field"
></label>
<input
type =
"text"
id=
"
question-input-field
"
>
<input
type =
"text"
id=
"
start
"
>
</div>
</div>
<div
class=
"container question-field"
>
<div
class=
"question-text"
>
무슨학교에 다니나요?
</div>
<div
class=
"question-text"
>
무슨
학교에 다니나요?
</div>
<div
class=
"question-input"
>
<label
for=
"question-input-field"
></label>
<input
type =
"text"
id=
"
question-input-fiel
d"
>
<input
type =
"text"
id=
"
en
d"
>
</div>
</div>
<div
class=
"container question-field"
>
<div
class=
"question-text"
>
몇학년인가요?
</div>
<div
class=
"question-text"
>
몇
학년인가요?
</div>
<div
class=
"question-input"
>
<select
name=
"semester"
id=
"semester"
>
<option
value=
"sem-1-1"
>
1학년 1학기
</option>
...
...
@@ -87,56 +103,189 @@
</div>
</div>
<div
class=
"container button-field"
>
<button
class=
"button_calculate"
type=
"button"
>
계산해보기
<button
class=
"button_calculate"
type=
"button"
>
계산하기
</button>
</div>
</div>
<div
class=
row
id =
"map-answer"
style=
"margin-top:100px"
>
<div
style=
"width:30%"
>
<iframe
src=
"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d203276.83209506533!2d126.94001771640623!3d37.24295009999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b44de2c7f3ddb%3A0x4c35e852f90f5520!2z6rK97Z2s64yA7ZWZ6rWQIOq1reygnOy6oO2NvOyKpA!5e0!3m2!1sko!2skr!4v1606155147622!5m2!1sko!2skr"
width=
100%
height=
"250"
frameborder=
"0"
style=
"border:0;"
allowfullscreen=
""
aria-hidden=
"false"
tabindex=
"0"
right=
"20%"
></iframe>
</div>
<div
class=
"answer-field"
>
한번 갈 때마다 ...
<br>
<span
class=
"answer-highlight"
>
n
</span>
시간
<span
class=
"answer-highlight"
>
n
</span>
분
<br>
<span
class=
"answer-highlight"
>
n
</span>
원
<br>
</div>
</div>
<br>
<div
id=
"map"
style=
"width:700px;height:700px;"
></div>
<script>
var
btn
=
document
.
querySelector
(
'button'
);
btn
.
addEventListener
(
'click'
,
updateBtn
);
function
updateBtn
()
{
var
start
=
document
.
getElementById
(
'start'
).
value
;
var
end
=
document
.
getElementById
(
'end'
).
value
;
naver
.
maps
.
Service
.
geocode
({
address
:
start
},
function
(
status
,
response
)
{
if
(
status
!==
naver
.
maps
.
Service
.
Status
.
OK
)
{
return
alert
(
'Something wrong!'
);
}
var
result
=
response
.
result
,
// 검색 결과의 컨테이너
items
=
result
.
items
;
var
sx
=
result
.
items
[
0
].
point
.
x
;
var
sy
=
result
.
items
[
0
].
point
.
y
;
naver
.
maps
.
Service
.
geocode
({
address
:
end
},
function
(
status
,
response
)
{
if
(
status
!==
naver
.
maps
.
Service
.
Status
.
OK
)
{
return
alert
(
'Something wrong!'
);
}
var
result
=
response
.
result
,
// 검색 결과의 컨테이너
items
=
result
.
items
;
var
ex
=
result
.
items
[
0
].
point
.
x
;
var
ey
=
result
.
items
[
0
].
point
.
y
;
/*var sx = 127.0739547;
var sy = 37.2407701;
var ex = 126.921666;
var ey = 37.1308333;
*/
var
mapOptions
=
{
center
:
new
naver
.
maps
.
LatLng
(
start
,
end
),
zoom
:
10
};
var
map
=
new
naver
.
maps
.
Map
(
'map'
,
mapOptions
);
function
searchPubTransPathAJAX
()
{
var
xhr
=
new
XMLHttpRequest
();
//ODsay apiKey 입력
var
url
=
"https://api.odsay.com/v1/api/searchPubTransPath?SX="
+
sx
+
"&SY="
+
sy
+
"&EX="
+
ex
+
"&EY="
+
ey
+
"&apiKey=nnsDQB1AWhpETO3HmMdDAw"
;
xhr
.
open
(
"GET"
,
url
,
true
);
xhr
.
send
();
xhr
.
onreadystatechange
=
function
()
{
if
(
xhr
.
readyState
==
4
&&
xhr
.
status
==
200
)
{
console
.
log
(
JSON
.
parse
(
xhr
.
responseText
)
);
// <- xhr.responseText 로 결과를 가져올 수 있음
//노선그래픽 데이터 호출
callMapObjApiAJAX
((
JSON
.
parse
(
xhr
.
responseText
))[
"result"
][
"path"
][
0
].
info
.
mapObj
);
}
}
}
//길찾기 API 호출
searchPubTransPathAJAX
();
function
callMapObjApiAJAX
(
mabObj
){
var
xhr
=
new
XMLHttpRequest
();
//ODsay apiKey 입력
var
url
=
"https://api.odsay.com/v1/api/loadLane?mapObject=0:0@"
+
mabObj
+
"&apiKey=nnsDQB1AWhpETO3HmMdDAw"
;
xhr
.
open
(
"GET"
,
url
,
true
);
xhr
.
send
();
xhr
.
onreadystatechange
=
function
()
{
if
(
xhr
.
readyState
==
4
&&
xhr
.
status
==
200
)
{
var
resultJsonData
=
JSON
.
parse
(
xhr
.
responseText
);
drawNaverMarker
(
sx
,
sy
);
// 출발지 마커 표시
drawNaverMarker
(
ex
,
ey
);
// 도착지 마커 표시
drawNaverPolyLine
(
resultJsonData
);
// 노선그래픽데이터 지도위 표시
// boundary 데이터가 있을경우, 해당 boundary로 지도이동
if
(
resultJsonData
.
result
.
boundary
){
var
boundary
=
new
naver
.
maps
.
LatLngBounds
(
new
naver
.
maps
.
LatLng
(
resultJsonData
.
result
.
boundary
.
top
,
resultJsonData
.
result
.
boundary
.
left
),
new
naver
.
maps
.
LatLng
(
resultJsonData
.
result
.
boundary
.
bottom
,
resultJsonData
.
result
.
boundary
.
right
)
);
map
.
panToBounds
(
boundary
);
}
}
}
}
// 지도위 마커 표시해주는 함수
function
drawNaverMarker
(
x
,
y
){
var
marker
=
new
naver
.
maps
.
Marker
({
position
:
new
naver
.
maps
.
LatLng
(
y
,
x
),
map
:
map
});
}
// 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수
function
drawNaverPolyLine
(
data
){
var
lineArray
;
for
(
var
i
=
0
;
i
<
data
.
result
.
lane
.
length
;
i
++
){
for
(
var
j
=
0
;
j
<
data
.
result
.
lane
[
i
].
section
.
length
;
j
++
){
lineArray
=
null
;
lineArray
=
new
Array
();
for
(
var
k
=
0
;
k
<
data
.
result
.
lane
[
i
].
section
[
j
].
graphPos
.
length
;
k
++
){
lineArray
.
push
(
new
naver
.
maps
.
LatLng
(
data
.
result
.
lane
[
i
].
section
[
j
].
graphPos
[
k
].
y
,
data
.
result
.
lane
[
i
].
section
[
j
].
graphPos
[
k
].
x
));
}
//지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음)
if
(
data
.
result
.
lane
[
i
].
type
==
1
){
var
polyline
=
new
naver
.
maps
.
Polyline
({
map
:
map
,
path
:
lineArray
,
strokeWeight
:
3
,
strokeColor
:
'#003499'
});
}
else
if
(
data
.
result
.
lane
[
i
].
type
==
2
){
var
polyline
=
new
naver
.
maps
.
Polyline
({
map
:
map
,
path
:
lineArray
,
strokeWeight
:
3
,
strokeColor
:
'#37b42d'
});
}
else
{
var
polyline
=
new
naver
.
maps
.
Polyline
({
map
:
map
,
path
:
lineArray
,
strokeWeight
:
3
});
}
}
}
}
});
});
}
</script>
<div
class=
"row"
>
<div
id=
"list-answer"
>
<div
class=
"answer-field"
id=
"answer-how-many-hours"
>
지금까지
<span
class=
"answer-highlight"
>
n
</span>
시간을 길에서 보내셨군요
<br>
졸업까지 앞으로
<span
class=
"answer-highlight"
>
n
</span>
시간은 더 길에서 보내시면 됩니다.
<br>
지금까지
<span
class=
"answer-highlight"
>
n
</span>
시간을 길에서 보내셨군요!
<br>
앞으로
<span
class=
"answer-highlight"
>
n
</span>
시간은 더 길에서 보내시면 됩니다!!
<br>
</div>
</div>
</div>
<div
class=
"row"
>
<div
class =
"answer-detail-question"
>
이 시간에 알바를 했다면?
<br>
교통비로 국밥
<br>
</div>
<div
class=
"answer-detail-answer"
>
n원
<br>
m그릇
<br>
</div>
</div>
</div>
<div
class=
"row"
>
<div
id=
"list-answer"
>
<div
class=
"answer-field"
id=
"answer-how-many-hours"
>
<p>
이 시간에..
</p>
알바를 했다면?
<span
class=
"answer-highlight"
>
n
</span>
원
<br>
<p>
이 돈이면..
</p>
국밥이
<span
class=
"answer-highlight"
>
n
</span>
그릇
<br>
</div>
</div>
</div>
<footer
class=
"text-center small tm-footer"
>
<p
class=
"mb-0"
>
Copyright
©
2020 TongGilMut
- Design:
<a
rel=
"nofollow"
href=
"https://github.com/wjdwl001"
class=
"tm-footer-link"
>
Joung Jiwon
</a>
</p>
</footer>
</section>
<script
src=
"js/jquery-1.9.1.min.js"
></script>
<script
src=
"js/jquery-1.9.1.min.js"
></script>
<script
src=
"slick/slick.min.js"
></script>
<script
src=
"magnific-popup/jquery.magnific-popup.min.js"
></script>
<script
src=
"js/jquery.singlePageNav.min.js"
></script>
<script
src=
"js/bootstrap.min.js"
></script>
<script
src=
"js/jquery.singlePageNav.min.js"
></script>
<script
src=
"js/bootstrap.min.js"
></script>
<script>
$
(
'button-calculate'
).
click
(
function
(){
})
function
getOffSet
(){
...
...
@@ -145,7 +294,7 @@
if
(
windowHeight
>
500
)
{
_offset
=
400
;
}
}
if
(
windowHeight
>
680
)
{
_offset
=
300
}
...
...
@@ -164,7 +313,7 @@
}
// Parallax function
// Adapted based on https://codepen.io/roborich/pen/wpAsm
// Adapted based on https://codepen.io/roborich/pen/wpAsm
var
background_image_parallax
=
function
(
$object
,
multiplier
,
forceSet
){
multiplier
=
typeof
multiplier
!==
'undefined'
?
multiplier
:
0.5
;
multiplier
=
1
-
multiplier
;
...
...
@@ -174,7 +323,7 @@
if
(
forceSet
)
{
setParallaxPosition
(
$doc
,
multiplier
,
$object
);
}
else
{
$
(
window
).
scroll
(
function
(){
$
(
window
).
scroll
(
function
(){
setParallaxPosition
(
$doc
,
multiplier
,
$object
);
});
}
...
...
@@ -188,41 +337,41 @@
$
(
window
).
scroll
(
function
(){
var
firstTop
=
$object
.
offset
().
top
,
pos
=
$
(
window
).
scrollTop
(),
yPos
=
Math
.
round
((
multiplier
*
(
firstTop
-
pos
))
-
186
);
yPos
=
Math
.
round
((
multiplier
*
(
firstTop
-
pos
))
-
186
);
var
bg_css
=
'center '
+
yPos
+
'px'
;
$object
.
css
({
"background-position"
:
bg_css
});
});
};
$
(
function
(){
// Hero Section - Background Parallax
background_image_parallax
(
$
(
".tm-parallax"
),
0.30
,
false
);
background_image_parallax_2
(
$
(
"#contact"
),
0.80
);
background_image_parallax_2
(
$
(
"#contact"
),
0.80
);
// Handle window resize
window
.
addEventListener
(
'resize'
,
function
(){
background_image_parallax
(
$
(
".tm-parallax"
),
0.30
,
true
);
},
true
);
// Detect window scroll and update navbar
$
(
window
).
scroll
(
function
(
e
){
$
(
window
).
scroll
(
function
(
e
){
if
(
$
(
document
).
scrollTop
()
>
120
)
{
$
(
'.tm-navbar'
).
addClass
(
"scroll"
);
}
else
{
$
(
'.tm-navbar'
).
removeClass
(
"scroll"
);
}
});
// Close mobile menu after click
// Close mobile menu after click
$
(
'#tmNav a'
).
on
(
'click'
,
function
(){
$
(
'.navbar-collapse'
).
removeClass
(
'show'
);
$
(
'.navbar-collapse'
).
removeClass
(
'show'
);
})
// Scroll to corresponding section with animation
$
(
'#tmNav'
).
singlePageNav
();
$
(
'#tmNav'
).
singlePageNav
();
// Add smooth scrolling to all links
// https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
$
(
"a"
).
on
(
'click'
,
function
(
event
)
{
...
...
@@ -278,4 +427,4 @@
});
</script>
</body>
</html>
\ No newline at end of file
</html>
...
...
Please
register
or
login
to post a comment