Windows-Apps
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Reagieren auf entfernungsbasierte Positionsupdates (HTML)

[Diese Dokumentation ist vorläufig. Änderungen vorbehalten.]

Bei einigen Apps sind Positionsupdates nur erforderlich, wenn der Benutzer eine große Entfernung zurückgelegt hat. In diesem Thema erfahren Sie, wie Sie eine App erstellen, mit der Benutzer die Entfernung zwischen Positionsupdates anpassen können. Diese Entfernung wird als Bewegungsgrenze bezeichnet und entspricht der minimalen Änderung der Position, die zum Aufrufen eines Positionsupdateereignisses erforderlich ist. Bei Implementierung einer Bewegungsgrenze können Sie eine App erstellen, die nur lokale Informationen wie Nachrichten oder Wetter bereitstellt und für die keine Positionsupdates erforderlich sind, solange der Benutzer sich am selben Ort befindet..

Der Code für diese App aktualisiert mit jedem ausgelösten Positionsupdateereignis eine Tabelle. Dabei wird eine Zeile mit den neuen Koordinaten und der Entfernung hinzugefügt, die der Benutzer seit der letzten Aktualisierung zurückgelegt hat. Die zurückgelegte Entfernung wird mit der Semiversus-Formel berechnet.

Wird eine Bewegungsgrenze in das Eingabefeld eingegeben, werden Sie feststellen, dass die Entfernung, die bei jeder Ereignisauslösung zurückgelegt wurde, unterhalb der Bewegungsgrenze liegt.

Wissenswertes

Technologien

  • Windows Runtime

Voraussetzungen

  • Sie sollten mit HTML und JavaScript vertraut sein.

Anweisungen

Schritt 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 hat die Einstellung Ein
  • Die Einstellung Let Windows and apps you choose use your location and location history ist auf Ein festgelegt
  • Ihre App hat unter Diese Apps dürfen meinen Standort verwenden die Einstellung Ein

Hinweis  In einigen Fällen sind die Einstellungen Position und Diese Apps dürfen meinen Standort verwenden möglicherweise nicht verfügbar.

Schritt 2: Öffnen von Microsoft Visual Studio

Öffnen Sie eine Instanz von Visual Studio.

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

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

                }));
        }
    };


    app.start();
})();



Schritt 6: Einfügen von Code zum Erstellen des Geolocators und zur Behandlung von Positionsaktualisierungen

Fügen Sie den folgenden Code ein, um die Ereignisse zu behandeln, wenn eine Taste gedrückt wird und wenn sich die Position ändert.


var eventCount = 0; // The number of positionchanged events that have been raised.
var loc = null;

// Create the Geolocator, set movementThreshold if specified,
// and subscribe to events.
function trackloc() {
    if (loc == null) {
        loc = new Windows.Devices.Geolocation.Geolocator();
    }
    if (loc != null) {
        // Set movementThreshold
        var threshold = document.getElementById("threshold").value;
        if (threshold >= 0) {
            loc.movementThreshold = threshold;
        }
        loc.addEventListener("positionchanged", onPositionChanged);
        loc.addEventListener("statuschanged", onStatusChanged);
    }
    else {
        document.getElementById('status').innerHTML = "Geolocator not found.";
    }
}

function stoptracking() {
    if (loc != null) {
        loc.removeEventListener("positionchanged", onPositionChanged);
    }
}
function onPositionChanged(args) {
    eventCount = eventCount + 1;
    var pos = args.position;
    addLatLong(pos.coordinate.point.position.latitude, pos.coordinate.point.position.longitude);
}


Schritt 7: Einfügen von Code zur Aktualisierung der HTML-Tabelle

Fügen Sie den folgenden Code hinzu, um die HTML-Tabelle mit Positionen und Gesamtentfernungen zu aktualisieren.


    // Add a table row containing the coordinates and distance moved.
// Add a table row containing the coordinates and distance moved.
function addLatLong(lat, long) {
        
    var tabBody = document.getElementById("inputtable");
    var row = document.createElement("TR");

    // First cell - latitude.
    var cell1 = document.createElement("TD");
    cell1.innerHTML = lat;
    cell1.id = "latitude" + eventCount;
    row.appendChild(cell1);
    // Second cell - longitude.
    var cell2 = document.createElement("TD");
    cell2.innerHTML = long;
    cell2.id = "longitude" + eventCount;
    row.appendChild(cell2);
    // Third cell - distance
    var cell3 = document.createElement("TD");
    cell3.id = "distance" + eventCount;
    if (eventCount < 2) {
        cell3.innerHTML = "0";
    }
    else {
        var prevLat = document.getElementById("latitude" + (eventCount - 1)).innerHTML;
        var prevLong = document.getElementById("longitude" + (eventCount - 1)).innerHTML;
        // multiply Distance by 1000 to get meters from km
        cell3.innerHTML = Distance(prevLat, prevLong, lat, long) * 1000;
    }
    row.appendChild(cell3);
    tabBody.appendChild(row);
}



Schritt 8: Einfügen von Code zur Entfernungsberechnung

Fügen Sie diesen Code ein, um die Entfernung mit der Semiversus-Formel zu berechnen.


// Calculates distance between two latitude/longitude coordinates in km,
// based on the haversine formula.
function Distance(prevLat, prevLong, currLat, currLong) {
    // KNOWN CONSTANTS
    var degreesToRadians = Math.PI / 180;
    var earthRadius = 6371; // approximation in kilometers assuming earth to be spherical
    // CONVERT LATITUDE AND LONGITUDE VALUES TO RADIANS
    var previousRadianLat = prevLat * degreesToRadians;
    var previousRadianLong = prevLong * degreesToRadians;
    var currentRadianLat = currLat * degreesToRadians;
    var currentRadianLong = currLong * degreesToRadians;
    // CALCULATE RADIAN DELTA BETWEEN THE TWO POSITIONS
    var latitudeRadianDelta = currentRadianLat - previousRadianLat;
    var longitudeRadianDelta = currentRadianLong - previousRadianLong;
    var expr1 = (Math.sin(latitudeRadianDelta / 2) * Math.sin(latitudeRadianDelta / 2)) +
                (Math.cos(previousRadianLat) * Math.cos(currentRadianLat) * Math.sin(longitudeRadianDelta / 2) * Math.sin(longitudeRadianDelta / 2));
    var expr2 = 2 * Math.atan2(Math.sqrt(expr1), Math.sqrt(1 - expr1));
    var distanceValue = earthRadius * expr2;
    return distanceValue;
}



Schritt 9: Einfügen von Code zur Anzeige von Statusmeldungen

Fügen Sie den folgenden Code ein, um Statusmeldungen anzuzeigen.


// Handle change in status to display an appropriate message.
function onStatusChanged(args) {
    var newStatus = args.status;
    document.getElementById('geolocatorStatus').innerHTML =
                getStatusString(newStatus);
}

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.";
        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:
            return "Unknown status";
    }
}


Schritt 10: 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.


    <span>Geolocation Event Sample</span><br />
    <span id="MovementThresholdLabel">Movement Threshold in meters:</span><br />
    <input id="threshold" type="text" /><br />

    <button id="startTracking">Track Location</button><br />
    <br />
    <button id="stopTracking">Stop Tracking</button><br />

    <table style="border: solid; width:auto">
        <thead><tr><th>Latitude</th><th>Longitude</th><th>Distance (meters)</th></tr></thead>
        <tbody id="inputtable">
            <tr></tr>
        </tbody>
    </table>
    <div id="geolocatorStatus"></div>


Schritt 11: Erstellen der App

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

Schritt 12: 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.

Anmerkungen

Hinweis  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.

Verwandte Themen

Geolocation-Beispiel für Windows 10 Technical Preview
Geolocation-Beispiel für Windows 8.1
Geolocation-Beispiel
Windows.Devices.Geolocation
Richtlinien für standortabhängige Anwendungen

 

 

Anzeigen:
© 2017 Microsoft