Hola compañeros. Un saludo.
Estoy en un proyecto personal en el que necesito detectar la ubicación del usuario usando la API
Geolocation de HTML5 y, usando jQuery, descargar y mostrar los datos del clima de la ubicación detectada con la API de Wunderground. Uso la geolocalización de HTML5 en vez de la de Wundergound debido a que la de Wunderground es muy imprecisa. El problema es que al hacer la petición de AJAX la URL del archivo JSON no se construye correctamente y se descarga un archivo incorrecto.
¿Podrían, por favor, ayudarme a corregir mi código? No me refiero a que lo hagan por mí, me refiero a que me den sugerencias de cómo debe estar construido y como hacerlo funcionar. Gracias de antemano por su ayuda.
El código es el siguiente:
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;"> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js" type="text/javascript"></script> <div class="tarjeta" id="clima"> <p id="wlocation" class="trjtenc">Detectando ubicación...
</p> <p id="consultado">Cargando datos del clima...
</p> <img id="imgpronostico" src="images/loading.gif" class="tarjetaimg" alt="Ícono del clima actual"> <script type="text/javascript"> jQuery(document).ready(function($) {
var KEY = "a701d0d2314662c6";
var urlpath, wlat, wlong;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getLocation);
}
else {
urlpath = "geolookup/conditions/lang:SP/q/autoip.json";
}
function getLocation(position) {
wlat = position.coords.latitude;
wlong = position.coords.longitude;
urlpath = "geolookup/lang:SP/q/" + wlat + "," + wlong ;
$('#consultado').html(urlpath); //Comprobación de que la URL contiene las coordenadas
}
if (KEY != "a701d0d2314662c6")
{
$.ajax({
url: "http://api.wunderground.com/api/" + KEY + "/" + urlpath + ".json",
async: false,
dataType: "jsonp",
timeout: 4000,
success: function(parsed_json) {
var localz = parsed_json['current_observation']['display_location']['full'].toString();
var temp_c = parsed_json['current_observation']['temp_c'].toString();
var viento = parsed_json['current_observation']['wind_kph'].toString();
var lluvia = parsed_json['current_observation']['precip_today_metric'].toString();
var humedw = parsed_json['current_observation']['relative_humidity'].toString();
var iconow = parsed_json['current_observation']['icon'].toString();
var consultw = parsed_json['current_observation']['observation_time'].toString();
$('#wlocation').html(localz);
$('#imgpronostico').attr('src', "images/icons/" + iconow + ".png");
$('#pronostico').html("
<strong>Temperatura:
</strong> " + temp_c.replace(".",",") + "
<sup>º C
</sup>");
$('#viento').html("
<strong>Viento:
</strong> " + viento + " Km/h");
$('#consultado').html(consultw.replace("Last Updated on","
<strong>Última actualización:
</strong>") + " url: " + urlpath);
$('#wlocation').css("font-weight","bold");
},
error: function(request, status, err) {
if (status == "timeout") {
$('#wlocation').html("Localización no determinada");
$('#consultado').html("La información no se pudo obtener. Revise su conexión y reintente más tarde.");
$('#imgpronostico').attr('src', "http://t3.gstatic.com/images?q=tbn:ANd9GcQzl8g-SPI029d0EUZqW_oFPS8HqQ1yVMTBRZcLzulc51WIEIPn");
} else {
$('#wlocation').html("Error: " + request + status + err);
}
}
});
}
else
document.writeln("Error fatal al obtener el clima");
});
Más información de la API de Wunderground:
http://espanol.wunderground.com/weather/api/d/docs?d=data/geolookup
Mostrar Mensajes
