Schnellstart: Feststellen des Benutzerstandorts (HTML)

Applies to Windows and Windows Phone

In diesem Lernprogramm werden die erforderlichen Schritte behandelt, um mit der Windows-Runtime-Geolocation-API den geografischen Standort eines Benutzers zu bestimmen.

Ziel: Dabei erfahren Sie mehr über den einfachsten Weg, wie Sie den Standort bestimmen können. In dem Lernprogramm erstellen Sie eine einfache App, die Standortdaten einmalig anfordert. Wenn Sie die Methode getGeoPositionAsync wie in dem Beispiel unten nur einmal aufrufen, ist das für Apps, die eine Standortbestimmung für einmalige Aufgaben verwenden, wie das Versehen von E-Mails mit Geomarkierungen, möglicherweise bereits ausreichend. Wenn der Standort für Ihre App von grundlegender Bedeutung ist oder Ihre App Standortupdates erfordert, sollten Standortereignisse wie im Thema Verhalten bei Standortupdates verarbeitet werden.

Voraussetzungen

Sie sollten mit HTML und JavaScript vertraut sein.

Anweisungen

1. Überprüfen, ob Positionsdienste aktiviert sind

Stellen Sie sicher, dass das Gerät auf Ihre Position zugreifen kann. Diese Einstellung finden Sie in Windows, wenn Sie zum Charm Einstellungen navigieren. Wählen Sie nacheinander die Optionen PC-Einstellungen ändern, Datenschutz und dann Position aus. In Windows Phone wechseln Sie zu Einstellungen, wählen Sie Ortung aus, und aktivieren Sie Ortungsdienste.

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. Deklarieren der Positionsfunktion

Doppelklicken Sie im Projektmappen-Explorer für die Windows- und Windows Phone-Projekte auf package.appxmanifest. Wählen Sie die Registerkarte Funktionen aus. Überprüfen Sie die Option Position in der Liste Funktionen.

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

    var loc = null;

    function getLoc() {
        if (loc == null) {
            loc = new Windows.Devices.Geolocation.Geolocator();
        }
        if (loc != null) {
            loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
        }
    }

    function getPositionHandler(pos) {
        document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
        document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
        document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
        document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(loc.locationStatus);
    }

    function errorHandler(e) {        
        document.getElementById('errormsg').innerHTML = e.message;
        // Display an appropriate error message based on the location status.
        document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(loc.locationStatus);    
    }

    function getStatusString(locStatus) {
        switch (locStatus) {
            case Windows.Devices.Geolocation.PositionStatus.ready:
                // Location data is available
                return "Location is available.";        
                break;
            case Windows.Devices.Geolocation.PositionStatus.initializing:
                // This status indicates that a GPS is still acquiring a fix
                return "A GPS device is still initializing."; 
                break;
            case Windows.Devices.Geolocation.PositionStatus.noData:
                // No location data is currently available 
                return "Data from location services is currently unavailable.";       
                break;
            case Windows.Devices.Geolocation.PositionStatus.disabled:
                // The app doesn't have permission to access location,
                // either because location has been turned off.
                return "Your location is currently turned off. " +
                    "Change your settings through the Settings charm " +
                    " to turn it back on.";
                break;
            case Windows.Devices.Geolocation.PositionStatus.notInitialized:
                // This status indicates that the app has not yet requested
                // location data by calling GetGeolocationAsync() or 
                // registering an event handler for the positionChanged event. 
                return "Location status is not initialized because " +
                    "the app has not requested location data.";
                break;
            case Windows.Devices.Geolocation.PositionStatus.notAvailable:
                // Location is not available on this version of Windows
                return "You do not have the required location services " +
                    "present on your system.";
                break;
            default:
                break;
        }
    }

    app.start();
})();

Fügen Sie in der sofort aufgerufenen anonymen Funktion in "default.js" den folgenden Code hinzu.

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.


<div>
    <p>Click "Get Location" to get geolocation data.</p>
    <br />
    <button id="getLocation">getLocation</button> <br />
</div>
<br/>
<div>
    Latitude: <span id="latitude"></span><br />
    Longitude: <span id="longitude"></span><br />
    Accuracy (in meters): <span id="accuracy"></span><br />
    Location Status: <span id="geolocatorStatus"></span><br />
    Error Message: <span id="errormsg"></span><br />
</div>

7. Kompilieren der App

Klicken Sie im Menü Erstellen auf Projektmappe erstellen, um das Projekt zu erstellen.

8. Erstellen der App

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

9. Testen der App

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

Hinweis  Wenn keine Standortdaten angezeigt werden, überprüfen Sie Folgendes:

  • Vergewissern Sie sich, dass Sie Zugriff auf Standortdaten haben, indem Sie im Projektmappen-Explorer die Datei package.appxmanifest öffnen und die Option Standort auf der Registerkarte Capabilities überprüfen.
  • In Windows hat die App, falls die Positionsdienste von einem Administrator deaktiviert wurden, keinen Zugriff auf die Position des Benutzers. Öffnen Sie in der Systemsteuerung die Option "Standorteinstellungen ändern", und überprüfen Sie, ob Plattform für Windows-Position aktivieren aktiviert ist.
  • In Windows Phone kann der Benutzer die Position in der App "Einstellungen" deaktivieren. Navigieren Sie zur App "Einstellungen", wählen Sie Ortung aus, und stellen Sie sicher, dass der Schalter für Ortungsdienste aktiviert ist.

Zusammenfassung

In dieser Schnellstartanleitung haben Sie eine einfache App zur Bestimmung des aktuellen Benutzerstandorts erstellt.

Die Anforderung des Standorts wird im folgenden Code initiiert. Durch den Code wird ein Geolocator-Objekt erstellt, die Methode getGeoPositionAsync aufgerufen, und es werden Handler für eine erfolgreiche und eine fehlerhafte Ausführung festgelegt:


function getloc() {
    if (loc == null) {
        loc = new Windows.Devices.Geolocation.Geolocator();
    }
    if (loc != null) {
        loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
    }
}

Die Funktion "getPositionHandler" zeigt den Breitengrad, den Längengrad und die Genauigkeit an, wenn ein Standort verfügbar ist:


function getPositionHandler(pos) {
    document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
    document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
    document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
    document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(loc.locationStatus);
}

Die Funktion "errorHandler" ruft die Hilfsfunktion "getStatusString" auf, um eine entsprechende Statusmeldung anzuzeigen, wenn die Standortbestimmung nicht erfolgreich ausgeführt werden konnte:


function errorHandler(e) {        
    document.getElementById('errormsg').innerHTML = e.message;
    // Display an appropriate error message based on the location status.
    document.getElementById('geolocatorStatus').innerHTML =
        getStatusString(loc.locationStatus);    
}

Verwandte Themen

Geolocation-Beispiel
Bing Maps-SDK – Beispiele
Windows.Devices.Geolocation

 

 

Anzeigen:
© 2014 Microsoft