18041 sujets

Questions générales et questions de débutants

[Résolu] API ip2Location - Récuper nom ville

Bonjour à tous,
avec l'API "ip2location.io" (après avoir créé mon compte et ma clef API), je souhaite pouvoir récupérer le nom de la ville de mon visiteur de site et l'afficher.

Avec cette url :
https://api.ip2location.io/?key=XXXXXXXXXXXXXXXXXXXXXXXXXXX&format=json
cela me répond correctement :

{"ip":"xxx.xxx.xxx.xxx","country_code":"FR","country_name":"France","region_name":"Provence-Alpes-Cote-d'Azur","city_name":"Marseille","latitude":43.29695,"longitude":5.38107,"zip_code":"13942","time_zone":"+02:00","asn":"15557","as":"Societe Francaise du Radiotelephone - SFR SA","is_proxy":false}

Cependant cela ne s'affiche pas sur ma page HTML, dont voici son contenu :

<!--Géolocalisation-->
<h1 class="ville">Nom de la ville visiteur</h1>
<script>
const apiUrl = "https://api.ip2location.io/?key=XXXXXXXXXXXXXXXXXXXXXXXXXXX&format=json";
async function checkGeo (){
const response = await fetch(apiUrl);
var data = await response.json();
console.log(data);
document.querySelector(".ville").innerHTML = "Nom de la ville : " + data.city_name;
checkGeo ();
</script>

Si une personne peux m'aider , m'orienter, je suis preneur mais surtout reconnaissant.

Par avance, merci.

Bien à vous.
Daniel
Salut,

quand tu postes du code sur le forum il faudrait que tu utilises les balises qui vont bien pour encadrer ton code (pour faciliter la lecture).

A priori il te manque l'accolade fermante pour ta fonction checkGeo
Bonjour Matthieuu, merci pour ton retour.

Désolé pour la présentation et l’accolade n'est pas manquante dans mon code mais lors de mon copier/coller je ne l'ai pas sélectionné (ce qui es une erreur).

Mon but est de pouvoir récupérer ce nom de ville du visiteur de mon site famillial afin d'afficher la météo local de ce dernier.

Cette dernière opération est fonctionnelle, à partir de l'API "openwheater" (récup info en fichier JSON) avec pour l'instant le nom de la ville fixe.

SI tu as une idées je suis preneur et dans tout les cas merci.

Bien à toi.
Daniel, un débutant
Modérateur
Salut,

Mathieuu a écrit :


quand tu postes du code sur le forum il faudrait que tu utilises les balises qui vont bien pour encadrer ton code (pour faciliter la lecture).


+1 et merci d'éditer ton message initial afin que la lecture soit plus simple.


Avec api2location, impossible de s'inscrire. Hier soir, j'avais essayé. Mais sans succès.

Bref, en passant par un autre service et en indiquant une ipv6, ça fonctionne bien. Avec ce service et avec une ipv4, ça m'indique un endroit à plus de 10 km de chez moi : 

<?php 
    $ip_user = "l'ip V6 de l'utilisateur";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <p class="result">votre ville <span>xxxx</span></p>
    <script>
        (()=>{
            let url = 'http://ip-api.com/json/<?= $ip_user ?>',
                $span_result = document.querySelector('.result span');
                
            fetch(url).then(resp => resp.json()).then(d => $span_result.textContent = d.city)
        })()
    </script>
</body>
</html>

Modifié par niuxe (06 Jul 2023 - 11:02)
Bonjour NIUXE et merci pour ton retour.
En appliquant à la lettre tes recommandations cela ne fct pas de mon coté.

En cherchant sur le net je suis tomber sur ces lignes de codes qui fonctionnent :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Info visiteur</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
</head>
<body>
<table border = "1" cellpadding = "2">
  <tr>
    <td>IP Address</td>
    <td id = "ip"></td>
  </tr>
  <tr>
    <td>City</td>
    <td id = "city"></td>
    </tr>
</table>
<script type="text/javascript">
      $.getJSON('https://ipapi.co/json/', function(data){
        $("#ip").text(data.ip);

        $('#city').text(data.city);

      })
    </script>
</body>
</html>


Maintenant comment récupérer le nom de la ville et l'intégrer à mon autre API de météo "OpenWeaher" pour afficher la météo local du visiteur de mon site familial (les éléments ci-dessous sont opérationnels) :


<!--Affichage météo-->
<center>
  <h1 class="city">New York</h1>
  <img src="" alt="" class="weather-icon">
  <h1 class="temp">22°C</h1>
  <p class="description"> Ciel clair</p>
  <div class="col">
    <p class="humidity">50%</p>
    <p class="wind">15 km/h</p>
  </div>
</center>
<script>
  const apiKey = "MyApiKey";    
  const apiUrl2 = "https://api.openweathermap.org/data/2.5/weather?units=metric&lang=fr";
    const weatherIcon = document.querySelector(".weather-icon");
  async function checkWeather (){                                
    const response = await fetch(apiUrl2 + `&appid=${apiKey}`+ '&q=[b]marseille[/b]');
    var data = await response.json();  
    console.log(data); 
    document.querySelector(".city").innerHTML = data.name;
    document.querySelector(".temp").innerHTML = Math.round (data.main.temp)  + " °c" ;
    document.querySelector(".description").innerHTML = "Description : " + data.weather[0].description; 
    document.querySelector(".humidity").innerHTML = "Humidité : " + Math.round (data.main.humidity) + " %" ;
    document.querySelector(".wind").innerHTML = "Vitesse du vent : " + Math.round (data.wind.speed) + " km/h" ;
      
     if(data.weather[0].main == "Clouds"){
          weatherIcon.src = "img/weather/clouds.png";
      }
      else if (data.weather[0].main == "Clear"){
          weatherIcon.src = "img/weather/clear.png";
      }
        else if (data.weather[0].main == "Rain"){
          weatherIcon.src = "img/weather/rain.png";
      }
        else if (data.weather[0].main == "Drizzle"){
          weatherIcon.src = "img/weather/drizzle.png";
      }
        else if (data.weather[0].main == "Mist"){
          weatherIcon.src = "img/weather/mist.png";
      } 
        else if (data.weather[0].main == "Thunderstorm"){
          weatherIcon.src = "img/weather/Thunderstorm.png";
      }
        else if (data.weather[0].main == "Snow"){
          weatherIcon.src = "img/weather/snow.png";
      }
        else if (data.weather[0].main == "Fog"){
          weatherIcon.src = "img/weather/fog.png";
      }  
      
  }
    checkWeather ();  
    
</script>


Je "galère " depuis plusieurs jours, par un manque de connaissance bien sur, car ces différents éléments ont été glanés sur le Web et je ne sais pas comment assembler les deux pour qu'ils répondent à mon attente?

Par avance merci.

Bien à toi.
Daniel.

PS : tu as raison avec cette mise en forme cela est plus lisible
Modérateur
Là, je suis sur ma session windows et donc, quasiment rien est installé. Aussi, je n'ai pas de clef api openweather. À moins que tu me files ta clef api via un message privé, je ne pourrais pas tellement t'aider. Ce que je remarque, c'est ça : 

...
[b]marseille[/b]
...


Je ne suis pas sûr que ça soit correct ce bbcode dans ta querystring

Je remarque que tu mélanges simple guillemet et guillemet arrière. Or, tu peux faire plus simple et plus cohérent.
Modifié par niuxe (07 Jul 2023 - 01:29)
Modérateur
J'ai bien reçu ton mp. Voici ma réponse :

html (je trouve ça moyen le <center>) : 

<center>
    <h1 class="city">New York</h1>
    <img src="" alt="" class="weather-icon">
    <h1 class="temp">22°C</h1>
    <p class="description"> Ciel clair</p>
    <div class="col">
        <p class="humidity">50%</p>
        <p class="wind">15 km/h</p>
    </div>
</center>


js : 

(()=>{
    let url = 'https://ipapi.co/json/';
    fetch(url).then(resp => resp.json()).then(data_ipapi =>{
        let apiKey = "API__KEY";    
        let apiUrl2 = "https://api.openweathermap.org/data/2.5/weather?units=metric&lang=fr";

        url = `${apiUrl2}&appid=${apiKey}&q=${data_ipapi.city}`;
        fetch(url).then(resp => resp.json()).then(data =>{
            //console.log(data); 
            document.querySelector(".city").innerHTML = data.name;
            document.querySelector(".temp").innerHTML = `${Math.round (data.main.temp)} °c`;
            document.querySelector(".description").innerHTML = `Description : ${data.weather[0].description}`; 
            document.querySelector(".humidity").innerHTML = `Humidité : ${Math.round (data.main.humidity)} %`;
            document.querySelector(".wind").innerHTML = `Vitesse du vent : ${Math.round (data.wind.speed)} km/h`;
            document.querySelector(".weather-icon").src = `img/weather/${data.weather[0].main.toLowerCase()}.png`;
        });
    });
})()


edit: j'ai fait en sorte que ça fonctionne. Ce n'est pas extra, mais ça fonctionne. À toi de l'améliorer
Modifié par niuxe (07 Jul 2023 - 17:23)
Meilleure solution
Encore une fois merci pour ta précieuse collaboration, dont upload/1688905889-85695-accueil.jpg voici un aperçu....
Modifié par Dankenobi (09 Jul 2023 - 14:31)
Prévenir un modérateur
Répondre au sujet
Aller à