我无法使用我的天气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 + "℉");
$("#fTemp").click(function(){
if(tempSwap===false){
$("#fTemp").html(cTemp +"℃");
tempSwap=true;
}
else{
$("#fTemp").html(cTemp);
tempSwap=false;
}
});
$("#windSpeed").html(windSpeed);
});
});
});
答案 0 :(得分:0)
在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的其他服务器/服务上托管您的代码,但您也可以尝试以下之一: