Showing
2 changed files
with
86 additions
and
0 deletions
WeatherCheck+gps_api/index copy.html
0 → 100644
1 | +<html> | ||
2 | + <head> | ||
3 | + <meta charset="UTF-8"> | ||
4 | + <title> GPS to WeatherCondition </title> | ||
5 | + <script src="http://code.jquery.com/jquery-1.11.0.js"></script> | ||
6 | + <script> | ||
7 | + // 콜백 함수를 이용할 시 반드시 이 스크립트가 밑의 스크립트보다 먼저 실행돼야 함 | ||
8 | + function useGps() { | ||
9 | + var userLat = document.getElementById('latitude').innerText.trim(); // trim으로 공백을 제거하고 실제 값만 불러오기 | ||
10 | + console.log(userLat); | ||
11 | + var userLng = document.getElementById('longitude').innerText.trim(); // trim으로 공백을 제거하고 실제 값만 불러오기 | ||
12 | + console.log(userLng); | ||
13 | + | ||
14 | + const APIKEY = "ea903679a6e5a44da75a971c0231f4f4"; | ||
15 | + fetch("https://api.openweathermap.org/data/2.5/weather?lat=" + userLat + "&lon=" + userLng + "&appid=" + APIKEY + "&units=metric") | ||
16 | + .then(res => res.json()) | ||
17 | + .then(function(jsonObject) { | ||
18 | + //if(!error&&response.statusCode==200) | ||
19 | + //request는 string으로 받아오기 때문에 JSON형태로 바꿔준다. | ||
20 | + //var jsonObject = JSON.parse(); | ||
21 | + var LocationName = jsonObject.name; //지역 이름 | ||
22 | + var WeatherCondition = jsonObject.weather[0].main; //현재 날씨 | ||
23 | + var Temp = jsonObject.main.temp; //현재 기온 | ||
24 | + //console.log(body); | ||
25 | + console.log(LocationName); | ||
26 | + console.log(WeatherCondition); | ||
27 | + console.log(Temp); | ||
28 | + }) | ||
29 | + } </script> | ||
30 | + <script> | ||
31 | + $(function() { | ||
32 | + if (navigator.geolocation) { | ||
33 | + navigator.geolocation.getCurrentPosition(function(pos) { | ||
34 | + $('#latitude').html(pos.coords.latitude); | ||
35 | + $('#longitude').html(pos.coords.longitude); | ||
36 | + // useGps(); // GPS 정보를 모두받아온 뒤에 코드를 실행함 | ||
37 | + useGps(); | ||
38 | + }); | ||
39 | + } | ||
40 | + else { | ||
41 | + alert('이 브라우저에서는 안됩니다'); | ||
42 | + } | ||
43 | + }); | ||
44 | + </script> | ||
45 | + | ||
46 | + | ||
47 | + </head> | ||
48 | + <body> | ||
49 | + <ul> | ||
50 | + <li>위도:<span id="latitude"></span></li> | ||
51 | + <li>경도:<span id="longitude"></span></li> | ||
52 | + </ul> | ||
53 | + </body> | ||
54 | +</html> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
gps_api/test.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html> | ||
3 | +<head> | ||
4 | +<meta charset="UTF-8"> | ||
5 | +<title>Insert title here</title> | ||
6 | +<script src="http://code.jquery.com/jquery-1.11.0.js"></script> | ||
7 | +<script > | ||
8 | + $(function() { | ||
9 | + // Geolocation API에 액세스할 수 있는지를 확인 | ||
10 | + if (navigator.geolocation) { | ||
11 | + //위치 정보를 얻기 | ||
12 | + navigator.geolocation.getCurrentPosition (function(pos) { | ||
13 | + $('#latitude').html(pos.coords.latitude); // 위도 | ||
14 | + $('#longitude').html(pos.coords.longitude); // 경도 | ||
15 | + }); | ||
16 | + } else { | ||
17 | + alert("이 브라우저에서는 Geolocation이 지원되지 않습니다.") | ||
18 | + } | ||
19 | + }); | ||
20 | +</script> | ||
21 | +</head> | ||
22 | +<body> | ||
23 | + <ul> | ||
24 | + <li>위도:<span id="latitude"></span></li> | ||
25 | + <li>경도:<span id="longitude"></span></li> | ||
26 | + </ul> | ||
27 | +<script defer type = "text/javascript" src = "../WeatherCheckAPI/WeatherCheck.js" ></script> | ||
28 | + | ||
29 | +</body> | ||
30 | +</html> | ||
31 | + | ||
32 | + |
-
Please register or login to post a comment