Bonjour,

Je vous explique brièvement mon application, c’est une application ou on peut suivre itinéraire gps qui est stocké au format JSON dans un input, l’itinéraire est créé via une autre application qui fonctionne parfaitement. Le problème, c'est que les itinéraires sont destinés à être créé dans les chemins de montagne donc pas d’indication de “tourner à gauche dans 20m” ou “Tourner à telle rue”, j’ai donc choisi d’utiliser leaflet rotated marker et la fonctionnalité “device orientation” pour que quand l’utilisateur point son téléphone dans une direction le marker s’oriente également vers la direction pour trouver le bon chemin, jusque-là tout fonctionne la rotation fonctionne, mais le problème, c'est que le marker s’initialise toujours dans la même direction, le nord magnétique, donc si mon téléphone pointe vers le SUD au chargement de la map, il y aura une incohérence, entre la position de départ du marker et celui du téléphone

// Demande de permission pour l'orientation et obtention de l'orientation initiale
function requestDeviceOrientationPermission() {
    if (typeof DeviceOrientationEvent.requestPermission === 'function') {
        DeviceOrientationEvent.requestPermission()
            .then(permissionState => {
                if (permissionState === 'granted') {
                    window.addEventListener('deviceorientation', handleOrientation, false);
                    // Obtenir l'orientation initiale
                    navigator.geolocation.getCurrentPosition(function(position) {
                        handleOrientation({ alpha: position.coords.heading });
                    });
                } else {
                    alert("Permission to access device orientation was denied.");
                }
            })
            .catch(console.error);
    } else {
        // Pour les navigateurs qui ne nécessitent pas de permission
        window.addEventListener('deviceorientation', handleOrientation, false);
        navigator.geolocation.getCurrentPosition(function(position) {
            handleOrientation({ alpha: position.coords.heading });
        });
    }
}

// Gestion de l'orientation du dispositif
function handleOrientation(event) {
    var alpha = event.alpha; // Angle par rapport au nord magnétique
    var magneticDeclination = 30; // La déclinaison magnétique peut varier en fonction de votre localisation
    var deviceDirection = (360 - (alpha + magneticDeclination)) % 360; // Ajustement pour le nord géographique

    console.log("Orientation du dispositif: " + deviceDirection + " degrés");

    if (userMarker) {
        userMarker.setRotationAngle(deviceDirection); // Mettre à jour l'angle du marqueur
    }

    if (directionMarker) {
        directionMarker.setRotationAngle(deviceDirection); // Mettre à jour la direction de la flèche
    }
}

document.getElementById('loadRoute').addEventListener('click', loadRoute);
document.getElementById('loadRoute').addEventListener('click', function() {
    requestDeviceOrientationPermission();
});

window.onload = initMap;

Piste parcouru

"Leaflet-compass","Gyro.js","OSRM"

1 réponse


Tu dis que le marker s'oriente vers le Nord magnétique c'est à dire que la carte (si on retire ta logique d'orientation) montre un curseur qui va vers le nord de la carte virtuelle c'est ça ?