Question

我无法使用我的天气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);
  });


  });

});

Answer 1

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

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

codepen.io forces loading over HTTPS。要使用JavaScript they must also be HTTPS。

访问跨域响应

遗憾的是，无法通过HTTPS访问ip-api.com。（尝试访问https://ip-api.com会出错。）如果您希望代码按原样运行，则必须在不强制HTTPS的其他服务器/服务上托管您的代码，但您也可以尝试以下之一：

使用可通过HTTPS运行的其他IP→位置服务。
使用浏览器Geolocation API向用户的设备询问其位置。无论如何，这往往更准确。

我的天气API不工作？

1 个答案: