Tutorial Phonegap - Géolocalisation

Phonegap permettant de développer des 'web apps' permet d'accéder aux capteurs du périphérique et ce, sur la plupart des plateformes mobiles. On utilise ici HTML5, javascript et CSS.

Le tutorial suivant vous montre le code nécessaire pour une mise en oeuvre rapide.

Géolocalisation avec Phonegap

1. Préalable : Créer un projet Phonegap (ici avec XCode 4)

2. Référencer dans la page HTML (ici dans le projet une seule page est présente), le code javascript correspondant à la version de Phonegap :

3. Insérer le code permettant au système d'appeler la 'callback' deviceready

document.addEventListener("deviceready", onDeviceReady, false);

4. Dans la callback 'onDeviceReady' on met en place le code nécessaire

function onDeviceReady() {

            alert("device pret");

            navigator.geolocation.getCurrentPosition(onSuccess, onError);

        }

L'instruction : 'navigator.geolocalisation.getCurrentPosition(...)' permet de lancer une requête de géolocalisation.

5. Voici la callback qui affiche à l'écran les coordonnées de géolocalisation

// onSuccess Geolocation

function onSuccess(position) {

   alert( "onSuccess !" );

            

   var element = document.getElementById('geolocation');

   element.innerHTML = 'Latitude: ' + position.coords.latitude + '
' +

            'Longitude: '          + position.coords.longitude             + '
' +

            'Altitude: '           + position.coords.altitude              + '
' +

            'Accuracy: '           + position.coords.accuracy              + '
' +

            'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '
' +

            'Heading: '            + position.coords.heading               + '
' +

            'Speed: '              + position.coords.speed                 + '
' +

            'Timestamp: '          + new Date(position.timestamp)          + '
';

        }

6. Voici le source de la page HTML en entier

7. Capture d'écran du résultat final sur le smartphone