web-dev-qa-db-fra.com

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 html5.

//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 la seule façon de l'obtenir est d'utiliser une api de géolocalisation inversée. Je lis la documentation de Google sur la géolocalisation inversée, mais je ne sais pas comment obtenir la sortie sur mon site.

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

Quel est le moyen standard de le faire?

javascripthtml5geolocation
128
lisovaccaro

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

Notez 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 des deux portera la ville.

"administrative_area_level_1" est généralement ce que vous recherchez, mais parfois la localité correspond à la ville que vous recherchez.

Quoi qu'il en soit, on peut trouver plus de détails sur les types de réponses Google ici et ici .

Voici 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>
195
Michal

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 de réponse complètes afin que vous puissiez voir tous les détails disponibles: http://jsfiddle.net/zK5FN/2/

52
Ben Dowling
$.ajax({
  url: "https://geoip-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>State: <span id="state"></span>
    <div>City: <span id="city"></span>
      <div>Latitude: <span id="latitude"></span>
        <div>Longitude: <span id="longitude"></span>
          <div>IP: <span id="ip"></span>

L'utilisation de la géolocalisation html5 nécessite l'autorisation de l'utilisateur. Si vous ne le souhaitez pas, optez pour un localisateur externe tel que https://geoip-db.com IPv6 est pris en charge. Aucune restriction et demandes illimitées autorisées.

Exemple

Pour un exemple pur en JavaScript, sans utiliser jQuery, consultez this answer.

44
Kurt Van den Branden

Vous pouvez obtenir le nom de la ville, du pays, le nom de la rue et d'autres données géographiques à l'aide de 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 pour afficher ces données sur la page à l'aide de 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>
16
Mikhail

Voici une version de travail mise à jour pour moi qui obtiendra Ville/Ville. Il semble que certains champs soient modifiés dans la réponse JSON. Référer les réponses précédentes pour ces questions. (Merci à Michal et à une autre référence: Link

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);
    }
  });
}
15
Pradeep

geolocator.js peut le faire. (Je suis l'auteur).

Obtenir le nom de la ville (adresse limitée) 

geolocator.locateByIP(options, function (err, location) {
    console.log(location.address.city);
});

Obtenir les informations d'adresse complètes

L'exemple ci-dessous va d'abord essayer HTML5 API de géolocalisation pour obtenir les coordonnées exactes. En cas d'échec ou de rejet, la recherche par Geo-IP est effectuée. Une fois qu'il aura obtenu les coordonnées, il procédera à un géocodage inversé en une adresse.

var options = {
    enableHighAccuracy: true,
    fallbackToIP: true, // fallback to IP if Geolocation fails or rejected
    addressLookup: true
};
geolocator.locate(options, function (err, location) {
    console.log(location.address.city);
});

Ceci utilise les API Google en interne (pour la recherche d'adresse). Donc, avant cet appel, vous devez configurer geolocator avec votre clé API Google.

geolocator.config({
    language: "en",
    google: {
        version: "3",
        key: "YOUR-GOOGLE-API-KEY"
    }
});

Geolocator prend en charge la géolocalisation (via des recherches au format HTML5 ou IP), le géocodage, la recherche d'adresses (géocodage inversé), la distance & durées, informations de fuseau horaire et beaucoup plus de fonctionnalités ...

10
Onur Yıldırım

Après quelques recherches et assemblages de différentes solutions avec mes propres outils, je suis arrivé à cette fonction:

function parse_place(place)
{
    var location = [];

    for (var ac = 0; ac < place.address_components.length; ac++)
    {
        var component = place.address_components[ac];

        switch(component.types[0])
        {
            case 'locality':
                location['city'] = component.long_name;
                break;
            case 'administrative_area_level_1':
                location['state'] = component.long_name;
                break;
            case 'country':
                location['country'] = component.long_name;
                break;
        }
    };

    return location;
}
6
Jafo

Vous pouvez utiliser https://ip-api.io/ pour obtenir le nom de la ville. Il supporte IPv6.

En prime, il permet de vérifier si l'adresse IP est un nœud tor, un proxy public ou un spammeur.

Code Javascript:

$(document).ready(function () {
        $('#btnGetIpDetail').click(function () {
            if ($('#txtIP').val() == '') {
                alert('IP address is reqired');
                return false;
            }
            $.getJSON("http://ip-api.io/json/" + $('#txtIP').val(),
                 function (result) {
                     alert('City Name: ' + result.city)
                     console.log(result);
                 });
        });
    });

Code HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div>
    <input type="text" id="txtIP" />
    <button id="btnGetIpDetail">Get Location of IP</button>
</div>

Sortie JSON

{
    "ip": "64.30.228.118",
    "country_code": "US",
    "country_name": "United States",
    "region_code": "FL",
    "region_name": "Florida",
    "city": "Fort Lauderdale",
    "Zip_code": "33309",
    "time_zone": "America/New_York",
    "latitude": 26.1882,
    "longitude": -80.1711,
    "metro_code": 528,
    "suspicious_factors": {
        "is_proxy": false,
        "is_tor_node": false,
        "is_spam": false,
        "is_suspicious": false
    }
}
3
Vindhyachal Kumar

Comme @PirateApp l'a mentionné dans son commentaire, l'utilisation de l'API Google Maps comme vous le souhaitez par rapport à la licence de Google Maps API.

Vous avez plusieurs possibilités, notamment de télécharger une base de données Geoip et de l'interroger localement ou d'utiliser un service API tiers, tel que mon service ipdata.co .

ipdata vous donne la géolocalisation, l'organisation, la devise, le fuseau horaire, le code d'appel, l'indicateur et les données de sortie Tor Exit Node de toute adresse IPv4 ou IPv6.

Et est extensible avec 10 points de terminaison globaux, chacun capable de traiter plus de 10 000 requêtes par seconde!

Cette réponse utilise une clé d'API 'test' très limitée et destinée uniquement à tester quelques appels. Inscrivez-vous pour votre propre clé API gratuite et recevez jusqu'à 1500 demandes de développement par jour.

$.get("https://api.ipdata.co?api-key=test", function(response) {
  $("#ip").html("IP: " + response.ip);
  $("#city").html(response.city + ", " + response.region);
  $("#response").html(JSON.stringify(response, null, 4));
}, "jsonp");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><a href="https://ipdata.co">ipdata.co</a> - IP geolocation API</h1>

<div id="ip"></div>
<div id="city"></div>
<pre id="response"></pre>

Le violon https://jsfiddle.net/ipdata/6wtf0q4g/922/

1
Jonathan

En voici un autre exemple. Ajouter plus à la réponse acceptée peut-être plus complète .. bien sûr, changer de boîtier le rendra élégant.

function parseGeoLocationResults(result) {
    const parsedResult = {}
    const {address_components} = result;

    for (var i = 0; i < address_components.length; i++) {
        for (var b = 0; b < address_components[i].types.length; b++) {
            if (address_components[i].types[b] == "street_number") {
                //this is the object you are looking for
                parsedResult.street_number = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "route") {
                //this is the object you are looking for
                parsedResult.street_name = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "sublocality_level_1") {
                //this is the object you are looking for
                parsedResult.sublocality_level_1 = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "sublocality_level_2") {
                //this is the object you are looking for
                parsedResult.sublocality_level_2 = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "sublocality_level_3") {
                //this is the object you are looking for
                parsedResult.sublocality_level_3 = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "neighborhood") {
                //this is the object you are looking for
                parsedResult.neighborhood = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "locality") {
                //this is the object you are looking for
                parsedResult.city = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "administrative_area_level_1") {
                //this is the object you are looking for
                parsedResult.state = address_components[i].long_name;
                break;
            }

            else if (address_components[i].types[b] == "postal_code") {
                //this is the object you are looking for
                parsedResult.Zip = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "country") {
                //this is the object you are looking for
                parsedResult.country = address_components[i].long_name;
                break;
            }
        }
    }
    return parsedResult;
}
1
user3124360