我的天气 API 不起作用？答案

【问题标题】：My Weather API Isn't Working?我的天气 API 不起作用？
【发布时间】：2017-11-10 05:40:29
【问题描述】：

我无法让我的天气 API 在我的网页上显示任何信息。我有我的 API 和地理位置信息，所以我不知道问题出在哪里。提前感谢您的帮助！

在此处查看我的 CodePen：https://codepen.io/IDCoder/full/NwNOgq/

这里是html代码：

<html>
  <title></title>
  <head></head>
  <body>
    <div class="container">
      <div class="About">
      <h2>Your Local Weather App</h2>
      </div>
      <div class="holder">
        <div class = "btn btn-default" id="city">
        </div >
        <div class = "btn btn-default"  id="sky">
        </div>
        <div class = "btn btn-default"  id="windspeed">
        </div>
      </div>
    </div>  
</body>

这是 CSS 代码：

.container{
  text-align: center;
  background: url(https://s1.postimg.org/14i3xf2um7/Hummer-_H1-_Snow-_Turn-_Headlights-1024x768.jpg) no-repeat fixed;
  background-size: cover;
  background-position: center;
  /*background-color: blue;*/
  width: 100%;
  height: 1000px;
  margin: auto;  
}

.About{
  /*background-color: blue;*/
  /*transform: translateY(650%)*/ 
  position: absolute;
    top:35%;
    left: 0;
    right: 0;
    margin: auto;
}

h2{
  color: white;
  font-size: 1.5em;
}

.holder{
  border: 3px;
  background-color: rgba(0, 0, 0, .80);
  width: 45%;
  height: auto;
  position: absolute;
    top:50%;
    left: 0;
    right: 0;
    margin: auto;
  padding:  10px;
  border: 3px solid grey;
  border-radius: 10px;  
}

#city, #sky, #windspeed{
  transform: translateY(9%);
  background-color: #c6c6c4;
  border-bottom:2px inset #FFF;
  border-right:2px inset #FFF;
  border-radius:5px;
  height: 30px;
  width: 90%;
  margin: auto;
  padding-top: 5px ;
}

@media(min-width: 500px){
  .holder{display: grid;
  grid-template-columns: 1fr 1fr 1fr;  
  }
}

最重要的是这里是 jQuery 代码：

$(document).ready(function(){
var lat;
var long;
  $.getJSON("http://ip-api.com/json", function(data){
    lat=data2.lat; 
    long=data2.lon;
      long=position.coords.longitude;
      lat=position.coords.latitude;

    //Create API with geolocation via API url
  var api='http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&appid=b6e4d569d1718b07a44702443dd0ed77';

  $.getJSON(api, function(data){
    var fTemp;
    var cTemp;
    var kTemp;

    //JSON call for Open Weather API
    //alert(data.coord.lat);  

    var weatherType=data.weather[0].description;
      kTemp=data.main.temp;
      var windSpeed=data.wind.speed;
    var city = data.name;

    //Temperature in Kelvin (formula conversion)

    fTemp = (kTemp*(9/5)-459.67).toFixed(1);

    //Temp in Farenheit (formula conversion)
    //City name

    cTemp = (kTemp-273).toFixed(1);
    console.log(city);
    $("#city").html(city);    
    $("#weatherType").html(weatherType);
    $("#fTemp").html(fTemp + "&#8457;");
    $("#fTemp").click(function(){

      if(tempSwap===false){
         $("#fTemp").html(cTemp +"&#8451;");
           tempSwap=true;
           }
           else{
           $("#fTemp").html(cTemp);
             tempSwap=false;
         }


      });

    $("#windSpeed").html(windSpeed);
  });


  });

});

【问题讨论】：

标签： jquery weather-api openweathermap

【解决方案1】：

在 JavaScript 错误控制台中，我发现了以下内容：

⚠️ 阻止加载混合活动内容“http://ip-api.com/json”

codepen.io forces loading over HTTPS。要使用 JavaScript 访问跨域响应，they must also be HTTPS。

很遗憾，ip-api.com 无法通过 HTTPS 访问。（尝试访问 https://ip-api.com 会出错。）如果您希望代码按现在的方式运行，您必须将代码托管在不强制 HTTPS 的不同服务器/服务上，但您也可以尝试一个以下内容：

使用其他 IP→定位服务，该服务通过 HTTPS 工作。
改为使用浏览器Geolocation API 向用户的设备询问他们的位置。无论如何，这往往更准确。

【讨论】：

@Tight，哇！该死！谢谢！让我试试然后回来。