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-12-05 00:01:23 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
cbefec5bf5bf282d91affb56a6d24b5952df7180
cbefec5b
1 parent
2956c337
merge file(api&calculate)
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
170 additions
and
15 deletions
project/index.html
project/index.html
View file @
cbefec5
...
...
@@ -12,13 +12,31 @@
<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>
...
...
@@ -64,18 +82,18 @@
<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>
...
...
@@ -90,18 +108,155 @@
</div>
</div>
<div
class=
"container button-field"
>
<button
class=
"button_calculate"
type=
"button"
onclick=
"semester();return false;"
>
계산해보기
<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>
<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=
"answer-field"
>
한번 갈 때마다 ...
<br>
<span
class=
"answer-highlight"
>
n
</span>
시간
<span
class=
"answer-highlight"
>
n
</span>
분
<br>
...
...
Please
register
or
login
to post a comment