Comment obtenir l'emplacement du visiteur (c'est-à-dire le pays) à l'aide de la géolocalisation ?

Question

J'essaie d'étendre la fonction de géolocalisation native

if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
    });
}

afin que je puisse utiliser le nom du pays du visiteur (et éventuellement renvoyer un tableau informatif).

Jusqu'à présent, tout ce que j'ai pu trouver, ce sont des fonctions qui affichent une interface google maps, mais aucune ne donne réellement ce que je veux, à l'exception de cette bibliothèque qui a bien fonctionné dans cet exemple mais pour une raison quelconque, il n'a pas fonctionné sur mon ordinateur. Je ne sais pas pourquoi cela s'est mal passé.

Enfin, savez-vous comment renvoyer un tableau contenant des informations telles que le pays, la ville, etc. à partir des valeurs de latitude et de longitude ?

Answer 1

Les développeurs à la recherche d'un utilitaire de géolocalisation complet peuvent consulter les sites suivants geolocator.js (j'en suis l'auteur).

L'exemple ci-dessous tente d'abord l'API de géolocalisation HTML5 pour obtenir les coordonnées exactes. En cas d'échec ou de rejet, il se rabat sur la recherche de géo-IP. Une fois qu'il a obtenu les coordonnées, il les convertit en adresse par géocodage inverse.

var options = {
    enableHighAccuracy: true,
    timeout: 6000,
    maximumAge: 0,
    desiredAccuracy: 30,
    fallbackToIP: true, // if HTML5 geolocation fails or rejected
    addressLookup: true, // get detailed address information
    timezone: true, 
    map: "my-map" // this will even create a map for you
};

geolocator.locate(options, function (err, location) {
    console.log(err || location);
});

Il prend en charge la géolocalisation (via HTML5 ou la recherche d'adresses IP), le géocodage, la recherche d'adresses (géocodage inversé), les distances et les durées, les informations sur les fuseaux horaires et bien plus encore...

Answer 2

Vous pouvez utiliser ip-api.io pour obtenir la localisation du visiteur. Il prend en charge l'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 :

function getIPDetails() {
    var ipAddress = document.getElementById("txtIP").value;

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            console.log(JSON.parse(xhttp.responseText));
        }
    };
    xhttp.open("GET", "http://ip-api.io/json/" + ipAddress, true);
    xhttp.send();
}

<input type="text" id="txtIP" placeholder="Enter the ip address" />
<button onclick="getIPDetails()">Get IP Details</button>

Code jQuery :

$(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('Country Name: ' + result.country_name)
                     console.log(result);
                 });
        });
    });

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

Answer 3

Si vous ne souhaitez pas utiliser d'interface utilisateur et que le pays vous suffit, vous pouvez utiliser l'interface suivante topojson y atlas mondial .

import { feature } from "https://cdn.skypack.dev/topojson@3.0.2";
import { geoContains, geoCentroid, geoDistance } from "https://cdn.skypack.dev/d3@7.0.0";

async function success(position) {
    const topology = await fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json").then(response => response.json());
    const geojson = feature(topology, topology.objects.countries);

    const {
        longitude,
        latitude,
    } = position.coords;

    const location = geojson.features
        .filter(d => geoContains(d, [longitude, latitude]))
        .shift();

    if (location) {
        document.querySelector('#location').innerHTML = `You are in <u>${location.properties.name}</u>`;
    }

    if (!location) {
        const closestCountry = geojson.features
            // You could improve the distance calculation so that you get a more accurate result
            .map(d => ({ ...d, distance: geoDistance(geoCentroid(d), [longitude, latitude]) }))
            .sort((a, b) => a.distance - b.distance)
            .splice(0, 5);

        if (closestCountry.length > 0) {
            const possibleLocations = closestCountry.map(d => d.properties.name);
            const suggestLoctions = `${possibleLocations.slice(0, -1).join(', ')} or ${possibleLocations.slice(-1)}`;

            document.querySelector('#location').innerHTML = `It's not clear where you are!<section>Looks like you are in ${suggestLoctions}</section>`;
        }

        if (closestCountry.length === 0) {
            error();
        }        
    }
}

function error() {
    document.querySelector('#location').innerHTML = 'Sorry, I could not locate you';
};

navigator.geolocation.getCurrentPosition(success, error);

Ce code prend la longitude et la latitude et vérifie si ce point est inclus dans l'un des éléments du geojson (une entité délimitée dans l'espace). J'ai également créé un code exemple .

Answer 4

Vous pouvez obtenir de nombreuses informations sur l'IP via https://apiip.net/ API. Elle fournit également une réponse XML si nécessaire et prend en charge IPv6.

Il suffit d'envoyer un simple appel GET :

https://apiip.net/api/check?ip=67.250.186.196&accessKey={your_api_key}

Réponse :

{
  "ip": "67.250.186.196",
  "continentCode": "NA",
  "continentName": "North America",
  "countryCode": "US",
  "countryName": "United States",
  "countryNameNative": "United States",
  "city": "New York",
  "postalCode": "10001",
  "latitude": 40.8271,
  "longitude": -73.9359,
  "capital": "Washington D.C.",
  "phoneCode": "1",
  "countryFlagEmoj": "",
  "countryFlagEmojUnicode": "U+1F1FA U+1F1F8",
  "isEu": false,
  "languages": {
    "en": {
      "code": "en",
      "name": "English",
      "native": "English"
    }
  },
  "currency": {
    "code": "USD",
    "name": "US Dollar",
    "symbol": "$",
    "number": "840",
    "rates": {
      "EURUSD": 1.11
     }
  },
  "timeZone": {
    "id": "America/New_York",
    "currentTime": "10/26/2021, 2:54:10 PM",
    "code": "EDT",
    "timeZoneName": "EDT",
    "utcOffset": -14400
  },
  "connection": {
    "asn": 12271,
    "isp": "Charter Communications Inc"
  },
  "security": {
    "isPublicProxy": false,
    "isResidentialProxy": false,
    "isTorExitNode": false,
    "network": "67.250.176.0/20"
  }
}