![](/img/trans.png)
[英]OpenWeather API, How do I pass in response from one response to another call?
[英]How do I get geolocation in openweather API
如何讓 mu openweather API 與地理定位一起使用? 這是我當前的 html 代碼:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type='text/javascript' src='app.js'></script>
</head>
<body>
<div class="jumbotron">
<button onclick="getLocation()">Get my location.</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
<p>The weather outside is: </p>
<div class= "weather">
Oops.. there is no temperature available for your location right now.
</div>
</div>
</body>
</html>
還有我的JavaScript
代碼:
$(document).ready(function(){
$.getJSON( "http://api.openweathermap.org/data/2.5/weather?q=Eindhoven&appid=9334f947893792dcb9b2e2c05ae23eb0", function( data ) {
$('.weather').html(Math.round(data.main.temp-273)+ ' degrees Celcius');
});
});
我讓埃因霍溫市的天氣正常工作,但我希望能夠將其調整為經緯度。 有人可以幫我修復我的代碼嗎? 並幫助我?
我知道它與此鏈接有關:api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon} 但我不知道如何在其中實現我自己的 fount 緯度和經度...
您可以使用第三方 API 獲取有關位置的數據,例如: http : //ip-api.com/
var getIP = 'http://ip-api.com/json/';
$.getJSON(getIP).done(function(location) {
console.log(location)
})
接下來使用我們上面得到的 ip-api 從 OpenWeatherMap 服務獲取 WeatherData
var getIP = 'http://ip-api.com/json/';
var openWeatherMap = 'http://api.openweathermap.org/data/2.5/weather'
$.getJSON(getIP).done(function(location) {
$.getJSON(openWeatherMap, {
lat: location.lat,
lon: location.lon,
units: 'metric',
APPID: 'APIKEY'
}).done(function(weather) {
console.log(weather)
})
})
在這種情況下,攝氏度(公制)
或使用 HTML5 Geolocation API(在 Google Chrome 中僅使用HTTPS
或在localhost
)
var openWeatherMap = 'http://api.openweathermap.org/data/2.5/weather'
if (window.navigator && window.navigator.geolocation) {
window.navigator.geolocation.getCurrentPosition(function(position) {
$.getJSON(openWeatherMap, {
lat: position.coords.latitude,
lon: position.coords.longitude,
units: 'metric',
APPID: 'APIKEY'
}).done(function(weather) {
console.log(weather)
})
})
}
讓我們嘗試一下,我希望這是通過使用 geolacation 和 Openweather API 獲取當前天氣的更好解決方案。 只需傳遞您的 Openweather API Key ,您將獲得一個 json 數組,獲取您的位置和當前天氣。 您還可以使用您想要的天氣圖標。
window.addEventListener("load",() =>{
let long;
let lag;
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition((position) =>{
var lat = position.coords.latitude;
var long = position.coords.longitude;
const proxy = "https://cors-anywhere.herokuapp.com/";
const api = `${proxy}api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=9891731b361e47661f72b06213efbf65`;
fetch(api)
.then((response) =>{
return response.json();
})
.then(data =>{
const {name} = data;
const {feels_like} = data.main;
const {id,main} = data.weather[0];
loc.textContent = name;
climate.textContent = main;
tempValue.textContent = Math.round(feels_like-273);
if(id < 250){
tempIcon.src = './icon/storm.svg'
}
else if(id < 350){
tempIcon.src = './icon/drizzle.svg'
}
else if(id < 550){
tempIcon.src = './icon/rain.svg'
}
else if(id < 650){
tempIcon.src = './icon/snow.svg'
}
else if(id < 800){
tempIcon.src = './icon/atmosphere.svg'
}
else if(id === 800){
tempIcon.src = './icon/clear.svg'
}
else if(id >800){
tempIcon.src = './icon/clouds.svg'
}
console.log(data);
})
})
}
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.