Language: HTML | XAML

So wird’s gemacht: Anpassen der Entfernung für Standortupdates (HTML)

Applies to Windows and Windows Phone

Bei einigen Apps sind Standortaktualisierungen 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 Standortaktualisierungen anpassen können. Diese Entfernung wird als Bewegungsgrenze bezeichnet und entspricht der minimalen Änderung der Position, die zum Aufrufen eines Standortaktualisierungsereignisses 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 Standortaktualisierungen erforderlich sind, solange der Benutzer sich am selben Ort befindet..

Der Code für diese App aktualisiert mit jedem ausgelösten Standortaktualisierungsereignis 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

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.

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

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 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 Funktionen aktivieren.
  • 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.

Anmerkungen

Hinweis  In Windows bestimmt die Windows-Positionssuche die Position anhand von WiFi-Informationen. Wenn kein WiFi verfügbar ist, wird stattdessen die IP-Adresse herangezogen. Wenn der Computer nicht WiFi-fähig ist, erhalten Sie möglicherweise keinerlei Standortupdateereignisse, da die IP-Adressdaten nur gelegentlich aktualisiert werden.

Verwandte Themen

Geolocation-Beispiel
Windows.Devices.Geolocation
Richtlinien für standortabhängige Anwendungen

 

 

Anzeigen:
© 2014 Microsoft