Dieser Artikel wurde maschinell übersetzt.

Erstellen von HTML5-Anwendungen

Integrieren von Geolocation in Webanwendungen

Brandon Satrom

Wenn Sie ein Smartphone besitzen, haben Sie wahrscheinlich verwendet einer Anwendung oder eines integrierten Funktionen um zu gelangen Richtungen, von wo Sie sich befinden, wo Sie wollen, zu gehen, oder zu einem nahe gelegenen Restaurant, Hotel oder Tankstelle in einige unbekannte Stadt finden.Der Fachbegriff für diese Anlage ist Geolocation, und beschreibt eine Funktion, wobei ein Gerät externen Standortdaten (global positioning System [GPS], Zelle Turm Triangulation und Wi-Fi Daten), um herauszufinden, wo Sie sind und geben Sie diese Informationen an die Anwendung oder Dienst anfordern von Daten verwenden können.Ihren Standort ist in der Regel in Form von Daten, z. B. Breite und Länge, Position, Geschwindigkeit, Richtung und dergleichen.Mit diesen Informationen kann ein Gerät bieten Funktionen wie z. B. Turn-by-Turn Navigation oder die Speicherorte der in der Nähe Taco LKW, die zufällig zur 02 geöffnet sein

Geolocation ist etwas nehmen wir selbstverständlich auf unsere mobilen Geräten, aber seine Verwendung breitet sich schnell über native mobile Anwendungen.Mehr und mehr Laptops und Notebooks sind jetzt mit GPS-Chips und die Explosion des Web ausgestattet, wie eine realistischen Plattform für die Entwicklung mobiler Anwendungen Nachfrage nach Geolocation Dienstleistungen direkt im Browser gerührt hat.

Zum Glück für uns, die W3C aufgegriffen dieser Trend frühzeitig und erstellt eine Spezifikation, die eine Standardmöglichkeit, um auf Geolocation-Dienste aus Web-Anwendungen verwenden beschreibt.Die Spezifikation, welche Sie an bit.ly/3r737c, ist nicht "offiziell" Bestandteil von HTML5, aber da ich diesen Begriff in dieser Serie benutze, um eine Reihe von beschreiben öffnen Web-Technologien – wie das W3C — konnte nicht verpassen die Möglichkeit, Sie geben eine kurze Tour durch diese spannende Technologie.

In diesem Monat Artikel geben Ihnen einen Überblick über die Geolocation-API und zeigen Ihnen, wie Sie es mit beginnen können, sowie wie die häufigsten Fehlertypen zu behandeln, die während einer Geolocation-Anforderung auftreten können.Ich werde diskutieren, wie Geolocation von Desktop- und mobile Browser implementiert ist, und wickeln mit einen kurzen Blick auf wie Sie eine Bibliothek Polyfüllung verwenden können, um grundlegende Geolocation Unterstützung für Benutzer mit älteren Browsern bereitzustellen.

Erste Schritte mit Geolocation

Entsprechend der Spezifikation W3C Geolocation ist ein "… API, die skriptgesteuerte Zugriff auf geographische Lage Informationen dem hosting Gerät zugeordnet." Da Geolocation eine integrierte API ist, alles, was Sie brauchen um zu beginnen ist ein Browser, der es unterstützt.Zum Zeitpunkt dieses unterstützen schreiben, Internet Explorer 9 (einschließlich Internet Explorer 9 auf Windows Phone 7.5, mit dem Codenamen "Mango") sowie die aktuellen Versionen der Chrome, Firefox, Safari und Opera, Geolocation, so dass die Spezifikation nicht nur weitgehend unterstützt, aber wahrscheinlich für einen großen Teil der Benutzerbasis verfügbar ist.

Die Geolocation-API lebt in das globale "Navigator" Objekt in JavaScript (Fenster.Navigator.Geolocation).Es bietet zwei Möglichkeiten zum Arbeiten mit Ortungsdiensten: One-Shot Standpunkt Anforderungen und wiederholte Standpunkt Updates.One-Shot-Anforderungen, die GetCurrentPosition Methode verwenden, etwa so:

navigator.geolocation.getCurrentPosition(function(position) {
       var coordinates = position.coords;
       console.log("Your latitude: " + coordinates.latitude + " and longitude:
         " + coordinates.longitude + " (Accuracy of:
         " + coordinates.accuracy + " meters)");
}, errorHandler, { maximumAge: 100, timeout: 6000, enableHighAccuracy: true});

Die Methode GetCurrentPosition akzeptiert drei Parameter. Die erste ist eine Callback-Funktion, die ausgelöst wird, wenn die aktuelle Position eines Geräts erfolgreich durch den Browser bestimmt. Die zweite ist eine Callback-Funktion, die wird ausgelöst, wenn ein Fehler auftritt (mehr dazu in Kürze). Der dritte ist ein Objektliteral zur Angabe von Geolocation Optionen. Die verfügbaren Optionen und deren Standardeinstellungen finden Sie Abbildung 1.

Abbildung 1 Geolocation-Optionen

Der Erfolg-Handler stellt ein Position-Objekt, die wichtige Eigenschaften in Bezug auf aktuelle Position des Benutzers enthält. Die Geolocation-Spezifikation definiert mehrere Eigenschaften, aber nur drei konsequent in allen Browsern implementiert sind: Breite, Länge und Genauigkeit. Andere Eigenschaften wie Position, Richtung und Höhe stehen für Browser zu implementieren, und könnte in der Zukunft sehr nützlich für mobile Browser Szenarien.

Für wiederholte Standpunkt Anforderungen bietet das Geolocation-Objekt zwei öffentliche Methoden, WatchPosition und ClearWatch; WatchPosition kann wie folgt verwendet werden:

var watchId = navigator.geolocation.watchPosition(function(position) {
       var coordinates = position.coords;
       console.log("Your latitude: " + coordinates.latitude + " and longitude:
         " + coordinates.longitude + " (Accuracy of:
         " + coordinates.accuracy + " meters)");
}, errorHandler, {maximumAge: 100, timeout: 6000, enableHighAccuracy: true});

Die WatchPostion-Methode akzeptiert dieselben Parameter wie GetCurrentPosition, mit einen Handler Erfolg, Fehler-Handler und -Optionen. Der wesentliche Unterschied ist, dass die WatchPosition sofort liefert eine ID, die verwendet werden kann, um die Funktion zu identifizieren in Frage. Da WatchPosition eine sich wiederholende Funktion ist, wird der Browser es jedes Mal nennen es eine Änderung in der Position des Benutzers erkennt, bis das Fenster geschlossen oder explizit das Skript die Uhr bricht. Um WatchPosition abzubrechen, rufen Sie einfach ClearWatch mit der ID zurückgegeben von WatchPosition, etwa so:

clearWatch(watchId);

Lassen Sie uns betrachten GetCurrentPosition in einer Beispielanwendung verwenden. In diesem Beispiel ich werde auch weiterhin mit der WebMatrix (https://aka.ms/webm) Bäckerei Beispiel ich in meinem letzten Artikel verwendet. Die Site ist ein Ort, wo Benutzer bestellen waren gebacken und Sie liefern können, aber ich erweitern diese Funktionalität, damit der Benutzer auf einen nahe gelegenen Backstein und Mörtel Speicherort angeben, wo sie die Bestellung abholen werden, möchten. Was Best Buy für in-Store Pickup Elektronik getan hat, möchte ich für die geschäftigen Backwaren-Industrie zu tun.

Ich begann, indem der geänderten Bäckerei Beispielanwendung ich mit HTML5 Forms-Features in meinem Artikel November geschmückt (msdn.microsoft.com/magazine/hh547102), und dann eine Funktion, die dem Benutzer ermöglicht, eine in der Nähe Bäckerei zur Abholung wählen durch Klicken auf einen Link auf dem Formular hinzugefügt. Ich verwende das Bing Maps AJAX-Steuerelement (die Sie bei herunterladen können msdn.microsoft.com/library/gg427610), und nachdem die richtigen Verweise hinzufügen und ein HTML-Element meine Karte enthalten, fügte ich ein paar div-Tags zur Seite, um die Abholung und Versand Abschnitte des Formulars darstellen. Jedes Div enthält einen Link, der dem Benutzer ermöglicht, zwischen den beiden Optionen zu wechseln. Wenn der "Interessiert Kommissionierung Ihrer Bestellung in einer unserer Filialen?" Link geklickt wird, ausführen ich eine Funktion in einer JavaScript-Datei namens locateBakery.js. Die Schlüsselmethoden dieser Funktion sehen Sie Abbildung 2.

Abbildung 2 locateBakery.js

var mapDiv = document.getElementById("map");
var _map = new Microsoft.Maps.Map(mapDiv, { credentials: myCredentials });
function hideMap() {
    $('#pickup').hide();
    $('#map').hide();
    $('#ship').show();
}
function displayError(msg) {
    $('#error').val(msg);
}
function placeLocationOnMap(latitude, longitude) {
    var location = new Microsoft.Maps.Location(latitude, longitude);
    var bakeries = lookupNearbyBakeries(latitude, longitude);
    _map.setView({ zoom: 12, center: location });
    // Add a pushpin to the map representing the current location
    var pin = new Microsoft.Maps.Pushpin(location);
    _map.entities.push(pin);
    for (var i=0;i<bakeries.length;i++) {
        _map.entities.push(bakeries[i]);
    }
}
function errorHandler(e) {
    if (e === 1) { // PERMISSION_DENIED
        hideMap();
    } else if (e === 2) { //POSITION_UNAVAILABLE
        displayError('Cannot find your location.
Make sure your network
        connection is active and click the link to try again.');
        hideMap();
    } else if (e === 3) { //TIMEOUT
        displayError('Cannot find your location.
Click the link to try again.');
        hideMap();
    }
}
function locate() {
    navigator.geolocation.getCurrentPosition(function (position) {
        var coordinates = position.coords;
        placeLocationOnMap(coordinates.latitude, coordinates.longitude);
    }, errorHandler);
}

Die suchen-Funktion ruft navigator.geolocation.getCurrentPosition und wenn dieser Aufruf erfolgreich ist, enthält die Koordinaten an den Ort­LocationOnMap Funktion, das der Position des Benutzers auf der Karte zusammen mit einer Liste der in der Nähe Bäckereien (die Suchlogik Bäckerei war für Leerzeichen ausgelassen).Dies ermöglicht dem Benutzer, eine nahe gelegene Bäckerei aus dem holen ihre Bestellung zu finden.Das Ergebnis ist abgebildet Abbildung 3.

Abbildung 3 die Bäckerei Anwendung Geolocation mit

Natürlich Geolocation ist ein netzwerkabhängigen Dienst, also was tun Sie, wenn die Geolocation fehlschlägt?Sie vielleicht bemerkt, dass für die GetCurrentPosition und WatchPosition Funktionen ich einen zweiten Parameter mit der Bezeichnung ErrorHandler angegeben.Entsprechend der Spezifikation Geolocation sollten Aufrufe GetCurrentPosition und WatchPosition ein Erfolg-Handler und einen Fehlerhandler aufrufen.Beim Aufrufen der Geolocation-Diensts gibt es drei mögliche Fehler:

• Der Benutzer konnte die Browseranforderung Lage Informationen verfolgen ablehnen
• Die Standortanfrage könnte timeout
• Die Lage-Anforderung fehlschlagen, bevor das Timeout abläuft

Wenn Ihre Anwendung Geolocation Unterstützung hinzufügen, sollten Sie sicher, alle drei Fälle zu behandeln sein.Ein Beispiel hierfür finden Sie in der Quelle in Abbildung 2, wo ich eine Fehlermeldung angezeigt und neu Abschnitt Versand Informationen anzeigen, wenn der Geolocation-Aufruf aus irgendeinem Grund fehlschlägt.

Wie funktioniert Geolocation

Obwohl die Geolocation-Spezifikation sehr ausführlichen ist bei der Definition der öffentlichen API, die jeder Browser für Entwickler bereitstellen muss, hat es nichts zu sagen genau wie Geolocation in einem Browser implementiert werden, sollten.Allgemeine Anleitung ist, dass jeder Browser versuchen soll, Genauigkeit mit Stromverbrauch Überlegungen, mit dem Ziel der Bereitstellung von Anwendungen mit einem Recht genau Satz von Koordinaten auszugleichen.

In einem Szenario mit Desktop- oder Laptopcomputer verwenden die meisten Browser den gleichen Mechanismus, Geolocation Daten, obwohl unterscheiden sich die Hintergrund-Dienstleistungen, die, denen Sie sich verlassen.Bei der Internet Explorer 9 und höher, wird der Browser sammeln Ihre IP-Adresse oder eine Liste von nahe gelegenen Wi-Fi-Hotspots und diese Informationen dann an die Microsoft Location Service (die gleiche integrierte Lage Serviceeinrichtungen auf Windows Phone Geräte verwenden) für einen Satz von Koordinaten weiterzugeben.Google Chrome und den Mozilla Firefox Browser sowohl auch IP- und Wi-Fi Hotspot Daten verwenden, aber verlassen Sie sich auf die Google-Ort-Service für die aktuelle Anforderung.Die Location-Dienst-Methode zum Suchen des Speicherorts eines Benutzers opfert einige Genauigkeit für Geschwindigkeit (und geringen Stromverbrauch) und ist sehr nützlich, als Backup, oder wenn das Gerät einen integrierten GPS-Chip fehlt.

Für mobile Browser die Lage ist ein bisschen komplizierter, und wieder ist bis zu den Browser in Frage.Da die meisten modernen Smartphones GPS-Chips haben, ist der Browser frei, die GPS Positionsdienstleistungen von mobile OS in einem Versuch zu verwenden, um genauere Koordinaten zu erhalten.In Internet Explorer 9 auf Windows Phone 7.5 und Safari auf iOS wird, die genau diesen Browsern.Das Ergebnis ist ein genauer Ort auf Kosten der zusätzlichen Stromverbrauch, die in der Regel einen akzeptablen Kompromiss in den meisten mobilen Geolocation-Szenarien, z. B. Turn-by-Turn Navigation.Es ist wichtig, beachten jedoch, dass Browser ein mobilen Geräts garantiert ist nicht einfach mithilfe von GPS-basierten Geolocation da ein Chip verfügbar ist.Da die Spezifikation Umsetzung bis zu den Browser lässt, können der Browser oder das zugrunde liegende mobile OS-Service auf Zelle Turm Triangulation oder -IP-Lookup zurückgreifen, oder verwenden Sie eine Kombination aus Zelle Triangulation und GPS.(Viele mobile Betriebssysteme hierzu bereits für systemeigene Anwendungen als Teil ihrer integrierten Ortungsdienste.)

Für eine Web-Anwendungsentwickler ist dies eine gute Nachricht, weil es bedeutet, dass Sie mit Geolocation, Cross-Plattform mobile Anwendungen entwickeln können, die auf Lage Einrichtungen auf einem Gerät, native verlassen können, genauso wie Native-Anwendungsentwickler.

Erkennung und Polyfüllung Geolocation Unterstützung

Wenn Sie Geolocation Unterstützung zu Ihrer Anwendung hinzufügen, müssen Sie berücksichtigen, was Ihr Konzept für die Nutzer Ihre Website mit einem nicht unterstützten Browser besuchen werden.Wie ich bereits in der Serie besprochen haben, wird die Art und Weise Sie ermitteln, ob in einem bestimmten Browser Geolocation unterstützt wird, indem Sie manuelle Feature-Erkennung ("If (!Navigator.Geolocation) ") oder mithilfe einer Bibliothek wie Modernizr (modernizr.com).Für Benutzer ohne Geolocation Unterstützung, es gibt zwei Vorgehensweisen: anmutig beeinträchtigen die Anwendung oder Polyfill Unterstützung über eine externe Bibliothek.Für die erste Option können Sie die Anwendung zeigt ein Formular, das durch den Benutzer geben Sie ihre Position, die Sie dann (über ein Service-Aufruf) verwenden können, um zu bestimmen, den breiten- und Längengrad des Benutzers beeinträchtigen.Ich deckte dieses Szenario in meinem September Artikel dieser Serie, so dass ich es hier nicht wiederholen werde.Sie können dieses Szenario und online Codebeispiel am anzeigen (msdn.microsoft.com/magazine/hh394148).

Ich werde die zweite Option in die ein bisschen mehr Tiefe dieser Zeit behandeln.Wie ich im vorherigen Artikel erwähnt habe, wenn Sie sich auf dem Markt für eine browserübergreifende POLYFIBER FILL für eine HTML5-Technologie, der erste Platz zu gehen ist Modernizr die Heimat auf GitHub veröffentlicht, wo sie haben eine ziemlich umfassende Liste der verwendbaren Polyfills geschrieben (bit.ly/eBMoLW).Zum Zeitpunkt des Schreibens dieses Artikels gab es drei Geolocation-Polyfills aufgeführt.Ich entschied mich für von Paul irischen bereitgestellt verwenden (bit.ly/q20TOl) lediglich als ein Beispiel für diesen Artikel.

Sie werden sich erinnern aus meinem Artikel September, dass eine POLYFIBER FILL ist eine Bibliothek, die eine Skript-basierte Implementierung für ein Feature HTML5 bereitstellt, und oft entspricht die dokumentierte API für diese Spezifikation in den Prozess.Der letztgenannte Punkt ist Schlüssel, weil es bedeutet, dass sobald ich meine Anwendung solche Bibliothek hinzugefügt haben, ich mit den Funktionen dieses Feature interagieren weiterhin, als ob es wurden vollständig im Browser unterstützt, und ich nicht um den Fluss von meinem Programm mit bedingte Logik zur Unterstützung von eines älteren Browsers Gabel muss.

Laden Sie wie ich getan habe, bevor in dieser Reihe, ich Modernizr benutze bin um zu Hilfe, Unterstützung für die Geolocation-Funktion erkennen und, wenn keine solche Unterstützung vorhanden ist, asynchron die Skriptdatei geolocationShim.js:

Modernizr.load({
  test: Modernizr.geolocation,
  nope: '../js/geolocationShim.js',
  complete: function() {
  locate();
  }
});

Wenn Geolocation unterstützt wird, wird die Ausführung an die suchen-Funktion fortgesetzt. Wenn nicht, Geolocation Polyfill wird geladen, und wenn Sie fertig sind, Ausführung wird dann weiterhin die suchen-Funktion. Wenn ich das Beispiel mit dieser Logik in Internet Explorer 9 ausführen, funktioniert alles wie es sein sollte und die native Geolocation-Funktionalität aufgerufen wird.

Um zu testen, wie dies in einen älteren Browser aussehen, kann ich öffne die F12-Developer-Tools für Internet Explorer 9 und wechseln Sie den Browser-Modus in Internet Explorer 8. Wenn ich dies tun und die Seite erneut ausgeführt, erkennt Modernizr, dass Geolocation wird nicht unterstützt und laden meine Shim. Dann, wenn die GetCurrentPosition Methode in meinem Shim ist aufgerufen, den Code in Abbildung 4 ausgeführt wird.

Abbildung 4 die GetCurrentPosition Methode implementiert über ein Shim

geolocation.getCurrentPosition = function(callback){   
  if (cache) callback(cache);
  $.getScript('//www.google.com/jsapi',function(){     
    cache = {
      coords : {
        "latitude": google.loader.ClientLocation.latitude,
        "longitude": google.loader.ClientLocation.longitude
      }
    };
    callback(cache);
  });   
};

Da diese Polyfüllung-Bibliothek der Geolocation API-Spezifikation entspricht und die GetCurrentPosition und beobachten stellt­Position Methoden, ich bin nicht erforderlich, jede zusätzliche Überprüfungen oder bedingte Logik in meiner wichtigsten GetLocation-Funktion zu implementieren.

Unabhängig davon, ob Sie ordnungsgemäß beeinträchtigt Ihre Anwendung und ermöglichen Benutzern manuell den Speicherort angeben, oder probieren Sie implementieren einen Shim, haben Sie Möglichkeiten, wenn es darum geht auf den Erlaß der Geolocation in Ihren Anwendungen, gleichzeitig aber dafür sorgen, dass Ihre Website weiterhin eine tolle Erfahrung für diejenigen, die noch keinen modernen Browser verwenden.

Was die Welt HTML5 oder der offenen Web-Technologien, anruft ist eine Reihe von Technologien ermöglicht echte Anwendungsentwicklung im Web ausgerichtet.Die Lücke zwischen dem Netz und dem Desktop Verengung und Geolocation ist ein gutes Beispiel dafür, was heute mit Webanwendungen möglich ist.In diesem Artikel behandelt ich die Grundlagen der Geolocation-Spezifikation.Ich habe gezeigt, wie Sie anfangen können, wie Geolocation für Desktop- und mobile Browser implementiert wird und wie, Polyfill Geolocation Unterstützung in älteren Browsern.Jetzt ist es Zeit für Sie Ihre Web-Anwendungen dieses spannende Feature hinzu, so gehen Sie einige awesome Anwendungen machen heute!

Wenn Sie weitere Informationen zur Geolocation Unterstützung in Internet Explorer 9 suchen, überprüfen Sie heraus den Führer, Internet Explorer 9 für Entwickler bei msdn.microsoft.com/ie/ff468705.Für andere Cross-Browser-Polyfills für Geolocation, lesen Sie die komplette Liste an bit.ly/qNE92g.

Schließlich alle Demos für diesen Artikel — das sind online verfügbar — mit WebMatrix, ein freier, schlanker Web-Entwicklungstool von Microsoft erstellt wurden.Sie können ausprobieren WebMatrix, selbst bei aka.ms/webm.

Brandon Satrom arbeitet als Developer Evangelist für Microsoft außerhalb von Austin. Er Blogs auf userinexperience.com und finden Sie auf Twitter bei twitter.com/BrandonSatrom.

Dank der folgenden technischen Experten für die Überprüfung dieses Artikels: Jon Box, John Hrvatin, Clark Verkauf und Andy Zeigler