web-dev-qa-db-fra.com

Trouver l'emplacement de l'utilisateur à l'aide de jQuery/JS (sans l'API de géolocalisation de Google)?

Existe-t-il un moyen de rechercher un site client sur un site Web à l'aide de jQuery? Par exemple, si un utilisateur vient sur mon site, comment puis-je savoir quel est leur emplacement approximatif en utilisant jQuery? Par exemple, si un utilisateur venait de San Francisco CA, il aurait un identifiant de type pour me faire savoir que l'utilisateur venait de San Francisco CA. Je n’aurais pas vraiment besoin de leur emplacement exact, mais seulement du comté ou de la région d’origine.

edit: Comment les informations sur http://flourishworks-webutils.appspot.com/req sont-elles générées?

Merci

javascriptjqueryunobtrusive-javascript
28
user1530249

Pour obtenir l'adresse IP du client et le nom du pays dans jQuery:

$.getJSON("http://freegeoip.net/json/", function(data) {
    var country_code = data.country_code;
    var country = data.country_name;
    var ip = data.ip;
    var time_zone = data.time_zone;
    var latitude = data.latitude;
    var longitude = data.longitude;

    alert("Country Code: " + country_code);
    alert("Country Name: " + country);
    alert("IP: " + ip); 
    alert("Time Zone: " + time_zone);
    alert("Latitude: " + latitude);
    alert("Longitude: " + longitude);   
});


$.get("http://freegeoip.net/json/", function (response) {
    $("#ip").html("IP: " + response.ip);
    $("#address").html("Location: " + response.city + ", " + response.region_name);
    $("#details").html(JSON.stringify(response, null, 4));
}, "jsonp");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Client side IP geolocation using <a href="http://freegeoip.net">freegeoip.net</a></h3>

<hr/>
<div id="ip"></div>
<div id="address"></div>
<hr/>Full response: <pre id="details"></pre>

40
Durgesh Pandey

Vous pouvez utiliser un service Web prenant en charge JSONP, tel que mon service http://ipinfo.io . Il vous fournira l'adresse IP, le nom d'hôte, les informations de géolocalisation et le propriétaire du réseau du client. En voici un exemple en action avec jQuery:

$.get("http://ipinfo.io", function(response) {
    $("#ip").html(response.ip);
    $("#address").html(response.city + ", " + response.region);
}, "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/

23
Ben Dowling

L'API HTML5 de géolocalisation vous permet d'obtenir la latitude/longitude d'un utilisateur avec du JavaScript (si le navigateur est compatible et si l'utilisateur autorise l'accès à son emplacement).

Vous pouvez ensuite inverser le géocodage l'emplacement pour obtenir une adresse. Il existe plusieurs inversement gratuits du géocodage inversé services autres que l'API de Google.

Cependant, si vous n'avez pas besoin d'une localisation précise et si vous voulez que tous vos utilisateurs profitent de la fonctionnalité (quel que soit le navigateur), et si vous ne voulez pas leur demander s'ils autorisent votre site à avoir leur localisation , Je recommanderais de utiliser l'IP de votre utilisateur pour obtenir l'emplacement .

13
Julien

J'ai créé le fichier ipdata.co API afin de fournir une solution solide à ce problème (voir ci-dessous). Il renvoie de nombreux points de données utiles, tels que - emplacement: pays (nom et code), région, ville, etc., commerce électronique - code_monnaie, symbole monétaire, fuseau horaire, données de l'opérateur mobile et détection si l'adresse IP est un proxy ou un utilisateur Tor .

Ipdata dispose de 10 points de terminaison globaux, chacun pouvant traiter plus de 10 000 demandes 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>

Voir le violon sur https://jsfiddle.net/ipdata/6wtf0q4g/922/

7
Jonathan
**jQuery(document).ready(function($) {
    jQuery.getScript('http://www.geoplugin.net/javascript.gp', function()
{
    var country = geoplugin_countryName();
    var zone = geoplugin_region();
    var district = geoplugin_city();
    console.log("Your location is: " + country + ", " + zone + ", " + district);
});
});
<script language="JavaScript" src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
    alert("Your location is: " + geoplugin_countryName() + ", " + geoplugin_region() + ", " + geoplugin_city());
});
</script>
/*--------------------------------detailed function list not necessarily to be included---------
function geoplugin_city() { return 'Dobroyd Point';}
function geoplugin_region() { return 'New South Wales';}
function geoplugin_regionCode() { return '02';}
function geoplugin_regionName() { return 'New South Wales';}
function geoplugin_areaCode() { return '0';}
function geoplugin_dmaCode() { return '0';}
function geoplugin_countryCode() { return 'AU';}
function geoplugin_countryName() { return 'Australia';}
function geoplugin_continentCode() { return 'OC';}
function geoplugin_latitude() { return '-33.873600';}
function geoplugin_longitude() { return '151.144699';}
function geoplugin_currencyCode() { return 'AUD';}
function geoplugin_currencySymbol() { return '&amp;#36;';}
function geoplugin_currencyConverter(amt, symbol) {
    if (!amt) { return false; }
    var converted = amt * 0.9587170632;
    if (converted &lt;0) { return false; }
    if (symbol === false) { return Math.round(converted * 100)/100; }
    else { return '&amp;#36;'+(Math.round(converted * 100)/100);}
    return false;
} 
*/
//----------------example-----------------------//
<html>
 <head>
  <script language="JavaScript" src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script>
 </head>
 <body>
  <script language="Javascript">
    document.write("Welcome to our visitors from "+geoplugin_city()+", "+geoplugin_countryName());
  </script>
 </body>
</html>
3
Ashutosh Tiwari

Toute option côté client n’est pas une bonne idée, car elle est fournie par l’ordinateur sur la base des réseaux sans fil existants. Je parie que 90% des utilisateurs d’ordinateurs de bureau n’ont pas activé cette fonctionnalité. Lorsque vous arrivez sur un site Web qui souhaite votre emplacement, vous devez cliquer sur un bouton pour accepter. S'ils viennent juste d'accéder à votre site Web, ils veulent d'abord savoir pourquoi vous avez besoin de leur emplacement. 

Un bon moyen est de leur montrer une page pour leur expliquer pourquoi vous avez besoin de leur emplacement et que vous ne l'utiliserez jamais à d'autres fins que celle spécifiée. 

Si un script exécute côté serveur, il existe une connexion du client au serveur. Dans ce cas, le serveur doit connaître l'adresse IP. Il y a une astuce que vous pouvez faire pour obtenir l'adresse IP en premier. 

Faire un script php sur votre serveur, qui ne renverra que l'adresse IP. Étant donné que la requête est traitée localement, lorsqu'une connexion est établie avec le serveur, l'adresse IP du client sera révélée. Les connexions requises prendront un peu plus de temps, mais l'adresse IP sera bientôt disponible dans jQuery. 

Ensuite, vous pouvez appeler via jquery une API externe qui vous donnera des informations pour cette adresse IP spécifique. Soit vous achetez une base de données IP que vous installez sur votre serveur Web pour pouvoir l’appeler, soit vous utilisez une autre API. Vous pouvez vérifier http://www.ipgp.net/ip-address-geolocation-api/

1
Lucian

Ceci est possible avec l'API de géolocalisation https://ip-api.io . Il fournit le pays, la ville, le code postal, les coordonnées, le réseau, l'ASN et le fuseau horaire. Par exemple avec jQuery:

$(document).ready( function() {
    $.getJSON("http://ip-api.io/api/json",
        function(data){
            console.log(data);
        }
    );
});

Https://ip-api.io vérifie également les bases de données des mandataires, des mandataires publics et des spammeurs et fournit également ces informations.

Exemple de réponse:

{
  "ip": "182.35.213.213",
  "country_code": "US",
  "country_name": "United States",
  "region_code": "CA",
  "region_name": "California",
  "city": "San Francisco",
  "Zip_code": "94107",
  "time_zone": "America/Los_Angeles",
  "latitude": 32.7697,
  "longitude": -102.3933,
  "suspicious_factors": {
    "is_proxy": true,
    "is_tor_node": true,
    "is_spam": true,
    "is_suspicious": true // true if any of other fields (is_proxy, is_tor_node, is_spam) is true
  }
}
1
Andrey E