Reagieren auf Positionsupdates mit HTML5 (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

In diesem Thema wird erläutert, wie Sie mit der W3C Geolocation-API in HTML5 auf Änderungen der geografischen Position des Benutzers reagieren.

Voraussetzungen

Sie sollten mit HTML und JavaScript vertraut sein.

Anweisungen

Schritt 1: Öffnen von Microsoft Visual Studio

Öffnen Sie eine Instanz von Visual Studio.

Schritt 2: Überprüfen Sie, ob Positionsdienste aktiviert sind.

Bevor Ihre App auf Positionsdaten zugreifen kann, muss Position auf dem Gerät aktiviert sein. Vergewissern Sie sich in der Einstellungs-App, dass die folgenden Datenschutzeinstellungen für den Standort aktiviert sind:

Position dieses Geräts... ist aktiviert (gilt nicht für Windows 10 Mobile)
Die Einstellung Position der Positionsdienste ist aktiviert.
Ihre App hat unter Diese Apps dürfen meinen Standort verwenden die Einstellung Ein

Schritt 3: Erstellen eines neuen Projekts

Erstellen Sie ein neues Projekt, und wählen Sie aus den Projekttypen unter JavaScript/Store-Apps den Typ Leere App aus.

Schritt 4: Aktivieren der Positionsfunktion

Doppelklicken Sie im Projektmappen-Explorer sowohl für das Windows- als auch für das Windows Phone-Projekt auf package.appxmanifest, und wählen Sie die Registerkarte Funktionen aus. Aktivieren Sie dann in der Liste Funktionen die Option Position. Dadurch wird der Paketmanifestdatei die Gerätefunktion Location hinzugefügt.

  <Capabilities>
    <!-- DeviceCapability elements must follow Capability elements (if present) -->
    <DeviceCapability Name="location"/>
  </Capabilities>

Schritt 5: Ersetzen des JavaScript-Codes

Öffnen Sie im Projekt "Shared" die Datei "default.js" (/js/default.js). Ersetzen Sie den Code in der Datei durch den folgenden.

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {

            args.setPromise(WinJS.UI.processAll().
                done(function () {

                    // Add an event handler to the button.
                    document.querySelector("#watchLoc").addEventListener("click",
                        watchloc);

                    // Add an event handler to the button.
                    document.querySelector("#stopWatching").addEventListener("click",
                        stopwatching);

                }));
        }
    };

    var loc = null;
    var watchId;

    function watchloc() {
        if (loc == null) {
            loc = window.navigator.geolocation;
        }
        if (loc != null) {
            watchId = loc.watchPosition(successCallback);
        }
    }

    function stopwatching() {
        loc.clearWatch(watchId);
    }

    function successCallback(pos) {
        document.getElementById('latitude').innerHTML = pos.coords.latitude;
        document.getElementById('longitude').innerHTML = pos.coords.longitude;
        document.getElementById('accuracy').innerHTML = pos.coords.accuracy;
    }

    function errorCallback(error) {
        var strMessage = "";

        // Check for known errors
        switch (error.code) {
            case error.PERMISSION_DENIED:
                strMessage = "Access to your location is turned off. " +
                    "Change your settings to turn it back on.";
                break;
            case error.POSITION_UNAVAILABLE:
                strMessage = "Data from location services is " +
                    "currently unavailable.";
                break;
            case error.TIMEOUT:
                strMessage = "Location could not be determined " +
                    "within a specified timeout period.";
                break;
            default:
                break;
        }
        document.getElementById("status").innerHTML = strMessage;
    }


    app.start();
})();

Schritt 6: Hinzufügen des HTML-Codes für die Apps

Öffnen Sie die Datei default.html für die Windows- und Windows Phone-Projekte, und kopieren Sie den folgenden HTML-Code zwischen die "BODY"-Tags der Datei.

    Geolocation Event Sample<br />
    <br />

    <button id="watchLoc">Watch Location</button><br />
    <button id="stopWatching">Stop Watching</button><br />
    Latitude: <span id="latitude">Waiting for update...</span><br />
    Longitude: <span id="longitude">Waiting for update...</span><br />
    Accuracy: <span id="accuracy">Waiting for update...</span><br />
    <span id="status"> </span><br />

Schritt 7: Erstellen der App

Klicken Sie auf Erstellen > Projektmappe erstellen, um das Projekt zu erstellen.

Schritt 8: Testen der App

Klicken Sie im Menü Debuggen auf Debugging starten, um die Projektmappe zu testen.
Wenn Sie das Beispiel zum ersten Mal ausführen, werden Sie gefragt, ob die App Ihre Position verwenden kann. Wählen Sie die Option Zulassen aus.
Klicken Sie auf die Schaltfläche Get Location, um die aktuelle Position abzurufen.

Anmerkungen

Positionsdienste nutzen zur Positionsbestimmung eine Reihe unterschiedlicher Quellen. Wenn GPS, Mobilfunkmasten und WLAN nicht verfügbar sind, wird stattdessen die IP-Adresse verwendet. In diesem Fall empfangen Sie möglicherweise keine Positionsupdateereignisse, da IP-Adressdaten nur gelegentlich aktualisiert werden.