Update main.html

@@ -4,6 +4,45 @@
     <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;
@@ -51,12 +90,17 @@
       <fieldset>
         <legend>현재 내 위치 정보</legend>
         <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>
         <legend>추천 음악 정보</legend>
         <div><input type="button" value="음악 추천 받기"></div><br>
-        <iframe id="video1" width="450" height="280" src="" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
+        <!-- <iframe id="video1" width="450" height="280" src="" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
         <a href="#" id="playvideo">Play button</a>
         <script>
           var userLat = 37;
@@ -69,14 +113,14 @@
            });
             })
        
-        </script>
+        </script> -->
 
-        <!-- <h4>추천 음악 1</h4>
+        <h4>추천 음악 1</h4>
         <iframe width="942" height="530" src="https://www.youtube.com/embed/vnS_jn2uibs" title="YouTube video player" frameborder="0" 
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br>
         <h4>추천 음악 2</h4>
         <iframe width="942" height="530" src="https://www.youtube.com/embed/P6gV_t70KAk" title="YouTube video player" frameborder="0" 
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br> -->
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br>
       </fieldset>