Mostrar el clima según la ubicación de los usuarios

5 minutos de lectura

Estoy usando un código que cambia el fondo de mi sitio web de wordpress de acuerdo con la URL de la API de Yahoo que inserté. ¿Hay alguna forma de hacer que muestre automáticamente el clima de los Visitantes sin ninguna base de datos? He pensado en usar la API de Google, pero soy un novato en programación y no sé cómo implementarlo en mi sitio web. ¡Por favor ayuda! El código se puede ver aquí: http://css-tricks.com/using-weather-data-to-change-your-websites-apperance-through-php-and-css/

Sea minucioso porque soy nuevo en PHP ¡Gracias!

avatar de usuario
usuario6299091

Necesitará una API para asignar la dirección IP de los visitantes a la ubicación ( ipapi.co ) y otro para obtener el pronóstico del tiempo para la ubicación ( openweathermap.org ). El siguiente código es para php (lado del servidor):

# Part 1 (get latitude & longitude)
$ip = '1.2.3.4';
$api_1 = 'https://ipapi.co/' . $ip . '/latlong/';
$location = file_get_contents($api_1);
$point = explode(",", $location);

# Part 2 (get weather forecast)
$api_2 = 'http://api.openweathermap.org/data/2.5/weather?lat=" . $point[0] . "&lon=' . $point[1] . '&appid=API_KEY';
$weather = file_get_contents($api_2);

  • También puede obtener un pronóstico extendido $api_3 = 'http://api.openweathermap.org/data/2.5/forecast?lat=' . $point[0] . '&lon=' . $point[1] . '&appid=' . $api_key; $forecast = file_get_contents($api_3);

    – Nicolás Giszpenc

    1 jun 2016 a las 16:34


Esto obtendrá el código postal de un usuario de su dirección IP utilizando el código abierto Servicio de coordenadas IP2 desde el Kit de herramientas de ciencia de datos.

Existen API de ubicación geográfica más precisas, pero esta es absolutamente gratuita y muy fácil de usar. Si estuviera desarrollando esto en un sitio de producción, usaría Geolocalización HTML5 como mi método principal con una alternativa a un mejor geolocalizador de IP, como Mente máxima.

Tenga en cuenta que esto solo funcionará para los usuarios estadounidenses de su sitio. Probablemente debería pasar datos más detallados a una de las otras API de sitios de Yahoo para usar uno de sus WOEID (o elegir una API meteorológica diferente).

Aquí está el código para usted. Pon esto justo después del <?php etiqueta en su código de muestra. Una vez que esté seguro de que funciona, comente todas las líneas que comienzan con print.

//Get the user's IP address
$user_ip = $_SERVER['REMOTE_ADDR'];
//The Data Science Toolkit URL
$url="http://www.datasciencetoolkit.org/ip2coordinates/";
//Find the user's location from their IP. 
//*** You need the get_data function from the sample code
$raw_geocode = json_decode( get_data( $url . $user_ip) );
//Check if the user is in the US
if ('US' === $raw_geocode->$user_ip->country_code) {
  //If yes, store their zip code in a variable, and print it
  $zip_code = $raw_geocode->$user_ip->postal_code;
  printf('<p>Your zip code is: %s</p>', $raw_geocode->$user_ip->postal_code);
} else {
  //If the user isn't in the US, set a sip code that will work.
  $zip_code="97211";
  //and print an error
  printf('<p>Sorry, this app does not work in %s.</p>', $raw_geocode->$user_ip->country_name);
}

//Print the raw data for debugging.
printf('<pre>%s</pre>', print_r($raw_geocode, true));

Ahora cambie la línea en el código de muestra que comienza con $data = a esto:

$data = get_data("http://weather.yahooapis.com/forecastrss?p={$zip_code}&u=f");

  • ¿Qué necesito reemplazar para que este código funcione (o funciona de inmediato)? Lo siento, no tengo acceso a un borrador hasta mañana. muchas gracias por el código y deberías publicar esto en trucos de CSS o algo así; ¡Creo que este es uno de los únicos tutoriales que pueden hacer esto!

    – usuario1373771

    26 de agosto de 2012 a las 2:37

  • ¡¡¡Funciona perfectamente!!! Todo lo que tuve que hacer fue eliminar las partes donde imprimía texto (arruinó mi tema de wp) y funcionó a la perfección. ¿Tienes una página web? ¡Me encantaría agregarle un crédito en el pie de página!

    – usuario1373771

    26 de agosto de 2012 a las 13:39

  • Gracias por los Felicitaciones. Si desea agregar crédito, puede usar getwellgabby.org.

    – cpilko

    26 de agosto de 2012 a las 13:50

  • ¿Hiciste ese sitio web? Es muy bonito.

    – usuario1373771

    26 de agosto de 2012 a las 14:24

  • Lo estoy agregando a mi sitio (que estará listo en un momento). Publicaré un enlace pronto!

    – usuario1373771

    26 de agosto de 2012 a las 14:30

Usando ipinfo.io y OpenWeatherMap

JavaScript:

<script type="text/javascript" src="https://stackoverflow.com/questions/12126295/jquery.simpleopenweather.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $.get("http://ipinfo.io", function (response) {
            $("#weather").attr('data-simpleopenweather-city', response.city).simpleopenweather({template: '<h2>'+'{{temperature}} '+'&deg;'+'C'+'<h2>', units: 'metric'});
        }, "jsonp");
    });
</script>

HTML:

<div id="weather" class="simpleopenweather" data-simpleopenweather-city=""></div>

Mostrará algo así como 6,3 ºC

***You can get data about the location with use third-party API. for example:http://ip-api.com/.**
You get your location weather data from OpenWeatherMap service using the ip-api. its help you to get visitor location weather.*



 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: 'Your-Openweather-Apikey'
        }).done(function(weather) {
          $('#weather').append(weather.main.temp);
            console.log(weather);
        })
    })

HTML:

<div id="weather"> </div>

Muestra la temperatura actual del clima.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad