Obtenir le nom de la ville à l'aide de géolocalisation

J'ai réussi à obtenir à l'utilisateur de la latitude et de la longitude à l'aide de 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 le faire est d'utiliser un reverse de l'api de géolocalisation. J'ai lu de google documents pour inverser la géolocalisation, mais je ne sais pas comment pour obtenir le résultat sur mon site.

Je ne sais pas comment aller de l'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.

Ce qui est le standard de la façon de le faire?

Si vous n'envisagez pas d'utiliser les cartes, vous SAVEZ que c'est à l'encontre de Google de service de droit? Point 10.4 ici developers.google.com/maps/terms Pas d'utilisation de Contenu sans une carte Google map. À moins que les Maps Api Documentation expressément vous le permet, vous ne pourrez pas utiliser le Contenu dans un Maps API de mise en Œuvre sans un correspondant de Google map. Par exemple, vous pouvez afficher des images Street View sans carte de Google, parce que les Maps Api Documentation autorise expressément cette utilisation.
Oui, @PirateApp a un bon point. Il peut y avoir de meilleurs services. J'ai travaillé avec SmartyStreets avant et je sais qu'ils ont beaucoup plus ouvert Termes de Service. La plupart de ces services ne font pas le géocodage inversé, cependant. Je sais que la Texas A&M est un service gratuit mais ils ont CGU avertissement que vous ne pouvez pas collecter des données sur d'autres personnes, et ils ont eu le temps de disponibilité et la précision des questions de avant de.

InformationsquelleAutor lisovaccaro | 2011-07-23

194

Vous ferais quelque chose comme ça à l'aide de l'API Google.

Veuillez noter que vous devez inclure les cartes google maps de la bibliothèque pour que cela fonctionne. Google geocoder renvoie un grand nombre de composantes de l'adresse si vous devez faire une supposition éclairée quant à qui on aura la ville.

"administrative_area_level_1" est généralement ce que vous cherchez, mais parfois localité est de la ville, vous êtes après.

De toute façon - plus de détails sur google types de réponse peuvent être trouvés ici et ici.

Ci-dessous est 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> 
```
- Pas le cas pour la zone d'administration de niveau 1, parfois, le nom de la ville n'y est pas. - {"long_name"=>"San Francisco", "type"=>["administrative_area_level_2", "politique"] , "short_name"=>"San Francisco"}, {"long_name"=>"la Californie", "type"=>["administrative_area_level_1", "politique"], "short_name"=>"CA" }, {"long_name"=>"États-unis", "types"=>["pays", "politique"], "short_name"=>"NOUS"}
- C'est pourquoi j'ai dit que c'est une supposition..
- Pour la V3, la {'latlng':latlng} chaîne doit être changé de "localisation", comme dans ...de géocodage ({"localisation": latlng}). Cet exemple m'a presque là, mais le "latlng" chaîne ne semble plus être valable dans de nouvelles api. Voir: developers.google.com/maps/documentation/javascript/... pour les détails.
- comment pouvons-nous trouver seul pays nom ou le code du pays au lieu de l'adresse complète?
- dans l'instruction if test du "pays" et la ville de la variable sera de retour les données des pays. Si rebaptise le pays = résultats[0].address_components[i] vous pouvez accéder aux données par pays.long_name et le pays.short_name
- Est-il un moyen pour limiter cette baisse à des villes à l'intérieur d'une province ou tout simplement pour vérifier si l'emplacement est de la province en particulier, et si c'est l'utilisateur obtient redirigé vers une page web spécifique?
InformationsquelleAutor Michal
52

Une autre approche est d'utiliser mon service, http://ipinfo.io, qui renvoie la la ville, la région et le pays à partir du nom de l'utilisateur actuel de l'adresse IP. Voici un exemple simple:
```
$.get("http://ipinfo.io", function(response) {
console.log(response.city, response.country);
}, "jsonp");
```
Voici une vue plus détaillée de JSFiddle exemple qui imprime aussi la réponse complète de l'information, de sorte que vous pouvez voir tous les détails disponibles: http://jsfiddle.net/zK5FN/2/
- Pas exactes cependant.
- N'a pas pu détecter la ville et même trgion de propriété intellectuelle d'un grand russe fournisseur de : (
- Lol... cela donne mon ip de réseau interne (192.168...)
- Puis-je le faire à partir d'un périphérique(ordinateur de poche) navigateur?
- Ne semble pas fonctionner pour moi.
- Ne semble pas fiable. Je suis à l'aide d'un ordinateur portable et un téléphone mobile à l'instant. Les villes apparaissent à la fois les périphériques par l'intermédiaire d'ipinfo.io sont de 530 kilomètres les uns des autres!
InformationsquelleAutor Ben Dowling

JS:

$.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);
}
});

HTML:

<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'aide de géolocalisation html5 nécessite l'autorisation de l'utilisateur. Dans le cas où vous ne voulez pas cela, optez pour un externe locator comme https://geoip-db.com IPv6 est pris en charge. Pas de restrictions et un nombre illimité de demandes de permis.

JSON: https://geoip-db.com/json
JSONP: https://geoip-db.com/jsonp

Exemple

Pour un pur exemple en javascript, sans l'aide de jQuery, découvrez cette réponse.

InformationsquelleAutor Kurt Van den Branden

Ici est mis à jour en version de travail pour moi qui permettront à la Ville, Il semble que certains champs sont modifiés dans la réponse json. Se référant précédentes réponses à cette questions. ( Merci à Michal & encore une 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);
}
});
}

InformationsquelleAutor Pradeep

Vous pouvez obtenir le nom de la ville, le pays, nom de rue et d'autres données géographiques à l'aide de Google Maps API de Géocodage

<!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 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>

InformationsquelleAutor Mikhail

10

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

Obtenir Le Nom De La Ville (Limité Adresse)
```
geolocator.locateByIP(options, function (err, location) {
console.log(location.address.city);
});
```
Obtenir L'Adresse Complète De L'Information

Exemple ci-dessous va d'abord essayer de Géolocalisation HTML5 API pour obtenir les coordonnées exactes. Si échoue ou rejetée, elle se replie sur Geo-IP look-up. Une fois qu'il obtient les coordonnées, il sera inverse de géocodage les coordonnées dans 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);
});
```
Utilise cette Api Google 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éo-localisation (via HTML5 IP ou de recherches), de géocodage d'adresses (look-up (géocodage inversé), la distance & des durées, des informations de fuseau horaire et beaucoup plus de fonctionnalités...

InformationsquelleAutor Onur Yıldırım

Après quelques recherches et reconstituer un couple de différentes solutions avec mes propres trucs, je suis venu avec 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;
}

InformationsquelleAutor Jafo

Vous pouvez utiliser https://ip-api.io/ pour obtenir le Nom de la ville. Il prend en charge IPv6.

Comme un bonus, il permet de vérifier si l'adresse ip est un nœud tor, public proxy 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
}
}

InformationsquelleAutor Vindhyachal Kumar

Voici un autre aller à elle .. en Ajoutant plus à la accepté de répondre peut-être plus complet .. et bien sûr, de cas de commutateur rendra l'air élégante.

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;
}

InformationsquelleAutor user3124360

1

Comme @PirateApp mentionné dans son commentaire, il est explicitement à l'encontre de Google Maps API de Licence pour utiliser l'API des Cartes comme vous le souhaitez.

Vous avez un certain nombre de solutions de rechange, y compris le téléchargement d'un Geoip base de données et l'interrogation localement ou à l'aide d'un tiers de service API, comme mon service ipdata.co.

ipdata vous donne la géolocalisation, l'organisation, la monnaie, le fuseau horaire, le code appelant, du pavillon et de l'état du Nœud de Sortie Tor de données à partir de n'importe quel adresse IPv4 ou IPv6.

Et est évolutive avec 10 points de terminaison de chaque mesure de gérer >10 000 demandes par seconde!

Cette réponse utilise un "test" Clé API qui est très limitée et uniquement pour des tests quelques appels. Inscrivez-vous pour votre propre Libre de la Clé API et obtenir jusqu'à 1500 demandes quotidiennes pour le développement.

JS:
```
$.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");
```
HTML:
```
<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/

InformationsquelleAutor Jonathan

Vous devez vous connecter pour publier un commentaire.