154 votes

Obtenir le nom de la ville en utilisant la géolocalisation

J'ai réussi à obtenir la latitude et la longitude de l'utilisateur en utilisant la géolocalisation basée sur HTML.

//Check if browser supports W3C Geolocation API
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} 
//Get latitude and longitude;
function successFunction(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
}

Je veux afficher le nom de la ville, il semble que le seul moyen de l'obtenir soit d'utiliser une API de géolocalisation inverse. J'ai lu la documentation de Google sur la géolocalisation inverse mais je ne sais pas comment obtenir la sortie sur mon site.

Je ne sais pas comment l'utiliser : "http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true" pour afficher le nom de la ville sur la page.

Comment puis-je y parvenir ?

4 votes

Si vous n'utilisez pas les cartes, vous savez que cela va à l'encontre des conditions d'utilisation de Google, n'est-ce pas ? Point 10.4 ici développeurs.google.com/maps/termes Pas d'utilisation du contenu sans une carte Google. À moins que la documentation relative aux API de Google Maps ne vous y autorise expressément, vous n'utiliserez pas le contenu dans une mise en œuvre d'API de Google Maps sans carte Google correspondante. Par exemple, vous pouvez afficher des images Street View sans carte Google correspondante, car la documentation API Maps autorise expressément cette utilisation.

5 votes

Oui, @PirateApp a un bon point. Il existe peut-être de meilleurs services. J'ai travaillé avec SmartyStreets avant et je sais qu'ils ont des conditions de service beaucoup plus ouvertes. La plupart des services ne font pas de géocodage inverse, cependant. Je sais que Texas A&M a un service gratuit mais ils ont TOS avertissant que vous ne pouvez pas collecter des données sur d'autres personnes, et ils ont eu des problèmes de disponibilité et de précision auparavant.

213voto

Michal Points 6572

Vous feriez quelque chose comme ça en utilisant l'API de Google.

Veuillez noter que vous devez inclure la bibliothèque google maps pour que cela fonctionne. Le géocodeur de Google renvoie un grand nombre de composants d'adresse, vous devez donc deviner lequel contiendra la ville.

"zone_administrative_niveau_1" est généralement ce que vous recherchez, mais parfois c'est la localité qui vous intéresse.

Quoi qu'il en soit, vous trouverez de plus amples informations sur les types de réponse de Google dans le document suivant ici et ici .

Vous trouverez ci-dessous le code qui devrait faire l'affaire :

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Reverse Geocoding</title> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  var geocoder;

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} 
//Get the latitude and the longitude;
function successFunction(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    codeLatLng(lat, lng)
}

function errorFunction(){
    alert("Geocoder failed");
}

  function initialize() {
    geocoder = new google.maps.Geocoder();

  }

  function codeLatLng(lat, lng) {

    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
      console.log(results)
        if (results[1]) {
         //formatted address
         alert(results[0].formatted_address)
        //find country name
             for (var i=0; i<results[0].address_components.length; i++) {
            for (var b=0;b<results[0].address_components[i].types.length;b++) {

            //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
                if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                    //this is the object you are looking for
                    city= results[0].address_components[i];
                    break;
                }
            }
        }
        //city data
        alert(city.short_name + " " + city.long_name)

        } else {
          alert("No results found");
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
  }
</script> 
</head> 
<body onload="initialize()"> 

</body> 
</html>

5 votes

Ce n'est pas vrai pour la zone d'administration de niveau 1, parfois le nom de la ville n'est pas présent. - {"long_name"=>"San Francisco", "types"=>["administrative_area_level_2", "political"] , "short_name"=>"San Francisco"}, {"long_name"=>"California", "types"=>["administrative_area_level_1", "political"] , "short_name"=>"CA" }, {"long_name"=>"United States", "types"=>["country", "political"] , "short_name"=>"US"}

5 votes

Pour la V3, la chaîne {'latlng':latlng} doit être remplacée par 'location', comme dans ...geocode({'location':latlng}). Cet exemple m'a presque permis d'y arriver, mais la chaîne 'latlng' ne semble plus être valide dans les apis les plus récents. Voir : developers.google.com/maps/documentation/javascript/ pour les détails.

0 votes

@Michal comment peut-on trouver seulement le nom du pays ou le code du pays au lieu de l'adresse complète ?

68voto

$.ajax({
  url: "https://geolocation-db.com/jsonp",
  jsonpCallback: "callback",
  dataType: "jsonp",
  success: function(location) {
    $('#country').html(location.country_name);
    $('#state').html(location.state);
    $('#city').html(location.city);
    $('#latitude').html(location.latitude);
    $('#longitude').html(location.longitude);
    $('#ip').html(location.IPv4);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div>Country: <span id="country"></span></div>
  <div>State: <span id="state"></span></div>
    <div>City: <span id="city"></span></div>
      <div>Latitude: <span id="latitude"></span></div>
        <div>Longitude: <span id="longitude"></span></div>
          <div>IP: <span id="ip"></span></div>

L'utilisation de la géolocalisation html5 nécessite l'autorisation de l'utilisateur. Dans le cas où vous ne voulez pas cela, optez pour un localisateur externe tel que https://geolocation-db.com IPv6 est supporté. Aucune restriction et demandes illimitées autorisées.

Exemple

Pour un exemple en javascript pur, sans utiliser jQuery, voir ce réponse.

1 votes

Merci beaucoup pour ce trésor @OP. Après avoir passé 1 heure sur SO, c'est le premier lien (geolocation-db.com) que j'ai trouvé où le service supporte un nombre illimité de hits API gratuits par jour.

0 votes

Cela ne fonctionne pas avec la dernière version d'Angular (v12). L'erreur de callback est indéfinie.

0 votes

Il affiche toujours les États-Unis, mais ma position actuelle est Oman.

57voto

Ben Dowling Points 2849

Une autre approche consiste à utiliser mon service, http://ipinfo.io qui renvoie le nom de la ville, de la région et du pays en fonction de l'adresse IP actuelle de l'utilisateur. Voici un exemple simple :

$.get("http://ipinfo.io", function(response) {
    console.log(response.city, response.country);
}, "jsonp");

Voici un exemple plus détaillé de JSFiddle qui imprime également les informations complètes de la réponse, afin que vous puissiez voir tous les détails disponibles : http://jsfiddle.net/zK5FN/2/

26 votes

Pas aussi précis cependant.

4 votes

Impossible de détecter la ville et même le trgion à partir de l'IP d'un grand fournisseur russe :(

2 votes

Lol... cela donne l'ip de mon réseau interne (192.168...)

17voto

Mikhail Points 4485

Vous pouvez obtenir le nom de la ville, du pays, de la rue et d'autres géodonnées en utilisant l'API de géocodage de Google Maps.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
    <script type="text/javascript">
        navigator.geolocation.getCurrentPosition(success, error);

        function success(position) {
            console.log(position.coords.latitude)
            console.log(position.coords.longitude)

            var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';

            $.getJSON(GEOCODING).done(function(location) {
                console.log(location)
            })

        }

        function error(err) {
            console.log(err)
        }
    </script>
</body>
</html>

et d'afficher ces données sur la page en utilisant jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>

    <p>Country: <span id="country"></span></p>
    <p>State: <span id="state"></span></p>
    <p>City: <span id="city"></span></p>
    <p>Address: <span id="address"></span></p>

    <p>Latitude: <span id="latitude"></span></p>
    <p>Longitude: <span id="longitude"></span></p>

    <script type="text/javascript">
        navigator.geolocation.getCurrentPosition(success, error);

        function success(position) {

            var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';

            $.getJSON(GEOCODING).done(function(location) {
                $('#country').html(location.results[0].address_components[5].long_name);
                $('#state').html(location.results[0].address_components[4].long_name);
                $('#city').html(location.results[0].address_components[2].long_name);
                $('#address').html(location.results[0].formatted_address);
                $('#latitude').html(position.coords.latitude);
                $('#longitude').html(position.coords.longitude);
            })

        }

        function error(err) {
            console.log(err)
        }
    </script>
</body>
</html>

16voto

pradeep Points 534

Voici une version mise à jour qui fonctionne pour moi et qui récupère la ville, il semble que certains champs soient modifiés dans la réponse json. Je me réfère aux réponses précédentes pour cette question. ( Merci à Michal & une autre référence : Lien

var geocoder;

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
// Get the latitude and the longitude;
function successFunction(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  codeLatLng(lat, lng);
}

function errorFunction() {
  alert("Geocoder failed");
}

function initialize() {
  geocoder = new google.maps.Geocoder();

}

function codeLatLng(lat, lng) {
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({latLng: latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        var arrAddress = results;
        console.log(results);
        $.each(arrAddress, function(i, address_component) {
          if (address_component.types[0] == "locality") {
            console.log("City: " + address_component.address_components[0].long_name);
            itemLocality = address_component.address_components[0].long_name;
          }
        });
      } else {
        alert("No results found");
      }
    } else {
      alert("Geocoder failed due to: " + status);
    }
  });
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X