Détecter l’emplacement de l’utilisateur (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 ]

Ce didacticiel présente les étapes qui sont nécessaires à la détection de l’emplacement géographique d’un utilisateur à l’aide de l’API de géolocalisation de Windows Runtime.

Objectif: Vous allez découvrir le moyen le plus simple de détecter l’emplacement géographique d’un utilisateur. Dans ce didacticiel, vous allez créer une application simple qui demande une fois les données de localisation. Appeler getGeoPositionAsync une seule fois, comme illustré dans cet exemple, peut suffire pour les applications qui utilisent un emplacement pour une tâche ponctuelle, telle que géobaliser un message électronique. Si la localisation est essentielle pour votre application ou si votre application requiert des mises à jour de localisation, votre application doit traiter les événements de localisation décrits dans Comment répondre aux mises à jour de localisation.

Prérequis

Vous devez être familiarisé avec HTML et JavaScript.

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

                    // Add an event handler to the button.
                    document.querySelector("#getLocation").addEventListener("click",
                        getLoc);
                }));
        }
    };

    var loc = null;

    function getLoc() {
        if (loc == null) {
            loc = new Windows.Devices.Geolocation.Geolocator();
        }
        if (loc != null) {
            loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
        }
    }

    function getPositionHandler(pos) {
        document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
        document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
        document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
        document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(loc.locationStatus);
    }

    function errorHandler(e) {        
        document.getElementById('errormsg').innerHTML = e.message;
        // Display an appropriate error message based on the location status.
        document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(loc.locationStatus);    
    }

    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.";
                break;
            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:
                break;
        }
    }

    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.

<div>
    <p>Click "Get Location" to get geolocation data.</p>
    <br />
    <button id="getLocation">getLocation</button> <br />
</div>
<br/>
<div>
    Latitude: <span id="latitude"></span><br />
    Longitude: <span id="longitude"></span><br />
    Accuracy (in meters): <span id="accuracy"></span><br />
    Location Status: <span id="geolocatorStatus"></span><br />
    Error Message: <span id="errormsg"></span><br />
</div>

7. Générer l’application

Dans le menu Générer, cliquez sur Générer la solution pour générer le projet.

8. Générer l’application

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

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

Récapitulatif

Dans ce didacticiel, vous avez créé une application simple pour détecter l’emplacement actuel de l’utilisateur.

La demande de localisation est initiée dans le code suivant, qui crée un objet Geolocator, appelle getGeoPositionAsync et spécifie les gestionnaires de réussite et d’échec :

function getloc() {
    if (loc == null) {
        loc = new Windows.Devices.Geolocation.Geolocator();
    }
    if (loc != null) {
        loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
    }
}

La fonction getPositionHandler affiche la latitude, la longitude et la précision, si la localisation est disponible :

function getPositionHandler(pos) {
    document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
    document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
    document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
    document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(loc.locationStatus);
}

La fonction errorHandler appelle la fonction d’assistance getStatusString pour afficher un message d’état approprié si la détection d’emplacement n’aboutit pas :

function errorHandler(e) {        
    document.getElementById('errormsg').innerHTML = e.message;
    // Display an appropriate error message based on the location status.
    document.getElementById('geolocatorStatus').innerHTML =
        getStatusString(loc.locationStatus);    
}