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:
Código
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;"> </head> <body> <div id="contenedor"> <div class="tarjeta" id="clima"> <div id="climacnt"> <img id="imgpronostico" src="images/loading.gif" class="tarjetaimg" alt="Ícono del clima actual"> <div id="detallew"> </div> </div> </div> </div> <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"); $('#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"); }); </script> </body> </html>
Más información de la API de Wunderground: http://espanol.wunderground.com/weather/api/d/docs?d=data/geolookup