Как работать погода, не спрашивая местоположение - PullRequest
Новая
       9

Как работать погода, не спрашивая местоположение

2 голосов
/ 06 марта 2020

Я создал приложение погоды, которое спрашивает местоположение при перезагрузке «Разрешить или заблокировать», когда я нажимаю блок, погода не работает после каждой перезагрузки. проблема в том, что я хочу изменить код, я хочу работать в погоде, не спрашивая разрешения или блокировки, я хочу показать это немедленно, пожалуйста, помогите мне. спасибо.

есть мой код 





  const iconElement = document.querySelector(".weather-icon");
  const tempElement = document.querySelector(".temperature-value p");
  const descElement = document.querySelector(".temperature-description p");
  const locationElement = document.querySelector(".location p");
  const notificationElement = document.querySelector(".notification");

  // App data
  const weather = {};

  weather.temperature = {
      unit : "celsius"
  }

  // APP CONSTS AND VARS
  const KELVIN = 273;
  // API KEY
  const key = "82005d27a116c2880c8f0fcb866998a0";

  // CHECK IF BROWSER SUPPORTS GEOLOCATION
  if('geolocation' in navigator){
      navigator.geolocation.getCurrentPosition(setPosition, showError);
  }else{
      notificationElement.style.display = "block";
      notificationElement.innerHTML = "<p>Browser doesn't Support Geolocation</p>";
  }

  // SET USER'S POSITION
  function setPosition(position){
      let latitude = position.coords.latitude;
      let longitude = position.coords.longitude;

      getWeather(latitude, longitude);
  }

  // SHOW ERROR WHEN THERE IS AN ISSUE WITH GEOLOCATION SERVICE
  function showError(error){
      notificationElement.style.display = "block";
      notificationElement.innerHTML = `<p> ${error.message} </p>`;
  }

  // GET WEATHER FROM API PROVIDER
  function getWeather(latitude, longitude){
      let api = `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;

      fetch(api)
          .then(function(response){
              let data = response.json();
              return data;
          })
          .then(function(data){
              weather.temperature.value = Math.floor(data.main.temp - KELVIN);
              weather.description = data.weather[0].description;
              weather.iconId = data.weather[0].icon;
              weather.city = data.name;
              weather.country = data.sys.country;
          })
          .then(function(){
              displayWeather();
          });
  }

  // DISPLAY WEATHER TO UI
  function displayWeather(){
      iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
      tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
      descElement.innerHTML = weather.description;
      locationElement.innerHTML = `${weather.city}, ${weather.country}`;
  }

  // C to F conversion
  function celsiusToFahrenheit(temperature){
      return (temperature * 9/5) + 32;
  }

  // WHEN THE USER CLICKS ON THE TEMPERATURE ELEMENET
  tempElement.addEventListener("click", function(){
      if(weather.temperature.value === undefined) return;

      if(weather.temperature.unit == "celsius"){
          let fahrenheit = celsiusToFahrenheit(weather.temperature.value);
          fahrenheit = Math.floor(fahrenheit);

          tempElement.innerHTML = `${fahrenheit}°<span>F</span>`;
          weather.temperature.unit = "fahrenheit";
      }else{
          tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
          weather.temperature.unit = "celsius"
      }
  });

html



    <div class="container">
            <div class="app-title">
                <p>Weather</p>
            </div>
            <div class="notification"> </div>
            <div class="weather-container">
                <div class="weather-icon">
                    <img src="icons/unknown.png" alt="">
                </div>
                <div class="temperature-value">
                    <p>- °<span>C</span></p>
                </div>
                <div class="temperature-description">
                    <p> - </p>
                </div>
                <div class="location">
                    <p>-</p>
                </div>
            </div>
        </div>

Ответы [ 2 ]

0 голосов
/ 06 марта 2020

Вы также можете сделать запрос на получение http://ip-api.com/json и использовать данные из него.

0 голосов
/ 06 марта 2020

Из-за соображений безопасности браузер не может спросить пользователя, хочет ли он сообщить свое местоположение, если вы попытаетесь сделать это с javascript.

Однако вы можете захотеть изучить геолокацию через IP. , что не так точно (и если пользователь использует VPN вообще не работает), но, возможно, вам подойдет go.

Это вы должны начать: https://whatismyipaddress.com/geolocation

...