Toggle navigation
Toggle navigation
This project
Loading...
Sign in
강희주
/
Music_Recommendation_Website
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
진재영
2022-06-09 05:46:35 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
ca8dbb6df2c72d5bbebf0b7e7c52e655e12946aa
ca8dbb6d
1 parent
438f6427
main.html
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
48 additions
and
1 deletions
main_/main.html
main_/main.html
View file @
ca8dbb6
...
...
@@ -4,6 +4,46 @@
<script
src=
"main.js"
>
</script>
<meta
charset=
"UTF-8"
>
<title>
날씨에 따른 음악 추천 사이트
</title>
<script
src=
"http://code.jquery.com/jquery-1.11.0.js"
></script>
<script>
// 콜백 함수를 이용할 시 반드시 이 스크립트가 밑의 스크립트보다 먼저 실행돼야 함
function
useGps
()
{
var
userLat
=
document
.
getElementById
(
'latitude'
).
innerText
.
trim
();
// trim으로 공백을 제거하고 실제 값만 불러오기
console
.
log
(
userLat
);
var
userLng
=
document
.
getElementById
(
'longitude'
).
innerText
.
trim
();
// trim으로 공백을 제거하고 실제 값만 불러오기
console
.
log
(
userLng
);
const
APIKEY
=
"ea903679a6e5a44da75a971c0231f4f4"
;
fetch
(
"https://api.openweathermap.org/data/2.5/weather?lat="
+
userLat
+
"&lon="
+
userLng
+
"&appid="
+
APIKEY
+
"&units=metric"
)
.
then
(
res
=>
res
.
json
())
.
then
(
function
(
jsonObject
)
{
//if(!error&&response.statusCode==200)
//request는 string으로 받아오기 때문에 JSON형태로 바꿔준다.
//var jsonObject = JSON.parse();
var
LocationName
=
jsonObject
.
name
;
//지역 이름
var
WeatherCondition
=
jsonObject
.
weather
[
0
].
main
;
//현재 날씨
var
Temp
=
jsonObject
.
main
.
temp
;
//현재 기온
//console.log(body);
console
.
log
(
LocationName
);
console
.
log
(
WeatherCondition
);
console
.
log
(
Temp
);
})
}
</script>
<script>
$
(
function
()
{
if
(
navigator
.
geolocation
)
{
navigator
.
geolocation
.
getCurrentPosition
(
function
(
pos
)
{
$
(
'#latitude'
).
html
(
pos
.
coords
.
latitude
);
$
(
'#longitude'
).
html
(
pos
.
coords
.
longitude
);
// useGps(); // GPS 정보를 모두받아온 뒤에 코드를 실행함
useGps
();
});
}
else
{
alert
(
'이 브라우저에서는 안됩니다'
);
}
});
</script>
<style>
#container
{
width
:
600px
;
...
...
@@ -50,7 +90,13 @@
<fieldset>
<legend>
현재 내 위치 정보
</legend>
<div><input
type=
"button"
value=
"현재 내 위치 검색"
></div><br>
<!-- 검색 버튼 누르면 팝업으로 위치 서비스 동의 버튼 뜨게 하기 -->
<div><input
type=
"button"
value=
"현재 내 위치 검색"
></div><br>
<li>
위도:
<span
id=
"latitude"
></span></li>
<li>
경도:
<span
id=
"longitude"
></span></li>
<li>
위치:
<span
id=
"LocationName"
></span></li>
<li>
날씨:
<span
id=
"WeatherCondition"
></span></li>
<li>
기온:
<span
id=
"Temp"
></span></li>
<!-- 검색 버튼 누르면 팝업으로 위치 서비스 동의 버튼 뜨게 하기 -->
</fieldset>
<fieldset>
...
...
@@ -65,6 +111,7 @@
allow=
"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe><br>
</fieldset>
<br>
<br>
...
...
Please
register
or
login
to post a comment