[TIL]JS:バニラJSを使用したクロムアプリ04の作成


クロムアプリケーションの作成


5.天気


利用位置座標(緯度、経度)のインポートと保存
天気(温度)、位置を表す
  • navigator.geolocation.getCurrentPosition(handleGeoSucces, handleGeoError)位置情報の照会の有無を尋ねる.
  • position.coords.latitudeposition.coords.longitude緯度と経度をもたらした.
  • データは、呼び出し
  • API URLから取得できます.
  • const waather = document.querySelector(".js-weather");
    // 내 고유 KEY 적는 곳
    const API_KEY = ""
    const COORDS = 'coords';
    
    function getWeather(lat, lng){
        // 데이터를 가져오는 방법.
        fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude={part}&appid=${API key}`)
        // .then 기다리는 함수. 함수가 데이터를 가져온 다음 실행할 수 있도록 한다.
        .then(function(response){
            return response.json();
        })
        .then(function(json){
            const temperature = json.main.temp;
            const place = json.name;
            weahter.innerText = `${temperature} @ ${place}`;
        });
    }
    
    
    function saveCoords(coordsObj){
        localStorage.setItem(COORDS, JSON.stringify(coordsObj));
    }
    function handleGeoSucces(position){
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;
        const coordsObj = {
            latitude,
            longitude
        };
        saveCoords(coordsObj);
    }
    
    function handleGeoError(){
        console.log("Cant access geo location");
    }
    function askForCoords(){
        navigator.geolocation.getCurrentPosition(handleGeoSucces, handleGeoError)
    }
    
    function loadCoords(){
        const loadedCords = localStorage.getItem(COORDS);
        if(loadedCoords === null){
            aksForCoords();
        } else {
            const parseCoords = JSON.parse(loadCoords);
            getWeather(parseCoords.latitude, parseCoords.longitude);
        }
    }
    function init(){
    
    }
    init();
    ✔ openweathdrmap.orgショートカット