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

Question

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

这是我的代码

  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>

Answer 1

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

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

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

Answer 2

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