Modification information marker sur rightclick, dragend, click

Version imprimable

Bonsoir,

Je souhaite mettre en place la possibilité de créer et supprimer un marker qui me donne la position GPS là où je clique et là où je le déplace.

La création et le déplacement, par clic droit se fait comme ceci (fonctionnel)
Code:

1 2 3 4 5 6 7 8 9 google.maps.event.addListener(map, "rightclick", function (event) { markerWpt = new google.maps.Marker({ position: event.latLng, map: map, title: "WPT Marker : " + formatPosition(event.latLng.lat(), event.latLng.lng()), label: {text: "M", color: "limegreen"}, draggable: true }); });
La suppression se fait comme ceci (fonctionnel)
Code:

1 2 3 4 google.maps.event.addListener(map, "click", function (event) { markerWpt.setMap(null); markerWpt = null; });
2 points ne fonctionnent pas :

- les coordonnées GPS du point que je déplace ne s'actualisent pas.
J'ai cru comprendre que je dois utiliser ceci
Code:

1 2 3 google.maps.event.addListener(markerWpt, "dragend", function (event) { // ici je vois pas que mettre pour que le marker affiche les nouvelles coordonnées });
- Je peux créer un nombre (infini ?) de marker mais seul le dernier créé est supprimé, les autres restent sur la map.
Comment je peux faire pour, soit limiter la création à un seul marker, soit que lors du "click", tous soient pris en compte pour la suppression ?

Merci

20/02/2019, 10h31
NoSmoking

Bonjour,
les réponses à tout ce que tu cherches à faire sont dans
:faq: FAQ API Google Maps
20/02/2019, 13h28
rlelamer

Bonjour NoSmoking.
Désolé d'avoir mal placé le topic ...

J'avais lu la FAQ, c'est comme ça que j'ai trouvé la méthode pour supprimer le marker mais je suis passé à coté de ce point setPosition je pense que c'est cette méthode qu'il me faut pour réaliser ce que je souhaite, je testerais ça ce soir.

En revanche j'ai pas trouvé comment limiter le marker à un seul ou supprimer tous les marker pas seulement le dernier, si tu as un lien ou me rediriger je suis preneur.

Merci d'avoir répondu ;)

Citation:

En revanche j'ai pas trouvé comment limiter le marker à un seu

Il te faut simplement n'en créer qu'un et utiliser toujours le même
Code:

1 2 3 4 5 6 var oMarker = new google.maps.Marker({ "position": {lat: 0, lng: 0}, "map": null, "label": {text: "M", color: "limegreen"}, "draggable": true });
il existe mais n'est pas visible, absence de liaison à une map.

Ensuite sur le rightClick tu lui modifies ce que tu veux
Code:

1 2 3 4 5 google.maps.event.addListener(map, "rightclick", function(event) { oMarker.setPoistion(event.latLng); oMarker.setTitle("WPT Marker : " + formatPosition(event.latLng.lat(), event.latLng.lng())); oMarker.setMap(this); });

Bonsoir NoSmoking,

Merci pour tes précieuses lumières 😉.

J'ai réussi, non sans mal, à créer le déplacement du marker.

Voici le code (complet avec console.log):

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
            var markerWpt = new google.maps.Marker({
                "position": {lat: 0, lng: 0},
                "map": null,
                "label": {text: "M", color: "limegreen"},
                "draggable": true
            });
 
            google.maps.event.addListener(map, "rightclick", function (event) {
                    markerWpt.setPosition(event.latLng);
                    markerWpt.setTitle("WPT Marker : " + formatPosition(event.latLng.lat(), event.latLng.lng()));
                    markerWpt.setMap(this);
                    console.log("event.latLng : " + event.latLng);
                    // event.latLng = (8.792808052344942, -31.983924125000044)
                    console.log("WPT Marker : " + formatPosition(event.latLng.lat(), event.latLng.lng()));
                    // WPT Marker : 8°47'34"N 31°59'02"W
            });
 
            google.maps.event.addListener(markerWpt, "dragend", function (event) {
                var newPosition = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
                markerWpt.setPosition(newPosition);
                markerWpt.setTitle("WPT Marker : " + formatPosition(newPosition));
                console.log("newPosition = " + newPosition);
                // newPosition = (-16.262129946242464, -25.480017875000044)
                console.log("WPT Marker : " + formatPosition(newPosition));
                // WPT Marker : NaN°NaN'NaN"N NaN°NaN'NaN"E
                console.log("WPT Marker : " + formatPosition(event.latLng.lat(), event.latLng.lng()));
                // WPT Marker : 16°15'43"S 25°28'48"W
            });
 
            google.maps.event.addListener(map, "click", function (event) {
                markerWpt.setMap(null);
                // --- supprimé et j'ai compris pourquoi ;)
                //markerWpt = null;
            });

Je suis dans l'incapacité d'exploiter la variable newPosition dans markerWpt.setTitle.
J'ai trouvé une solution pour contourner le problème mais j'aimerais comprendre pourquoi ces valeurs ne sont pas considérées comme des nombres (NaN) mais comme des chaines de caractères...
C'est normal ou le soucis se trouve derrière l'écran (moi) ?

21/02/2019, 11h28
NoSmoking
• première chose :
Code:

1 2 3 google.maps.event.addListener(markerWpt, "dragend", function (event) { var newPosition = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()); markerWpt.setPosition(newPosition);
inutile de (re)positionner le marqueur il l'est d'office.

• deuxième chose :
Code:

1 2 console.log("newPosition = " + newPosition); // newPosition = (-16.262129946242464, -25.480017875000044)
lorsque tu fais un console.log avec un + cela affiche la représentation de ta variable sous forme de chaine et non la « vraie » nature de celle-ci. Il est préférable de mettre une virgule comme séparateur

Code:

console.log("newPosition = ", newPosition); // avec une virgule

tu aurais eu une réponse du type

Code:

newPosition = {lat: 48.37079001323774, lng: -3.9689453124999545}

ce qui est la représentation de l'objet ayant deux propriété lat et lng.

A voir : https://developer.mozilla.org/fr/doc.../Console#Usage

• troisième chose :
La syntaxe de ta fonction formatPosition doit ressembler à quelque chose comme

Code:

texte = function formatPosition( latitude: number, longitude: number)

alors quand tu écris formatPosition(newPosition), tu lui passes un objet, cela ne peut donc pas fonctionner.

Citation:

Envoyé par NoSmoking

• première chose :
inutile de (re)positionner le marqueur il l'est d'office.

Ok vu et mis en place, merci.

Citation:

Envoyé par NoSmoking

• deuxième chose :
lorsque tu fais un console.log avec un + cela affiche la représentation de ta variable sous forme de chaine et non la « vraie » nature de celle-ci. Il est préférable de mettre une virgule comme séparateur

Lu et relu, malgré ça je n'arrive pas à afficher

Code:

newPosition = {lat: 48.37079001323774, lng: -3.9689453124999545}

à la place j'ai :

Code:

newPosition : _.Q*{lat: ƒ, lng: ƒ}

J'ai appliqué ce que tu me dis mais je n'obtiens pas le même résultat que toi en console.
Ce qui n'empêche en rien le fonctionnement correct du code mais ça m'intéresse de comprendre pour que je puisse le réutiliser ultérieurement.

Citation:

Envoyé par NoSmoking

• troisième chose :
La syntaxe de ta fonction formatPosition doit ressembler à quelque chose comme

Oui la fonction est comme tu le dis

Code:

function formatPosition( latitude: number, longitude: number)

J'ai compris le pourquoi du comment.

Voici le code corrigé avec tes conseils:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 // markerWpt : rightlick => enable, click => disable var markerWpt = new google.maps.Marker({ "position": {lat: 0, lng: 0}, "map": null, "label": {text: "M", color: "limegreen"}, "draggable": true }); google.maps.event.addListener(map, "rightclick", function (event) { markerWpt.setPosition(event.latLng); markerWpt.setTitle("WPT Marker : " + formatPosition(event.latLng.lat(), event.latLng.lng())); markerWpt.setMap(this); }); google.maps.event.addListener(markerWpt, "dragend", function (event) { var newPosition = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()); markerWpt.setTitle("WPT Marker : " + formatPosition(newPosition.lat(), newPosition.lng())); }); google.maps.event.addListener(map, "click", function (event) { markerWpt.setMap(null); });

Citation:

Lu et relu, malgré ça je n'arrive pas à afficher
(...)
J'ai appliqué ce que tu me dis mais je n'obtiens pas le même résultat que toi en console.
Ce qui n'empêche en rien le fonctionnement correct du code mais ça m'intéresse de comprendre pour que je puisse le réutiliser ultérieurement.

Effectivement, mais j'ai écris « tu aurais eu une réponse du type » juste pour montrer que c'est un objet que tu récupères.

Citation:

Voici le code corrigé avec tes conseils:

tu peux faire plus direct dans ta fonction sur le dragEng
Code:

1 2 3 4 5 google.maps.event.addListener(markerWpt, "dragend", function (event) { var lat = event.latLng.lat(); var lng = event.latLng.lng(); markerWpt.setTitle("WPT Marker : " + formatPosition(lat, lng)); });
inutile de faire un aller retour pour obtenir la même chose ;)

Bonjour NoSmoking ;),
Merci encore une fois de tes précieux conseils.
Je les ai appliqué et donc la fonction définitive donne ceci :

Code:

1
2
3
4
            google.maps.event.addListener(markerWpt, "dragend", function (event) {
                var newPosition = {lat: event.latLng.lat(), lng: event.latLng.lng()};
                markerWpt.setTitle("WPT Marker : " + formatPosition(newPosition.lat, newPosition.lng));
            });

Avec le console.log(newPosition), j'obtiens bien les objets newPosition: {lat: xxx, lng: xxx}; de ton précédent post, c'était juste une erreur de syntaxe de ma part mais du coup j'ai mieux cerné la chose.

Le code complet pour la création d'un marqueur déplaçable via un clic droit et suppression de celui ci par un clic (gauche) est : (avec les fonctions existantes du 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
            var markerWpt = new google.maps.Marker({
                "position": {lat: 0, lng: 0},
                "map": null,
                "label": {text: "M", color: "limegreen"},
                "draggable": true
            });
 
            google.maps.event.addListener(map, "rightclick", function (event) {
                    markerWpt.setPosition(event.latLng);
                    markerWpt.setTitle("WPT Marker : " + formatPosition(event.latLng.lat(), event.latLng.lng()));
                    markerWpt.setMap(this);
            });
 
            google.maps.event.addListener(markerWpt, "dragend", function (event) {
                var newPosition = {lat: event.latLng.lat(), lng: event.latLng.lng()};
                markerWpt.setTitle("WPT Marker : " + formatPosition(newPosition.lat, newPosition.lng));
            });
 
            google.maps.event.addListener(map, "click", function (event) {
                markerWpt.setMap(null);
            });
 
            // formatPosition()
            function formatPosition(lat, lon) {
                var latDMS = toDMS(lat);
                var lonDMS = toDMS(lon);
                var latString = latDMS.g + "°" + pad0(latDMS.m) + "'" + pad0(latDMS.s) + '"';
                var lonString = lonDMS.g + "°" + pad0(lonDMS.m) + "'" + pad0(lonDMS.s) + '"';
                return latString + ((latDMS.u == 1) ? "N" : "S") + " " + lonString + ((lonDMS.u == 1) ? "E" : "W");
            }
 
            // toDMS()
            function toDMS(number) {
                var u = sign(number);
                number = Math.abs(number);
                var g = Math.floor(number);
                var frac = number - g;
                var m = Math.floor(frac * 60);
                frac = frac - m / 60;
                var s = Math.floor(frac * 3600);
                var cs = roundTo(360000 * (frac - s / 3600), 0);
                while (cs >= 100) {
                    cs = cs - 100;
                    s = s + 1;
                }
                return {
                    "u": u,
                    "g": g,
                    "m": m,
                    "s": s,
                    "cs": cs
                };
            }
 
            // pad0()
            function pad0(val) {
                if (val < 10) {
                    val = "0" + val;
                }
                return val;
            }

Ça pourra peut être servir à un noob comme moi ;)
Je passe ce post en résolu, merci pour tes conseils, j'vais en abuser (si tu le veux bien) sur le marker en lui même sur un autre topic.