Langage: HTML | XAML

Comment répondre aux mises à jour de localisation en HTML5 (applications Windows Runtime en JavaScript et HTML)

Applies to Windows and Windows Phone

Cette rubrique vous montre comment répondre aux changements de position géographique de l’utilisateur, à l’aide de l’API de géolocalisation W3C dans HTML5.

Prérequis

Vous devez être familiarisé avec HTML et JavaScript.

Instructions

Étape 1: Ouvrir Microsoft Visual Studio

Ouvrez une instance de Visual Studio.

Étape 2: 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 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("#watchLoc").addEventListener("click",
                        watchloc);

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

                }));
        }
    };

    var loc = null;
    var watchId;

    function watchloc() {
        if (loc == null) {
            loc = window.navigator.geolocation;
        }
        if (loc != null) {
            watchId = loc.watchPosition(successCallback);
        }
    }

    function stopwatching() {
        loc.clearWatch(watchId);
    }

    function successCallback(pos) {
        document.getElementById('latitude').innerHTML = pos.coords.latitude;
        document.getElementById('longitude').innerHTML = pos.coords.longitude;
        document.getElementById('accuracy').innerHTML = pos.coords.accuracy;
    }

    function errorCallback(error) {
        var strMessage = "";

        // Check for known errors
        switch (error.code) {
            case error.PERMISSION_DENIED:
                strMessage = "Access to your location is turned off. " +
                    "Change your settings to turn it back on.";
                break;
            case error.POSITION_UNAVAILABLE:
                strMessage = "Data from location services is " +
                    "currently unavailable.";
                break;
            case error.TIMEOUT:
                strMessage = "Location could not be determined " +
                    "within a specified timeout period.";
                break;
            default:
                break;
        }
        document.getElementById("status").innerHTML = strMessage;
    }


    app.start();
})();


Étape 6: 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.


    Geolocation Event Sample<br />
    <br />

    <button id="watchLoc">Watch Location</button><br />
    <button id="stopWatching">Stop Watching</button><br />
    Latitude: <span id="latitude">Waiting for update...</span><br />
    Longitude: <span id="longitude">Waiting for update...</span><br />
    Accuracy: <span id="accuracy">Waiting for update...</span><br />
    <span id="status"> </span><br />


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

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

Étape 8: 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

Sur Windows, il est recommandé de tester les mises à jour de localisation à l’aide d’un ordinateur Wi-Fi, car le Service de localisation Windows utilise la triangulation Wi-Fi pour résoudre les localisations. Lorsque la localisation est résolue, les événements qui indiquent que des mises à jour ont eu lieu sont déclenchés. Si vous utilisez un ordinateur sur lequel le Wi-Fi n’est pas activé, la localisation est basée sur l’adresse IP, et vous risquez de ne pas obtenir d’événements de mise à jour de localisation.

Rubriques associées

Exemple de géolocalisation

 

 

Afficher:
© 2014 Microsoft