Windows Dev Center

Répondre aux mises à jour de localisation basées sur la distance (HTML)

[Cette documentation est une version préliminaire qui peut faire l’objet de modifications.]

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

Pour que votre application puisse accéder à la fonction de localisation, l’option Emplacement doit être activée sur l’appareil. Dans l’application Paramètres, vérifiez que les paramètres de confidentialité relatifs à la géolocalisation suivants sont bien activés :

  • Le paramètre Emplacement est activé.
  • Le paramètre Autoriser Windows et les applications sélectionnées à utiliser votre emplacement et l’historique relatif à vos emplacements est activé.
  • Sous Choisir les applications qui peuvent utiliser votre emplacement, votre application est définie sur Activé.

Remarque  Dans certains cas, les paramètres Emplacement et Choisir les applications qui peuvent utiliser votre emplacement ne seront pas disponibles.

É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: Activer la fonctionnalité de localisation

Double-cliquez sur package.appxmanifest dans l’Explorateur de solutions pour les projets Windows et Windows Phone, puis sélectionnez l’onglet Capacités. Activez Emplacement dans la liste Capacités. Cette opération ajoute la fonctionnalité Location de l’appareil au fichier manifeste du package.


  <Capabilities>
    <!-- DeviceCapability elements must follow Capability elements (if present) -->
    <DeviceCapability Name="location"/>
  </Capabilities>

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

Remarques

Remarque  Les services de localisation utilisent un certain nombre de sources différentes pour déterminer l’emplacement. Si le GPS, le Wi-Fi et les stations cellulaires avoisinantes ne sont pas disponibles, ils auront alors recours à l’adresse IP. Dans ce cas, vous risquez de ne pas pouvoir obtenir les événements relatifs aux mises à jour de localisation, puisque les données des adresses IP ne sont pas mises à jour fréquemment.

Rubriques associées

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

 

 

Afficher:
© 2015 Microsoft