Répondre aux mises à jour de localisation en HTML5 (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

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

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 de cet appareil... est activé (non applicable dans Windows 10 Mobile).
Le paramètre des services de localisation Emplacement est activé.
Sous Choisir les applications qui peuvent utiliser votre emplacement, votre application est définie sur Activé.

É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("#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

Dans le menu Déboguer, cliquez sur Démarrer le débogage pour tester la solution.
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.
Cliquez sur le bouton Obtenir la localisation pour obtenir la localisation actuelle.

Remarques

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

Exemple de géolocalisation Windows 8.1

Partager via