진재영

main.html

...@@ -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>
......