Showing
1 changed file
with
48 additions
and
1 deletions
... | @@ -4,6 +4,46 @@ | ... | @@ -4,6 +4,46 @@ |
4 | <script src="main.js"> </script> | 4 | <script src="main.js"> </script> |
5 | <meta charset="UTF-8"> | 5 | <meta charset="UTF-8"> |
6 | <title>날씨에 따른 음악 추천 사이트</title> | 6 | <title>날씨에 따른 음악 추천 사이트</title> |
7 | + <script src="http://code.jquery.com/jquery-1.11.0.js"></script> | ||
8 | + <script> | ||
9 | + // 콜백 함수를 이용할 시 반드시 이 스크립트가 밑의 스크립트보다 먼저 실행돼야 함 | ||
10 | + function useGps() { | ||
11 | + var userLat = document.getElementById('latitude').innerText.trim(); // trim으로 공백을 제거하고 실제 값만 불러오기 | ||
12 | + console.log(userLat); | ||
13 | + var userLng = document.getElementById('longitude').innerText.trim(); // trim으로 공백을 제거하고 실제 값만 불러오기 | ||
14 | + console.log(userLng); | ||
15 | + | ||
16 | + const APIKEY = "ea903679a6e5a44da75a971c0231f4f4"; | ||
17 | + fetch("https://api.openweathermap.org/data/2.5/weather?lat=" + userLat + "&lon=" + userLng + "&appid=" + APIKEY + "&units=metric") | ||
18 | + .then(res => res.json()) | ||
19 | + .then(function(jsonObject) { | ||
20 | + //if(!error&&response.statusCode==200) | ||
21 | + //request는 string으로 받아오기 때문에 JSON형태로 바꿔준다. | ||
22 | + //var jsonObject = JSON.parse(); | ||
23 | + var LocationName = jsonObject.name; //지역 이름 | ||
24 | + var WeatherCondition = jsonObject.weather[0].main; //현재 날씨 | ||
25 | + var Temp = jsonObject.main.temp; //현재 기온 | ||
26 | + //console.log(body); | ||
27 | + console.log(LocationName); | ||
28 | + console.log(WeatherCondition); | ||
29 | + console.log(Temp); | ||
30 | + }) | ||
31 | + } </script> | ||
32 | + <script> | ||
33 | + $(function() { | ||
34 | + if (navigator.geolocation) { | ||
35 | + navigator.geolocation.getCurrentPosition(function(pos) { | ||
36 | + $('#latitude').html(pos.coords.latitude); | ||
37 | + $('#longitude').html(pos.coords.longitude); | ||
38 | + // useGps(); // GPS 정보를 모두받아온 뒤에 코드를 실행함 | ||
39 | + useGps(); | ||
40 | + }); | ||
41 | + } | ||
42 | + else { | ||
43 | + alert('이 브라우저에서는 안됩니다'); | ||
44 | + } | ||
45 | + }); | ||
46 | + </script> | ||
7 | <style> | 47 | <style> |
8 | #container { | 48 | #container { |
9 | width:600px; | 49 | width:600px; |
... | @@ -50,7 +90,13 @@ | ... | @@ -50,7 +90,13 @@ |
50 | 90 | ||
51 | <fieldset> | 91 | <fieldset> |
52 | <legend>현재 내 위치 정보</legend> | 92 | <legend>현재 내 위치 정보</legend> |
53 | - <div><input type="button" value="현재 내 위치 검색"></div><br><!-- 검색 버튼 누르면 팝업으로 위치 서비스 동의 버튼 뜨게 하기 --> | 93 | + <div><input type="button" value="현재 내 위치 검색"></div><br> |
94 | + <li>위도:<span id="latitude"></span></li> | ||
95 | + <li>경도:<span id="longitude"></span></li> | ||
96 | + <li>위치:<span id="LocationName"></span></li> | ||
97 | + <li>날씨:<span id="WeatherCondition"></span></li> | ||
98 | + <li>기온:<span id="Temp"></span></li> | ||
99 | + <!-- 검색 버튼 누르면 팝업으로 위치 서비스 동의 버튼 뜨게 하기 --> | ||
54 | </fieldset> | 100 | </fieldset> |
55 | 101 | ||
56 | <fieldset> | 102 | <fieldset> |
... | @@ -65,6 +111,7 @@ | ... | @@ -65,6 +111,7 @@ |
65 | allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br> | 111 | allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br> |
66 | </fieldset> | 112 | </fieldset> |
67 | 113 | ||
114 | + | ||
68 | 115 | ||
69 | <br> | 116 | <br> |
70 | <br> | 117 | <br> | ... | ... |
-
Please register or login to post a comment