[javaScript] 사용자 위치 기반 날씨 API 사용

https://openweathermap.org/current

Current weather data - OpenWeatherMap

API 사용하여 날씨 정보 이용

 

 

const API_KEY = 위의 참조사이트 마이페이지 내 본인 키 사용;

function onGeoOk(position){
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;

    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
    fetch(url).then((response) => response.json())
    .then((data) =>{
        const weater = document.querySelector("#weather span:first-child");
        const city = document.querySelector("#weather span:last-child");
        city.innerText = data.name;
        weater.innerText =`${data.weather[0].main} / ${data.main.temp}`;
    });
}

function onGeoError(){
    alert("Can't find you. No weather for you.")
}

navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError);

// navigator.geolocation.getCurrentPosition();
// 유저의 위치를 반환
// 두가지 매개변수를 줘야함. 잘되었을때, 오류났을때

//https://openweathermap.org/current 날씨 api 사용

//fetch url을 불러옴
// fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환
// 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject