Utilisation donnés GPS

Version imprimable

Bonjour tous le monde et Joyeux noël ^^

Si je viens ici c'est car j'ai un soucis j'ai envie d'utiliser l'API GPS pour récupérer les coordonnées GPS de l'utilisateurs sur son smartphone mais même en activant le GPS il m'affiche:

Citation:

User denied the request for Geolocation.

Alors que en Aucun cas mon navigateur me demande si je lui autorise oui ou non la localisation...

Je suis perdu

Voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
<title>Sample Map</title>
<style>
#mapdiv {
        margin: 0;
        padding: 0;
        width: 500px;
        height: 500px;
}
</style>
 
<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/E28411B7-9CA9-3340-9775-3343987918D5/main.js" charset="UTF-8"></script><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDRRrAZjJoXo9GyQI9jdHmTXq0Jkmz"></script>
<script>
        var watchId = null;
        function geoloc() {
        if (navigator.geolocation) {
                var optn = {
                                enableHighAccuracy : true,
                                timeout : Infinity,
                                maximumAge : 0
                };
        watchId = navigator.geolocation.watchPosition(showPosition, showError, optn);
        } else {
                        alert('Geolocation is not supported in your browser');
        }
        }
 
function showPosition(position) {
                var googlePos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                var mapOptions = {
                        zoom : 12,
                        center : googlePos,
                        mapTypeId : google.maps.MapTypeId.ROADMAP
                };
                var mapObj = document.getElementById('mapdiv');
                var googleMap = new google.maps.Map(mapObj, mapOptions);
                var markerOpt = {
                        map : googleMap,
                        position : googlePos,
                        title : 'Hi , I am here',
                        animation : google.maps.Animation.DROP
                };
                var googleMarker = new google.maps.Marker(markerOpt);
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                        'latLng' : googlePos
                        }, function(results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                if (results[1]) {
                                        var popOpts = {
                                                content : results[1].formatted_address,
                                                position : googlePos
                                        };
                                var popup = new google.maps.InfoWindow(popOpts);
                                google.maps.event.addListener(googleMarker, 'click', function() {
                                popup.open(googleMap);
                        });
                                } else {
                                        alert('No results found');
                                }
                                } else {
                                        alert('Geocoder failed due to: ' + status);
                                }
                        });
                        }
 
                        function stopWatch() {
                                if (watchId) {
                                        navigator.geolocation.clearWatch(watchId);
                                        watchId = null;
 
                                }
                        }
 
                function showError(error) {
                var err = document.getElementById('mapdiv');
                switch(error.code) {
                case error.PERMISSION_DENIED:
                err.innerHTML = "User denied the request for Geolocation."
                break;
                case error.POSITION_UNAVAILABLE:
                err.innerHTML = "Location information is unavailable."
                break;
                case error.TIMEOUT:
                err.innerHTML = "The request to get user location timed out."
                break;
                case error.UNKNOWN_ERROR:
                err.innerHTML = "An unknown error occurred."
                break;
                }
                }
                </script>
 
	</head>
	<body onload="geoloc()">
		<p id = 'mapdiv'></p>
		<button onclick="stopWatch()">
			Stop
		</button>
	</body>
</html>

J'ai pourtant suivit le tutoriel de ce site:
http://www.w3schools.com/html/html5_geolocation.asp

Merci d'avance de votre aide car je suis perdu :p

Cordialement,

Ci-dessous, un code qui donne le bon résultat dans la console (touche F12) du navigateur de mon ordinateur, à vous de l'adapter à vos besoins.

Mais attention, pour des raisons de sécurité, la géolocalisation ne fonctionne que sur un serveur local ou https.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
	<title>Sample Map</title>
</head>
<body>
 
	<script>
                var options = {
                        enableHighAccuracy: true,
                        timeout: 5000,
                        maximumAge: 0
                };
                
                function success(pos) {
                        var crd = pos.coords;
                
                        console.log('Your current position is:');
                        console.log('Latitude : ' + crd.latitude);
                        console.log('Longitude: ' + crd.longitude);
                        console.log('More or less ' + crd.accuracy + ' meters.');
                };
                
                function error(err) {
                        console.warn('ERROR(' + err.code + '): ' + err.message);
                };
                
                navigator.geolocation.getCurrentPosition(success, error, options);
        </script>
</body>
</html>

27/12/2016, 12h41
Caranille

Bonjour,

Merci beaucoup de ton aide cela fonctionne et une dernière question y a t'il un moyen comme sur Android (où je développe) d'avoir une fonction onLocationChanged (En gros c'est une fonction qui se lance dès que le GPS détecte une nouvelle position) ou le cas échéant relancer la fonction toutes les X minutes (Car j'avais essayé et c'était une catastrophe...).

Car mon but serait de faire un mini programme en HTML5 qui t'affiche combien de km (ou mètres) tu as marché ou couru.

PS: Je me demande si le site WEB continuera de fonctionner si la personne verrouille son téléphone car je vois mal les gens marcher le téléphone à la main avec le site web en premier plan :p

Cordialement,
27/12/2016, 21h08
danielhagnoul

Voir "Être notifié des changements de position" dans https://developer.mozilla.org/fr/docs/Using_geolocation

Bonjour,

Merci de ton aide car voici l'état du code actuel:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>
 
    <body>
		<script>
                        var i = 0;
                        var xp = 0;
                        var distance = 0;
                        var oldlatitude;
                        var oldlongitude;
                        var newlatitude;
                        var newlongitude;
                        
                        var options = 
                        {
                                enableHighAccuracy: true,
                                timeout: 5000,
                                maximumAge: 0
                        };
                        
                        function success(pos) 
                        {
                                var crd = pos.coords;
                                if (i == 0)
                                {
                                        var oldlatitude = crd.latitude;
                                        var oldlongitude = crd.longitude;
                                        i++;
                                        console.log('Latitude : ' + crd.latitude);
                                        console.log('Longitude: ' + crd.longitude);
                                }
                                else
                                {
                                        var newlatitude = crd.latitude;
                                        var newlongitude = crd.longitude;
                                        xp = xp + distance();
                                        console.log("Distance parcourue" + xp);
                                        var oldlatitude = crd.latitude;
                                        var oldlongitude = crd.longitude;
                                        console.log('Latitude : ' + crd.latitude);
                                        console.log('Longitude: ' + crd.longitude);
                                }
                        };
                        
                        function distance()
                        {
                                var oldDestination = new google.maps.LatLng(oldlatitude, oldlongitude);
                                var newDestination = new google.maps.LatLng(newlatitude, newlongitude);
                                var distance = google.maps.geometry.spherical.computeDistanceBetween(oldDestination, newDestination);
                                return distance;
                        }
                        
                        function error(err) 
                        {
                                console.warn('ERROR(' + err.code + '): ' + err.message);
                        };
                        
                        navigator.geolocation.getCurrentPosition(success, error, options);
                </script>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=*****&libraries=geometry&callback=initialisation"></script>
    </body>
</html>

Et c'est là que j'ai vraiment du mal à voir comment ajouter la fonction qui permet d'actualiser la position (Dans mon code à la première réception des coordonnées GPS je stock la latitude et longitude d'un côté et à la seconde prise de coordonnée GPS je stock la latitude et longitude dans une autre paires de variable pour ensuite calculer la distance)

Et là je sèche :p

Cordialement,

28/12/2016, 09h00
NoSmoking

Bonjour,
mets tes données dans un Array.

Bonjour,

De cette façon ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>
 
    <body>
		<script>
                        var i = 0;
                        var xp = 0;
                        var oldlatlong =  [0, 0];
                        var newlatlong = [0, 0];
                        
                        var options = 
                        {
                                enableHighAccuracy: true,
                                timeout: 5000,
                                maximumAge: 0
                        };
                        
                        function success(pos) 
                        {
                                var crd = pos.coords;
                                if (i == 0)
                                {
                                        oldlatlong[crd.latitude, crd.longitude];
                                        i++;
                                        console.log('Latitude : ' + crd.latitude);
                                        console.log('Longitude: ' + crd.longitude);
                                }
                                else
                                {
                                        newlatlong[crd.latitude, crd.longitude];
                                        xp = xp + distance();
                                        console.log("Distance parcourue" + xp);
                                        oldlatlong[crd.latitude, crd.longitude];
                                        console.log('Latitude : ' + crd.latitude);
                                        console.log('Longitude: ' + crd.longitude);
                                }
                        };
                        
                        function distance()
                        {
                                var oldDestination = new google.maps.LatLng(oldlatlong);
                                var newDestination = new google.maps.LatLng(newlatlong);
                                var distance = google.maps.geometry.spherical.computeDistanceBetween(oldDestination, newDestination);
                                return distance;
                        }
                        
                        function error(err) 
                        {
                                console.warn('ERROR(' + err.code + '): ' + err.message);
                        };
                        
                        navigator.geolocation.getCurrentPosition(success, error, options);
                </script>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=_mNA&libraries=geometry&callback=initialisation"></script>
    </body>
</html>

Car là où je suis bloqué c'est pour la fonction qui doit actualiser la position de l'internaute dès qu'il se déplace ^^

Merci de votre aide ;)

29/12/2016, 16h39
NoSmoking

Je pense qu'il faut, d'en un premier temps, que tu reprennes les notions de bases sur les Array.