Windows Dev Center

Language: HTML | XAML

Ermitteln der Position eines Benutzers (HTML)

[Einige Informationen beziehen sich auf die Vorabversion, die vor der kommerziellen Freigabe grundlegend geändert werden kann. Microsoft übernimmt keine Garantie, weder ausdrücklich noch stillschweigend, für die hier bereitgestellten Informationen.]

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 Positionsupdates 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

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 für dieses Gerät ... ist aktiviert (gilt nicht für Windows 10 Mobile Insider Preview)
  • 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 () {

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

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 zum ersten Mal ausführen, werden Sie gefragt, ob die App Ihre Position verwenden kann. Wählen Sie die Option Zulassen aus.
  3. Klicken Sie auf die Schaltfläche Get Location, um die aktuelle Position abzurufen.

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 für Windows 10 Insider Preview
Geolocation-Beispiel für Windows 8.1
Bing Maps-SDK – Beispiele
Windows.Devices.Geolocation

 

 

Anzeigen:
© 2015 Microsoft