javascript - openweathermaps - ¿Cómo obtengo la geolocalización en la API de openweather?
openweathermap rain (1)
Puede obtener datos sobre la ubicación con el uso de una API de terceros, por ejemplo: http://ip-api.com/
var getIP = ''http://ip-api.com/json/'';
$.getJSON(getIP).done(function(location) {
console.log(location)
})
Luego obtenga WeatherData del servicio OpenWeatherMap usando el ip-api que obtuvimos arriba
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)
})
})
En este caso, la temperatura celsius (métrica)
O usando la API de geolocalización HTML5 (en Google Chrome solo funciona con HTTPS o 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)
})
})
}
¿Cómo consigo la API mu openweather para trabajar con geolocalización? Este es mi código html actual:
<!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>
Y mi código de 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'');
});
});
Tengo el clima en la ciudad de Eindhoven funcionando, pero quiero poder ajustarlo a la latitud y a la longitud. ¿Alguien puede arreglar mi código para mí? ¿Y ayudarme?
Sé que tiene algo que ver con este enlace: api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon} pero no sé cómo implementar mi propia latitud y longitud de fuente en ella ...