Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Web Apps
Code

HTML5 Apps: Positionierung mit Geolocation

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Im Mittelpunkt jeder standortbasierten Anwendung stehen Positionierung und Geolokalisierung. In diesem Tutorial lernst du die Geolocation-Funktionen von HTML5 und die Grundprinzipien, die benötigt werden, um sie in deiner nächsten HTML5-App zu nutzen!

Einführung

Vor drei Jahren war der Smartphone-Boom noch ungewiss. Heute sind wir von einer Gesellschaft von Smartphone-Süchtigen umgeben, die leben, als ob ihr Leben nicht ohne sofortigen, mobilen Zugriff auf das Web, E-Mail und Apps für jeden Anlass weitergehen könnte. Mobile Geräte haben in nur drei Jahren einen langen Weg zurückgelegt und unterstützen nun neben Telefonanrufen eine Vielzahl nützlicher Funktionen. Für ortseingeschränkte Menschen wie mich ist Geolocation eine der nützlichsten Ergänzungen. Viele iPhone- und Android-Geräte wurden mit GPS-Hardware ausgestattet, die zuverlässige geografische Daten liefern kann. In diesem Artikel werden wir die Geolocation-Funktionen von HTML5 besprechen. Mein Ziel ist es, Ihnen zu helfen, die Geolocation-Technologie in Ihrem nächsten Projekt zu nutzen, indem Sie Sie durch die folgenden Themen führen:

  • Browser Geolocation und wie es funktioniert
  • Wie asynchrone Funktionsaufrufe funktionieren
  • Wie verwende ich die getCurrentPosition API?
  • Was ist in Geolocation-Daten?
  • Wie kann man auf IP-Adressen basierte Geolocation zurückgreifen, wenn Browser keine native Unterstützung bieten?
  • So zeigen Sie eine Karte mit Geolocation-Daten an
  • Wie verwende ich die WatchPosition- und ClearWatch-APIs?

Browser Geolocation und wie es funktioniert

Um den Standort eines Client-Geräts in der Vergangenheit zu erkennen, müsste man typischerweise die IP-Adresse des Client überprüfen und eine vernünftige Schätzung des Standortes des Geräts vornehmen. Als Teil der HTML5-Bemühungen hat das W3C jedoch eine Reihe von APIs entwickelt, die es dem clientseitigen Gerät (dh Ihrem iPhone 3G +, Android 2.0+ -Telefonen oder sogar Ihren herkömmlichen Desktop-Browsern) ermöglichen, geografische Positionierungsinformationen mit JavaScript abzurufen . Wenn wir uns die Webbrowser-Landschaft ansehen, beginnt die native Unterstützung für Geolocation langsam und gleichmäßig ihren Weg in die Mainstream-Anwendungen zu finden. Eine wesentliche Anwendung, die Geolocation verwendet, ist Google Maps. Während ich diesen Artikel schreibe, ist die Geolocation-Unterstützung vollständig in nur wenigen Browsern verfügbar (siehe unten), aber es sieht so aus, als ob die meisten modernen Browser diese nützliche Funktionalität übernehmen:

  • Firefox 3.5+: Ja
  • Chrome 5 Beta: Ja
  • iPhone Safari: Ja
  • Opera 10.5 Entwickler: Ja
  • Safari: Nein
  • Internet Explorer: Nein

Für diejenigen, die an W3C-Geolocation-Spezifikationen interessiert sind, ist hier der Link zu folgen. Ein Abschnitt, über den hier zu sprechen ist, ist Abschnitt 6.2.8 mit dem Titel: "Die Geolocation-API muss von den zugrunde liegenden Quellen der Standortinformationen unabhängig sein". Es deutet darauf hin, dass die zugrunde liegende Technologie auf dem Gerät Geotarge über GPS, Triangulation oder andere Techniken erreichen kann. Die Geolocation-API identifiziert nicht, wie Standortinformationen ermittelt wurden. Es ist normalerweise kein Problem, nicht zu wissen, wie die Geolokalisierung erreicht wurde, aber Sie werden feststellen, dass die Genauigkeit der Standortinformationen je nach verwendeter Technik stark variieren kann.

Asynchrone Funktionen

Eine asynchrone Funktion ist eine Funktion, die außerhalb des Hauptprogrammablaufs ausgeführt wird. Im Kontext von JavaScript bedeutet dies, dass unser Code eine Funktion aufruft und anschließend Anweisungen ausführt, bevor die Funktion zurückkehrt. Wenn Sie diesem Modell folgen, sollte unser Code etwa so aussehen:

Da die Antwort auf die Funktion do_something() uns asynchron gegeben wird, müssen wir eine Funktion benennen, die eine Antwort erhält und sie verwendet. Daher müssen wir eine andere Funktion definieren, handle_response_to_do_something(), die das Ergebnis in einem Dialog anzeigt.

Sie fragen sich vielleicht, warum wir das wissen müssen? Nun, wenn unsere Anwendung versucht, ihren Standort abzufragen, muss der Benutzer des Geräts zustimmen, seine Standortinformationen mit unserer Anwendung zu teilen. Wenn diese Aktion keine asynchrone war, würde alles innerhalb des Browsers einfrieren, bis der Benutzer antwortet, und das ist offensichtlich weniger als wünschenswert.

html5 geolocation API

getCurrentPosition API

Lassen Sie uns über die Geolocation-API sprechen. Die erste API, an der wir arbeiten möchten, ist die getCurrentPosition() API. Wenn sie aufgerufen wird, muss sie sofort ein neues Position-Objekt zurückgeben und dann asynchron erfassen. Bei Erfolg muss diese Methode das zugehörige successCallback-Argument mit einem Position-Objekt als Argument aufrufen. Wenn der Versuch fehlschlägt und die Methode mit einem Argument errorCallback ungleich null aufgerufen wurde, muss diese Methode das errorCallback mit einem PositionError-Objekt als Argument aufrufen.

Beginnen wir also mit der Erstellung unserer HTML5-Seite, die schöner und einfacher ist als das Einrichten einer XHTML 1.0-Seite. Alles, was wir brauchen, um damit zu beginnen, ist folgendes:

In Zeile 1 verwenden wir die neue DTD , um dies als HTML5-Seite zu definieren. Als nächstes werden wir eine Schaltfläche auf unserer Seite platzieren, auf der die Benutzer ihren Standort ermitteln können.

Jetzt werden wir den Button mit JavaScript verbinden, um den Prozess der Abfrage des aktuellen Standorts einzuleiten. Beachten Sie, dass die Skript-Tags dank eines neuen HTML5-Zuckers kein Typ-Attribut benötigen.

Im obigen Code sollten wir die Verwendung des JavaScript-Frameworks von jQuery erwähnen, um uns den Einstieg zu erleichtern. Anderenfalls müssten wir zusätzlichen Code schreiben, um die Seitenbereitschaft zu erkennen, die nichts mit Geolokalisierung zu tun hat. Mit dem ersten Skript-Tag laden wir das jQuery-Framework und verwenden es dann sofort am Anfang des zweiten Skript-Tags, um dem zuvor definierten Button ein Klick-Ereignis zuzuweisen. Wir haben auch die Funktion initiate_geolocation() geschrieben, die ausgeführt wird, wenn die Schaltfläche gedrückt wird, und die Funktion handle_geolocation_query (position), um die Geolocation-Daten asynchron über das Argument position zu erhalten.

An diesem Punkt, wenn Sie den obigen Code in einem Browser ausführen, der Geolocation unterstützt (nämlich Firefox 3.5+ und iPhone Safari), sollten Ihnen Ihre Breiten- und Längengradkoordinaten angezeigt werden. Dies funktioniert, wenn der Benutzer einverstanden ist, seine Standortinformationen mit der Website / Webanwendung zu teilen, aber was ist, wenn er diese Informationen nicht teilt? oder was, wenn es ein Problem gibt, diese Informationen zu bekommen?

Es wäre schön, über solche Probleme informiert zu werden. Glücklicherweise kann unser Code diese Probleme erkennen, indem er eine andere Funktion definiert, die nur ausgeführt wird, wenn beim Abrufen von Geolokationsdaten ein Problem auftritt. Sehen wir uns an, wie sich unser Code ändern muss, um Probleme zu erkennen:

Im obigen Code haben wir nun eine neue Funktion, handle_errors, eingeführt, die ein Fehlerargument enthält. Durch Überprüfen des Fehlerarguments können wir nach der Art des Fehlers suchen, der aufgetreten ist. Normalerweise wird der Browser einen dieser drei Fehler als Ursache identifizieren:

  • Der Benutzer hat gewählt, keine Standortdaten zu teilen
  • Das Gerät konnte keine Positionsdaten erhalten
  • Geräte-Timeout beim Warten auf Positionsdaten

Geolokalisierungsdaten

Wenn wir prüfen, was wir von der Geolocation-API erhalten haben, sehen wir die Felder für die Koordinaten und Zeitstempel. Das Zeitstempelfeld gibt einfach den Zeitpunkt an, zu dem die Instanz der Geolocation-Daten erstellt wurde. Das coords -Attribut enthält eine Reihe von geographischen Koordinaten zusammen mit ihrer zugehörigen Genauigkeit sowie eine Reihe anderer optionaler Attribute wie Höhe und Geschwindigkeit. Das Folgende ist die Beschreibung von ihnen nach den W3C-Spezifikationen:

  • Die Breiten- und Längenattribute sind geografische Koordinaten, die in Dezimalgraden angegeben sind.
  • Das Genauigkeitsattribut bezeichnet das Genauigkeitsniveau der Breiten- und Längenkoordinaten. Sie ist in Metern angegeben und muss von allen Implementierungen unterstützt werden.
  • Das Höhenattribut gibt die Höhe der Position an, die in Metern über dem WGS84-Ellipsoid angegeben wird. Wenn die Implementierung keine Höheninformationen bereitstellen kann, muss der Wert dieses Attributs null sein.
  • Das Attribut "heightAccuracy" wird in Metern angegeben. Wenn die Implementierung keine Höheninformationen bereitstellen kann, muss der Wert dieses Attributs null sein.
  • Das Überschriftenattribut gibt die Bewegungsrichtung des Host-Geräts an und wird in Grad angegeben, der im Uhrzeigersinn relativ zum wahren Norden zählt.  Wenn die Implementierung keine Überschrifteninformationen bereitstellen kann, muss der Wert dieses Attributs null sein.
  • Das Geschwindigkeitsattribut gibt die aktuelle Grundgeschwindigkeit des Hostgeräts an und wird in Metern pro Sekunde angegeben.  Wenn die Implementierung keine Geschwindigkeitsinformationen bereitstellen kann, muss der Wert dieses Attributs null sein.

Sie können nur auf einige dieser Felder zugreifen, wenn das Zielgerät sie tatsächlich gemäß der obigen Beschreibung unterstützt, aber es ist immer noch wichtig zu wissen, dass sie da sind.  Das Genauigkeitsattribut kann in Ihrer Anwendung besonders nützlich sein, um Zuverlässigkeit zu erkennen.

IP-Adresse basierte Geolokalisierung

Jetzt ist die offensichtliche Frage, was ist mit jenen Browsern, die Geolocation überhaupt nicht unterstützen?  Die Antwort ist, dass wir einen externen Geolocation-Dienst verwenden müssen.  Diese Dienste tun ihr Bestes, um die IP-Adresse eines Geräts geografischen Standorten mithilfe großer Geolocation-Datenbanken zuzuordnen.  Normalerweise machen sie einen guten Job, aber manchmal können sie unter den folgenden Problemen leiden:

  • IP-Adressen können dem falschen Ort zugeordnet sein (z. B. der falschen Postleitzahl, Stadt oder Vorort in einem Stadtgebiet).
  • Adressen können nur mit einem sehr breiten geografischen Bereich (z. B. einer großen Stadt oder einem Staat) assoziiert sein.  Viele Adressen sind nur mit einer Stadt verknüpft, nicht mit einer Adresse oder einem Breiten- / Längengrad.
  • Einige Adressen werden nicht in der Datenbank angezeigt und können daher nicht zugeordnet werden (dies gilt häufig für IP-Nummern, die im Internet nicht häufig verwendet werden).

Es ist wichtig zu beachten, dass bei Verwendung eines externen Geolocation-Dienstes die Genauigkeit nicht so gut ist wie die Geolokalisierung, die für das Gerät nativ ist, und in einigen Szenarien möglicherweise vollständig deaktiviert ist.  Darüber hinaus liefern solche Dienste keine Informationen über die Höhe, Geschwindigkeit oder Richtung des Geräts.  Unabhängig davon, ob GPS oder Triangulation nicht verfügbar sind, sind sie ein guter Fallback.

YQL Geo Library ist eine dedizierte und leichtgewichtige Bibliothek, mit der Sie Geolocation mit guten alten Yahoo-Diensten durchführen können.  Diese Bibliothek kann andere Dinge tun, die ich Ihnen überlassen möchte, aber für den Moment schauen wir uns an, wie wir unseren Code ändern sollten, um den Ort sowohl auf unterstützenden als auch auf nicht unterstützenden Browsern erfolgreich zu erkennen:

Was ist neu im obigen Code?  Drei Dinge:

  1. Wir importieren die YQL Geolocation-Bibliothek in die SeiteIn der Funktion
  2. In der Funktion initiate_geolocation() überprüft der Code, ob die Geolocation nativ unterstützt wird. Wenn nicht, verwendet es die YQL Geolocation Library.
  3. Schließlich haben wir die normalize_yql_response (response) -Funktion definiert, um das Ergebnis der YQL Geolocation Library in ein Ausgabeformat umzuwandeln, das den W3C-Geolocation-API-Spezifikationen ähnelt.

Zeigen Sie eine Karte mit Geolocation an

Bisher konnten wir die Längen- und Breitengrade des Geräts abrufen, aber wenn man sich mitten in einer Großstadt verliert, werden Längen- und Breitengradkoordinaten alleine nicht so hilfreich sein. Wir müssen diese Koordinaten in eine Form umwandeln, die für die Benutzer natürlicher ist, wie eine Karte. Lassen Sie uns eine Karte des aktuellen Standorts anzeigen, indem Sie die Static Map-API von Google verwenden, wie im folgenden Codeabschnitt gezeigt:

Mit Hilfe von jQuery haben wir die Funktion handle_geolocation_query (position) geändert, um ein Bildelement zu erstellen und es der Seite hinzuzufügen. Das src-Attribut des Bildelements wird auf einen konstruierten URI festgelegt, für den die Google Static Map-API ein Kartenbild prüft und generiert.

HTML5 Geolocation Maps API

watchPosition and clearWatch APIs

Jetzt, da wir wissen, wie die Funktion getCurrentPosition funktioniert, können wir uns schnell die watchPosition-API ansehen. Wenn es aufgerufen wird, muss es sofort zurückgehen und dann asynchron einen Überwachungsprozess starten, der durch die folgenden Schritte definiert wird:

  1. Erwerben Sie ein neues Objekt Position.  Falls erfolgreich, rufen Sie das zugehörige successCallback mit einem Position-Objekt als Argument auf.  Wenn der Versuch fehlschlägt und die Methode mit einem Argument errorCallback ungleich null aufgerufen wurde, muss diese Methode das errorCallback mit einem PositionError-Objekt als Argument aufrufen.
  2. Rufen Sie den entsprechenden Rückruf mit einem neuen Positionsobjekt auf, wenn die Implementierung feststellt, dass sich die Position des Hostgeräts geändert hat.

Diese Methode gibt einen ganzzahligen Wert zurück, der den Überwachungsprozess eindeutig identifiziert.  Wenn die clearWatch() - Funktion mit dieser Kennung aufgerufen wird, muss der Überwachungsprozess keine neuen Positionsfixierungen mehr erfassen und muss alle Callbacks aufrufen.

Mit anderen Worten, diese API ermöglicht unserem Code, wiederholt Standortinformationen zu erhalten, wenn sich der Standort des Geräts ändert. Schauen wir uns die Gerüstseite an, mit der wir beginnen müssen:

Wie Sie sehen, ist der Code sehr ähnlich dem Code, den wir zuvor im Abschnitt "getCurrentPostion API" verwendet haben.  Es gibt jedoch ein paar Ergänzungen.

  1. Zuerst haben wir eine neue Schaltfläche hinzugefügt, mit der wir den Überwachungsprozess mit der Funktion stop_watchlocation() stoppen können, um den Klick zu verarbeiten.
  2. Wir haben eine watchProcess-Variable, um den Überwachungsprozess zu verfolgen.

Um den Prozess zu starten, müssen wir den Code hinzufügen, der die watchPosition() - API wie den folgenden Code aufruft:

Um den Prozess zu stoppen, müssen wir den Code hinzufügen, der die clearWatch () - API wie den folgenden Code aufruft:

Schließlich behandeln wir die Karte und zusätzliche Daten (z. B. Position, Genauigkeit) wie folgt:

HTML5 Geolocation no data

Fazit

Ich hoffe, dass Sie mit diesem Tutorial einen Einstieg in die Welt der Geolocation-APIs erhalten haben. Viel Glück und versuchen Sie Ihr nächstes Projekt nutzen Geolokalisierung Vorteile!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.