Utilisation donnés GPS

**Caranille** · 25/12/2016, 01h24

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:

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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,

**danielhagnoul** · 25/12/2016, 19h16

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Caranille** · 27/12/2016, 12h41

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,

**danielhagnoul** · 27/12/2016, 21h08

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

**Caranille** · 27/12/2016, 22h14

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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,

**NoSmoking** · 28/12/2016, 09h00

Bonjour,
mets tes données dans un Array.

**Caranille** · 29/12/2016, 12h49

Bonjour,

De cette façon ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 29/12/2016, 16h39

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

Utilisation donnés GPS

JavaScript

Vue hybride

Discussions similaires

Partager

Partager