Veröffentlicht am 24-03-2019

Auf den Standort des Internetbenutzers zugreifen

Mit der W3C-Geolocation-API können Sie mit einem Skript auf geografische Standortinformationen zugreifen, die dem Browser eines Geräts zugeordnet sind. In diesem Artikel werde ich darauf eingehen, wie auf diese API zugegriffen werden kann, und dann ein paar Beispiele dafür, was Sie mit Google Maps und anderen Bibliotheken von Drittanbietern tun können. In allen Beispielen in diesem Artikel wird jQuery verwendet, das auf einfache Weise mithilfe eines Skript-Tags eingefügt werden kann. Die gesamte Codierung wurde von meinem GitHub importiert.

google.com/images

Also fangen wir an: -

Wir haben in diesem Artikel jQuery und HTML und den gesamten Code verwendet, um den Standort des Benutzers abzurufen

Grundlegende Standortdaten abrufen

Wir verwenden die HTML5-Geolocation-API, um den Standort des Benutzers zu ermitteln, wenn er auf eine Schaltfläche klickt und den Wert auf der Webseite ausgibt.

Zeile 9: navigator.geolocation.getCurrentPosition (geo_success, geo_error);

Das Navigator-Objekt ermöglicht uns den Zugriff auf das neue Geolocation-Objekt. Das Geolocation-Objekt verfügt über die folgenden Methoden:

  1. getCurrentPosition () gibt die aktuelle Position des Benutzers zurück.
    1. watchPosition () gibt die aktuelle Position des Benutzers zurück, dient jedoch auch zur Überwachung der Position und ruft bei jeder Positionsänderung den entsprechenden Rückruf auf.
    2. clearWatch () beendet die Überwachung der aktuellen Position durch die WatchPosition () -Methode.
    3. Überprüfen Sie bei der Ermittlung des Standorts der Internetgeräte zunächst, ob der Browser des Benutzers die Geolocation-Funktion nativ unterstützt. Rufen Sie in diesem Fall die Methode getCurrentPosition () auf:

      if (navigator && navigator.geolocation) {navigator.geolocation.getCurrentPosition (geo_success, geo_error); } else {error ('Geolocation wird nicht unterstützt.');

      Da diese Methode asynchron ausgeführt wird, übergeben Sie ihr zwei Rückruffunktionen: geo_success und geo_error. Der Fehlerrückruf wird an ein Positionsfehlerobjekt übergeben, das einen Code und eine Nachrichteneigenschaft enthält. Der Code kann einer der folgenden sein:

      1. Unbekannt (0)
        1. Genehmigung verweigert (1)
        2. Genehmigung nicht verfügbar (2)
        3. Zeitüberschreitung (3)
        4. Dem Erfolgsrückruf wird ein Positionsobjekt übergeben, das ein Koordinatenobjekt und einen Zeitstempel enthält. Das Koordinatenobjekt enthält Folgendes:

        5. Breitengrad, der in Dezimalgrad angegeben wird.
          1. Längengrad, der in Dezimalgrad angegeben wird
          2. Höhe, die in Metern über dem Ellipsoid angegeben wird
          3. Genauigkeit, die in Metern angegeben wird
          4. Höhengenauigkeit, die in Metern angegeben wird
          5. Überschrift, die in Grad angegebene Fahrtrichtung.
          6. Von diesen sieben sind nur drei garantiert: Breitengrad, Längengrad und Genauigkeit.

            Nehmen Sie für die Lösung Breiten- und Längengrad vor und hängen Sie sie mit jQuery an den Hauptteil der Webseite an:

            // lat und long ausgeben printLatLong (lat, long) {$ ('body'). append ('

            Lat:' + lat + ''); $ ('body'). append ('

            Long:' + long + ''); }

            Wenn Sie den Internet-Speicherort eines Benutzers ermitteln möchten, wenn der Browser dieses Benutzers die HTML5-Geolocation-API nicht nativ unterstützt. Die Lösung dafür ist, dass Sie eine IP-zu-Standort-Suche als Fallback durchführen können. Es ist sicherlich nicht so genau wie Breitengrad- und Längengradkoordinaten, aber es ist viel besser, als gar keine Standortdaten zu haben.

            Google bietet das Objekt google.loader.ClientLocation in seiner Google Maps API v3-Bibliothek an, funktioniert jedoch nicht für viele US-IP-Adressen.

            Der MaxMind GeoIP JavaScript Web Service scheint genauer und aktueller zu sein. Es ist außerdem kostenlos, solange Sie einen Link auf die Website http://www.maxmind.com setzen. Alternativ bietet MaxMind eine attributionsfreie JavaScript-Lizenz an, die für 250 US-Dollar / Jahr erworben werden kann.

            Kodierung der Lösung

            Ändern Sie unser vorheriges Beispiel, um MaxMind als Fallback zu verwenden. Beginnen Sie mit dem Hinzufügen der JavaScript-Bibliothek zur Seite: