如何在不询问位置的情况下工作天气

Posted 2023-02-23

【中文标题】如何在不询问位置的情况下工作天气

【英文标题】：How to work weather without asking location

【发布时间】：2020-03-06 06:12:35

【问题描述】：

我创建了天气应用程序，它会在所有重新加载时询问位置“允许或阻止”，当我单击阻止时，每次重新加载后天气都不起作用。问题是，我想更改代码，我想在不询问允许或阻止的情况下工作天气，我想立即显示它，请帮助我。谢谢。

这是我的代码

  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" >
                </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>

【参考方案1】：

出于安全原因，如果您尝试使用 javascript 进行操作，浏览器无法询问用户是否愿意透露他的位置。

但是，您可能希望通过 IP 来查看地理位置，这并不准确（如果用户使用 *** 根本不起作用），但也许是一种适合您的方法。

这会让你开始：https://whatismyipaddress.com/geolocation

【参考方案2】：

您还可以向http://ip-api.com/json 发出获取请求并使用其中的数据。