多个天气位置答案

【问题标题】：Multiple Weather Locations多个天气位置
【发布时间】：2018-10-07 11:33:46
【问题描述】：

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

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

这是我的代码：

<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);
  }
}

【问题讨论】：

标签： javascript geolocation coordinates weather-api

【解决方案1】：

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

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

【讨论】：

对不起，我真的不擅长这个。我有两次相同的脚本，每个都有不同的坐标。第一个我使用 .weather-current1 来获取第一个数据，在第二个 .weather-current2 中，但只显示第二个。如何从两个不同的位置获取两个温度？
请分享正在编辑的html文档，并更具体地说明坐标是如何设置的。我怀疑问题在于确定位置的方式或更新 DOM 的步骤。请记住，geoip-db 似乎只根据发送请求的 ip 返回一个位置。

【解决方案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>

【讨论】：