Question

我有一个简单的代码来调用天气位置，但是我至少需要两个位置。如何获得基于坐标的多个结果？

我已经找到了这段代码，这很简单，您可以在其中编写坐标以获取位置，仅此而已。但我需要在网站上显示多个位置。我知道这是一个简单的问题，但是如果有人可以帮助我，那将非常好。

这是我的代码：

<script type="text/javascript">
$(document).ready(function() {
  var Celsius;
  var Fahrenheit;
  $.ajaxSetup({ cache:true}); 
  setRandomColor();
  getLocation(getWeather);
  $("#temp-slider").click(sliderChange);
});
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#' + letters[Math.round(Math.random() * 5)];
  for (var i = 0; i < 5; i++) {
    color += letters[Math.floor(Math.random() * 15)];
  }
  return color;
}
function setRandomColor() {
  var newColor = getRandomColor();
  $(".weather-current").css("color", newColor);
}
function getLocation(callback) {
  $.getJSON("https://geoip-db.com/json/", function(json) {
    callback(json.latitude, json.longitude, setWeather);
});
}
function getWeather(lat, lon, callback) {
  $.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=25.6750700&lon=-100.3184700", function(json) {
    callback(json);
});
}
function setWeather(weather) {
  var temp = Math.round(weather.main.temp * 10) / 10;
  Celsius = temp + ' °C';
  $(".weather-current p").html(Celsius);
}
function sliderChange() {
  if ($(".slider").css('background-color') !== 'rgb(204, 204, 204)') {
    $(".weather-current p").html(Fahrenheit);
  } else {
    $(".weather-current p").html(Celsius);
  }
}

Answer 1

将函数定义中的参数用于getWeather网址查询字符串。

function getWeather(lat, lon, callback) {
  $.getJSON(
    `https://fcc-weather-api.glitch.me/api/current?lat=${lat}&lon=${lon}`,
    callback
  );
}

Answer 2

当然，这是html <div class="weather-current"><p> </p></div>，整个脚本就是这个脚本。我需要在此位置添加另一个位置。谢谢！

<script type="text/javascript">
    $(document).ready(function() {
      var Celsius;
      var Fahrenheit;
      $.ajaxSetup({ cache:true}); 
      setRandomColor();
      getLocation(getWeather);
      $("#temp-slider").click(sliderChange);
    });
    function getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#' + letters[Math.round(Math.random() * 5)];
      for (var i = 0; i < 5; i++) {
        color += letters[Math.floor(Math.random() * 15)];
      }
      return color;
    }
    function setRandomColor() {
      var newColor = getRandomColor();
      $(".weather-current").css("color", newColor);
    }
    function getLocation(callback) {
      $.getJSON("https://geoip-db.com/json/", function(json) {
        callback(json.latitude, json.longitude, setWeather);
    });
    }
    function getWeather(lat, lon, callback) {
      $.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=25.6750700&lon=-100.3184700", function(json) {
        callback(json);
    });
    }
    function setWeather(weather) {
      var temp = Math.round(weather.main.temp * 10) / 10;
      Celsius = temp + ' °C';
      $(".weather-current p").html(Celsius);
    }
    function sliderChange() {
      if ($(".slider").css('background-color') !== 'rgb(204, 204, 204)') {
        $(".weather-current p").html(Fahrenheit);
      } else {
        $(".weather-current p").html(Celsius);
      }
    }
 </script>

多个天气位置

2 个答案: