Ermitteln der Position mithilfe von 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 dieser Schnellstartanleitung erfahren Sie, wie Sie die geografische Position eines Benutzers mit der in HTML5 verfügbaren Geolocation-API des W3C bestimmen.

Ziel: Sie erfahren, wie Sie mit HTML5 die geografische Position von Benutzern ermitteln.

Voraussetzungen

Sie sollten mit HTML und JavaScript vertraut sein.

Zeitaufwand: 20 Minuten.

Anweisungen

1. Überprüfen, 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.

2. Öffnen von Microsoft Visual Studio

Öffnen Sie eine Instanz von Visual Studio.

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.

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>

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 () {

                }));
        }
    };
(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("#requestPosition").addEventListener("click",
                        requestPosition);

                }));
        }
    };

    var nav = null;

    function requestPosition() {
        if (nav == null) {
            nav = window.navigator;
        }

        var geoloc = nav.geolocation;
        if (geoloc != null) {
            geoloc.getCurrentPosition(successCallback, errorCallback);
        }

    }

    function successCallback(position) {
        document.getElementById("latitude").innerHTML =
            position.coords.latitude;
        document.getElementById("longitude").innerHTML =
            position.coords.longitude;

    }

    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();
})();

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.

    <label for="latitude">Latitude: </label> <div id="latitude"></div><br />
    <label for="longitude">Longitude: </label> <div id="longitude"> </div><br />
    <div id="status"> </div><br />

    <button id="requestPosition">Get Latitude and Longitude</button><br />

7. Erstellen der App

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

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.

Zusammenfassung

Sie haben in dieser Schnellstartanleitung eine einfache App erstellt, die mit HTML5 die Position eines Benutzers bestimmt. Weitere Informationen zu diesem Thema finden Sie in Erstellen einer standortabhängigen Webseite.