Démarrage rapide : détection de l’emplacement géographique d’un utilisateur (HTML)

Applies to Windows and Windows Phone

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

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.

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

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

À l’intérieur de la fonction anonyme immediately-invoked dans le fichier default.js, ajoutez le code suivant.

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

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

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 de localisation 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);    
}

Rubriques associées

Exemple de géolocalisation
Exemples du Kit de développement logiciel (SDK) des cartes Bing
Windows.Devices.Geolocation

 

 

Afficher:
© 2014 Microsoft