Langage: HTML | XAML

Comment ajuster la distance entre les mises à jour de localisation (HTML)

Applies to Windows and Windows Phone

Certaines applications n’ont besoin de mises à jour géographiques que lorsque l’utilisateur effectue un long déplacement. Cette rubrique vous montre comment créer une application qui permet à l’utilisateur de régler la distance entre les mises à jour de localisation. Cette distance est qualifiée de seuil de déplacement. Elle correspond au changement minimum de position requis pour déclencher un événement de mise à jour de localisation. En implémentant un seuil de déplacement, vous pouvez créer une application qui offre uniquement des informations locales, telles que les actualités ou la météo, et qui ne nécessite pas de mises à jour géographiques, à moins que l’utilisateur ne change de lieu en se rendant dans une autre ville..

Le code de cette application met à jour un tableau chaque fois qu’un événement de mise à jour de localisation est déclenché, en ajoutant une ligne qui contient les nouvelles coordonnés et la distance que l’utilisateur a réalisée depuis la dernière mise à jour. La distance réalisée est calculée avec la formule de haversine.

Si un seuil de déplacement est entré dans la zone d’entrée, vous pourrez voir que la distance parcourue chaque fois qu’un événement est déclenché se situe toujours sous le seuil de déplacement.

Ce que vous devez savoir

Technologies

  • Windows Runtime

Prérequis

  • Vous devez être familiarisé avec HTML et JavaScript.

Instructions

Étape 1: Vérifier que la localisation est activée

Assurez-vous que l’appareil a accès à votre localisation. Pour trouver ce paramètre sur Windows, accédez à l’icône Paramètres, sélectionnez Modifier les paramètres du PC, puis Confidentialité, puis Emplacement. Sur Windows Phone, accédez à Paramètres, sélectionnez localisation et activez les Services de localisation.

Étape 2: Ouvrir Microsoft Visual Studio

Ouvrez une instance de Visual Studio.

Étape 3: Créer un projet

Créez un projet, en choisissant une Application vide dans les types de projet Applications du Windows Store/JavaScript .

Étape 4: Déclarer la fonctionnalité de localisation

Double-cliquez sur package.appxmanifest dans l’Explorateur de solutions pour les projets Windows et Windows Phone. Sélectionnez l’onglet Capacités. Activez Emplacement dans la liste Capacités.

Étape 5: Remplacer le code JavaScript

Dans le projet partagé, ouvrez default.js (/js/default.js). Remplacez le code contenu dans le fichier par ce qui suit.





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



Étape 6: Insérez le code pour créer le Géolocalisateur et gérer les mises à jour de localisation

Insérez le code suivant pour gérer les événements quand un bouton est actionné et pour gérer un changement de position.


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


Étape 7: Insérez le code pour mettre à jour la table HTML

Ajoutez le code suivant pour mettre à jour la table HTML des positions et distances totales.


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



Étape 8: Insérez le code pour calculer la distance

Insérez ce code pour calculer la distance à l’aide de la formule de haversine.


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



Étape 9: Insérez le code pour afficher les messages d’état

Insérez le code suivant pour afficher des messages d’état.


// 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";
    }
}


Étape 10: Ajouter le code HTML pour les applications

Ouvrez le fichier default.html des projets Windows et Windows Phone, puis copiez le code HTML suivant entre les balises BODY du fichier.


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


Étape 11: Générer l’application

Sélectionnez Générer > Générer la solution pour générer le projet.

Étape 12: Tester l’application

  1. Dans le menu Déboguer, cliquez sur Démarrer le débogage pour tester la solution.
  2. Sur Windows, la première fois que vous exécutez l’exemple, une invite vous demande si l’application peut utiliser votre localisation. Choisissez l’option Autoriser.
  3. Cliquez sur le bouton Obtenir la localisation pour obtenir la localisation actuelle.

Remarque  Si les données de localisation ne s’affichent pas, vérifiez ce qui suit :

  • Assurez-vous d’avoir autorisé l’accès à la géolocalisation en ouvrant package.appxmanifest dans l’Explorateur de solutions et en activant Emplacement sous l’onglet Capacités.
  • Sur Windows, si un administrateur a désactivé les services de localisation, votre application ne sera pas en mesure d’accéder à la géolocalisation de l’utilisateur. Dans le Panneau de configuration du Bureau, ouvrez Modifier les paramètres de localisation et vérifiez que l’option Activer la plateforme de localisation Windows est activée.
  • Sur Windows Phone, l’utilisateur peut désactiver la localisation dans l’application Paramètres. Accédez à l’application Paramètres, sélectionnez localisation et vérifiez que le bouton bascule Services de localisation est activé.

Remarques

Remarque  Sur Windows, le Service de localisation Windows utilise des informations wifi pour déterminer l’emplacement. En l’absence de wifi, il utilise l’adresse IP. Si votre ordinateur n’est pas activé pour le wifi, vous risquez de ne pas obtenir d’événement de mise à jour de localisation, puisque les données d’adresse IP ne sont pas mises à jour fréquemment.

Rubriques associées

Exemple de géolocalisation
Windows.Devices.Geolocation
Recommandations en matière d’applications prenant en charge la géolocalisation

 

 

Afficher:
© 2014 Microsoft