web-dev-qa-db-fra.com

Comment puis-je obtenir l'emplacement de l'utilisateur sans demander la permission ou si l'utilisateur est autorisé une fois, il n'est plus nécessaire de demander à nouveau?

Je crée un portail à l'aide de MySQL, JavaScript et Ajax et je souhaite connaître l'emplacement des utilisateurs en termes de latitude et de longitude. s'il n'est pas possible d'extraire l'emplacement sans demander, puis une fois que l'utilisateur a accordé l'autorisation, je peux extraire l'emplacement depuis n'importe quelle page sans plus jamais le demander.

Merci d'avance.

javascriptphplatitude-longitude
10
user3406221

3 façons de faire cela dans cette réponse:

  1. Obtenir une localisation GPS précise demandant à l'utilisateur d'autoriser l'accès à l'API de son navigateur
  2. Obtenir une localisation approximative (pays, ville, région) à l'aide d'un service GeoIP externe
  3. Obtenir un emplacement approximatif (pays, ville, région) en utilisant le service CDN

Demander à l'utilisateur d'autoriser l'accès à l'API de son navigateur

Vous pouvez obtenir l'emplacement du client à l'aide des fonctionnalités HTML5. Cela vous indiquera l'emplacement exact de l'utilisateur s'il est effectué à partir d'un appareil doté d'un GPS ou d'un emplacement approximatif. Une fois que l'utilisateur a accepté de partager son emplacement, vous l'obtiendrez sans plus d'approbation. Cette solution utilise Geolocation.getCurrentPosition () . Cela est nécessaire dans la plupart des cas pour le faire sous protocole HTTPS.

Si vous êtes pressé, voici un CodePen avec cette solution: https://codepen.io/sebastienfi/pen/pqNxEa

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to get your coordinates:</p>

<button onclick="getLocation()">Try It</button>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            // Success function
            showPosition, 
            // Error function
            null, 
            // Options. See MDN for details.
            {
               enableHighAccuracy: true,
               timeout: 5000,
               maximumAge: 0
            });
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML="Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;  
}
</script>

</body>
</html>

Gestion des erreurs et des rejets Le deuxième paramètre de la méthode getCurrentPosition () est utilisé pour gérer les erreurs. Il spécifie une fonction à exécuter s'il ne parvient pas à obtenir l'emplacement de l'utilisateur:

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}

Affichage du résultat dans une carte 

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=
    "+latlon+"&zoom=14&size=400x300&sensor=false";

    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

GeoIP

Si la solution ci-dessus ne fonctionne pas dans votre scénario, vous pouvez obtenir une position approximative à l'aide de l'adresse IP. Vous n'obtiendrez pas nécessairement l'emplacement exact de l'utilisateur, mais vous risquez de retrouver l'emplacement du nœud Internet le plus proche dans la zone du point de connexion de l'utilisateur, qui peut être suffisamment proche pour 99% des cas d'utilisation (pays, ville, région). . 

Comme cela n’est pas précis mais n’exige pas l’approbation de l’utilisateur, cela peut également répondre à vos besoins. 

Trouvez ci-dessous deux façons de le faire. Je recommanderais de faire cela en utilisant la solution CDN car elle est plus rapide et, oui, la vitesse compte beaucoup.

Obtenir une localisation approximative (pays, ville, région) à l'aide d'un service GeoIP externe

De nombreux services externes vous permettent d’obtenir l’emplacement GeoIP. Voici un exemple avec Google.

Pour obtenir votre clé API Google, cliquez ici: https://developers.google.com/loader/signup?csw=1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Get web visitor's location</title>
        <meta name="robots" value="none" />
    </head>
    <body>
    <div id="yourinfo"></div>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=<YOUR_GOOGLE_API_KEY>"></script>
    <script type="text/javascript">
        if(google.loader.ClientLocation)
        {
            visitor_lat = google.loader.ClientLocation.latitude;
            visitor_lon = google.loader.ClientLocation.longitude;
            visitor_city = google.loader.ClientLocation.address.city;
            visitor_region = google.loader.ClientLocation.address.region;
            visitor_country = google.loader.ClientLocation.address.country;
            visitor_countrycode = google.loader.ClientLocation.address.country_code;
            document.getElementById('yourinfo').innerHTML = '<p>Lat/Lon: ' + visitor_lat + ' / ' + visitor_lon + '</p><p>Location: ' + visitor_city + ', ' + visitor_region + ', ' + visitor_country + ' (' + visitor_countrycode + ')</p>';
        }
        else
        {
            document.getElementById('yourinfo').innerHTML = '<p>Whoops!</p>';
        }
    </script>
    </body>
</html>

Obtenir un emplacement approximatif (pays, ville, région) en utilisant le service CDN

Une alternative à l'utilisation de services externes est fournie par la plupart des CDN. L'avantage de cette solution est qu'aucune requête HTTP supplémentaire n'est requise, ce qui la rend plus rapide. Si vous avez déjà un CDN, c'est la voie à suivre. Vous pouvez utiliser CloudFlare, CloudFront, etc.

Dans ce scénario, vous obtiendrez probablement l'emplacement en tant que paramètre de l'en-tête de la demande HTTP, ou même directement dans l'objet window, afin que vous puissiez l'obtenir avec Javascript. Lisez la documentation du CDN pour en savoir plus.

Édité à la mi-décembre 2018 pour ajouter plus d'options.

17
Sébastien

Vous pouvez choisir un service externe tel que https://www.geoip-db.com . Ils fournissent un service de géolocalisation basé sur les adresses IP pour lesquelles vous n'avez pas besoin de l'autorisation de l'utilisateur.

Essayez cet exemple:

<!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>Geo City Locator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body> 
    <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>
    <script>
      $.getJSON('https://geoip-db.com/json/')
         .done (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>
</body>
</html>
8
Kurt Van den Branden

Il est possible de deviner la latitude et la longitude en fonction de l'adresse IP d'origine d'une requête Web. Vous devez avoir accès à une base de données ou à un service qui mappe les adresses IP à des emplacements, tels que le geoip de MaxMind ( https://www.maxmind.com/en/geoip-demo ). Il devrait y avoir des wrappers JavaScript/PHP disponibles pour des services tels que ceux-là que vous pouvez utiliser.

La recherche de GeoIP n’est pas très fiable et peut facilement devenir obsolète. Si vous avez besoin de quelque chose de plus précis, vous devrez solliciter des informations de l'utilisateur, telles qu'un code postal.

0
FoolishSeth