Détecter l’emplacement en HTML5 (HTML)

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

Ce didacticiel vous montre comment détecter la position géographique d’un utilisateur, en utilisant l’API de géolocalisation W3C fournie par HTML5.

Objectif: Pour apprendre à détecter la position géographique d’un utilisateur avec HTML5.

Prérequis

Vous devez être familiarisé avec HTML et JavaScript.

Durée de réalisation: 20 minutes.

Instructions

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

2. Ouvrir Microsoft Visual Studio

Ouvrez une instance de Visual Studio.

3. Créer un projet

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

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>

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 () {

                }));
        }
    };
(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("#requestPosition").addEventListener("click",
                        requestPosition);

                }));
        }
    };

    var nav = null;

    function requestPosition() {
        if (nav == null) {
            nav = window.navigator;
        }

        var geoloc = nav.geolocation;
        if (geoloc != null) {
            geoloc.getCurrentPosition(successCallback, errorCallback);
        }

    }

    function successCallback(position) {
        document.getElementById("latitude").innerHTML =
            position.coords.latitude;
        document.getElementById("longitude").innerHTML =
            position.coords.longitude;

    }

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

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.

    <label for="latitude">Latitude: </label> <div id="latitude"></div><br />
    <label for="longitude">Longitude: </label> <div id="longitude"> </div><br />
    <div id="status"> </div><br />

    <button id="requestPosition">Get Latitude and Longitude</button><br />

7. Générer l’application

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

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

Récapitulatif

Dans ce didacticiel, vous avez créé une application simple qui a détecté l’emplacement géographique d’un utilisateur avec HTML5. Pour plus d’informations, consultez la rubrique Construction d’une page Web prenant en charge la localisation.

Rubriques associées

Exemple de géolocalisation Windows 10

Exemple de géolocalisation Windows 8.1

Exemples du Kit de développement logiciel (SDK) des cartes Bing