In dieser Lektion Wir werden uns die Verwendung der Geolocation-API von JavaScript ansehen. Und wenn Sie über die Auswirkungen nachdenken möchten, jede Anwendung, die Ihren Standort verwendet, Handy, Desktop oder was auch immer es sonst gibt, verwendet diese API in irgendeiner Form. Also werde ich zeigen, wie wir unseren Standort bekommen können, und dann verwenden wir Google Maps damit wir zeigen können, was wir tatsächlich damit machen können. Und nur um unseren Standort zu finden, Ich werde einen Code hinzufügen, der meinen Standort ermittelt wenn ich auf die Schaltfläche klicke, und alles beginnt mit der Verwendung des Navigator-Objekts, Welches ist der Browser selbst, und das Geolocation-Objekt, das Teil davon ist. Sie sollten ziemlich sicher sein dass die meisten modernen Browser Unterstützen Sie das Geolocation-Objekt. Wenn Sie sich nicht sicher sind, Sie können eine Feature-Erkennungsbibliothek wie Modernizer verwenden oder so ähnlich. Aber was wir tun wollen, ist unsere aktuelle Position zu bekommen, und die Parameter, die diese Methode verwendet sind der Name der Funktion, die wir ausführen werden wenn es gelingt, und den Namen der Funktion, die wir ausführen werden wenn es nicht gelingt, unsere Position zu bekommen. Was macht die Geolocation-API? ist es durch eine Reihe von Möglichkeiten, die es hat um Ihren Standort zu finden. Es kann Ihre IP-Adresse verwenden, es könnte Ihren Mobilfunkanbieter verwenden, es könnte Handy-Triangulation tun, Dinge in diese Richtung. Das Schöne daran ist, dass Sie es nicht wissen oder sich darum kümmern müssen über die Methode, die es verwendet. Wenn wir die aktuelle Position bekommen, Wir suchen eine stehende Position. Es gibt andere Methoden, mit denen wir unseren Fortschritt beobachten können. Sagen Sie also für eine GPS-App, die Ihnen Anweisungen gibt, Wir werden diese Position beobachten wollen, während Sie sich bewegten. In diesem Fall, Wir werden uns nur die Position ansehen, in der ich mich befinde. und ich werde hier eine kleine Fortschrittsanzeige zeigen. Füllen wir also unsere Funktionen aus, und wir werden entscheiden, was wir tun werden wenn etwas passiert. Und die Fehlerfunktion ist etwas kürzer, Ich werde nur eine kleine Fortschrittsanzeige zeigen, und ich werde die Nachricht und den Code zeigen das kommt mit diesem Fehler. Das sind also nur Eigenschaften, die wir zurückbekommen von diesem Fehlerobjekt, das übergeben wird. Jetzt werde ich irgendwann wollen um die Standortinformationen zu geben, die ich finde, wenn es funktioniert zur Google Maps API. Aber ich werde anfangen nur durch die Anzeige der Informationen, die ich bekomme, Das sind also alles nur Elemente auf meiner Seite. Und beachte, dass ich hier an einem Positionsobjekt vorbeikomme. Die Position hat ein Koordinatenobjekt das wird unseren Standort enthalten. Es gibt mir Breite, Länge und Genauigkeit, Wie nah ist es in Metern? Sagen Sie also für eine IP-Adresse, das wird eher eine grobe Schätzung sein, während sagen Handy-Triangulation wird genauer sein. Je nachdem, welche Art von Lesung wir erhalten, Wir könnten auch die Höhe und die Genauigkeit der Höhe erhalten. Wenn wir die Position beobachten, Wir können auch die Geschwindigkeit bekommen. Dies wird nun nicht zutreffen weil ich das nicht mache, während ich fahre, Ich sitze nur. So erhalten Sie alle unsere Informationen und wir werden das auf der Seite anzeigen, und ich habe ein paar andere Variablen dass ich einfach hier bleibe, weil ich diese Informationen gebe später zur Google Maps API. Was passiert von hier an raus, ist, dass ich ein Google Maps-Entwicklerkonto haben muss, und Sie können nachschlagen, wie das geht, aber um darauf zuzugreifen, Ich muss dieses Skript enthalten haben. Dies ist das Google Map API-Skript. und ich werde meinen Entwicklerschlüssel hier einfügen. Ich werde es dir aber nicht zeigen, Weil es mein Schlüssel ist und ich nicht gerne teile. So können Sie die Anweisungen durchgehen und hol dir hier deinen eigenen Schlüssel, und das macht es damit ich später die Google Maps-API verwenden kann. Und ich habe mit diesem Code nicht viel gemacht. Dies ist meistens Boilerplate-Code das können Sie aus der Dokumentation erhalten auf der Google-Website. Ein paar wichtige Dinge, auf die ich hinweisen möchte. Wir haben einen Zoom auf der Karte, geht von eins auf 15, also bin ich ungefähr (undeutlich), dort eingezogen, und wir können unsere eigenen benutzerdefinierten Marker erstellen. Vielleicht haben Sie Marker gesehen auf Karten mit Bildern und Links, diese sind relativ einfach zu machen. In diesem Fall werde ich das nur markieren mit diesem kleinen Ding, das sagt: "Wir sind hier." Die Initialisierungsfunktion hier unten zeichnet zunächst nur die Karte. Die Karte wird tatsächlich angezeigt in nur einem regulären div auf der Seite, Das gibt also an, wo das gezeigt werden soll. Also werde ich einen anderen Knopf haben genannt show new location, das wird das heißen und geben Sie uns eine Google-Karte mit unserem Standort, sobald sie ausgeführt wird. Mal sehen, wie unsere Seite aussieht und sehen, ob wir es herausfinden können Wo auf der Welt sind wir eigentlich? Beachten Sie zunächst, ich bekomme einen Dialog. Geolocation ist eine Option für den Benutzer. Wenn ich dies blockiere, dann bekommt meine Funktion nur einen Fehler zurück Sag mir, dass es nicht finden kann, wonach es gesucht hat. Ich werde weitermachen und es zulassen. Da gehen wir, da sind meine Längen- und Breitengrade. Jetzt wird die Genauigkeit in diesem Fall weit entfernt sein. Ich benutze eine virtuelle Maschine, Vielleicht hat das die API ein wenig durcheinander gebracht. das sind also einige Meter, aber wir haben einen Ort bekommen, von dem aus das läuft. Der Rest davon jetzt, Ich kann dies tun, um meinen Google Map-Standort anzuzeigen. und es malt es genau hier auf dieser Leinwand. Jetzt gibt es meinen kleinen Marker, der sagt: "Wir sind hier." Ich bin zu diesem Zeitpunkt irgendwo in der Gegend von Kalifornien. und danach Dies ist nur eine normale Google Maps-Oberfläche. Damit können Sie alles machen das machst du auf der regulären Seite. In dieser Lektion haben wir uns mit unserem Standort befasst und dann einige Schritte unternehmen diese Standortdaten praktisch zu nutzen. Danke fürs Zuschauen. In unserer nächsten Lektion Wir werden uns das Zeichnen mit der Canvas-API ansehen.
