Discussion :

[nolookpass8]

Bonjour,

J'ai vu sur plusieurs discussions le problème que je rencontre mais je n'ai pas réussi à le résoudre.

Je m'explique, j'utilise le clustering pour afficher plusieurs points de ma bdd. Cependant il arrive parfois que je dois afficher 2 points qui ont les mêmes coordonnées, je dois absolument les afficher séparément : ce sont des markers qui ont les mêmes coordonnées mais pas les mêmes informations. Ces markers correspondent à des circuits, et certains circuits ont les mêmes coordonnées de départ mais pas les mêmes informations.

J'ai essayé de faire comme ça :

Code :

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

1
2
3
4
5
6
7
8
SELECT ps_product.id_product, ps_product_lang.name, ps_activite.lat, ps_activite.lng, ps_product_lang.description_short
FROM ps_product, ps_product_lang, ps_activiteproduct, ps_activite
WHERE ps_product.id_product = ps_product_lang.id_product
AND ps_activiteproduct.id_product=ps_product.id_product
AND ps_activiteproduct.id_activite=ps_activite.id_activite
AND ps_activiteproduct.position = 0
AND ps_product.active = 1
ORDER BY ps_activite.lat

--> requête qui récupère les informations, triées par la latitude

Code :

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
function load() {
    var options = {
        zoom: 5, //zoom France
        center: new google.maps.LatLng(46.664517, 2.589111) //center France
    };
    var map = new google.maps.Map(document.getElementById("map"), options);
    var infoWindow = new google.maps.InfoWindow();
    downloadUrl("...php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("product");
        var markersClust = [];
        for (var i = 0; i < markers.length; i++) {//i = 0 et i < length pour avoir tous les markers de position = 0
            var j = i + 1;
            var id_product = markers[i].getAttribute("id_product");
            var name = markers[i].getAttribute("name");
            var domaine = markers[i].getAttribute("domaine");
            var description_short = markers[i].getAttribute("description_short");
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            if (lat === parseFloat(markers[j].getAttribute("lat"))) {
                lat === '59';
            }
            var point = new google.maps.LatLng(lat, lng);
            var myMarkerImage = new google.maps.MarkerImage('..bustour.png');
            var marker = new google.maps.Marker({
                position: point,
                icon: myMarkerImage,
                map: map,
                title: name,
                animation: google.maps.Animation.DROP
            });
            markersClust.push(marker);
            for (i = 0; i < markersClust.length; i++)
            {
                markersClust[i];
            }
            var html = "<p style='text-align: justify;'><b>Circuit :</b> " + name + " <a href=" + domaine + ...id_product=" + id_product + "><img src='img/admin/details.gif' title='Voir'/></a><br /><br /><b>Résumé :</b><br />" + description_short + "</p>";
            bindInfoWindow(marker, map, infoWindow, html);
        }
        var markerCluster = new MarkerClusterer(map, markersClust);
    });
 
}

--> ici j'essaie de modifier la latitude (ici 59 juste pour l'exemple) si c'est la même que celle d'après bref je suis un peu perdu ... et j'ai cette erreur : TypeError: markers[j] is undefined

Merci d'avance.

[NoSmoking]

Bonjour,

j'ai cette erreur : TypeError: markers[j] is undefined

faisons abstraction du coté googleMap pour ce concentrer sur le basique de javascript

en regardant ces lignes

Code :

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

1
2
for (var i = 0; i < markers.length; i++) {
  var j = i + 1;

on voit que j sera TOUJOURS égal à i +1, donc SUPERIEUR à i.

Quand i sera sur le dernier index du tableau, length-1, j lui sera en dehors des limites de ce tableau d'où le CRASHhhhhhhhhh

[nolookpass8]

Merci pour la réponse.

Comment je peux faire pour récupérer alors les latitudes qui sont identiques et en modifier une d'un chouilla pour que les markers identiques ne se superposent pas ? J'aimerai faire ça mais en JS je ne suis pas du tout à l'aise, après il existe peut-être une autre solution pour les markers identiques..

[NoSmoking]

Pour que ta boucle ne plante pas il te suffit de tester l'existence du markers[j], donc tu peux écrire

Code :

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

1
2
3
if ( markers[j] && lat === parseFloat(markers[j].getAttribute("lat"))) {
    lat === '59';
}

après il existe peut-être une autre solution pour les markers identiques..

indépendamment du fait qu'il faille que ta boucle fonctionne, tu peux changer la couleur du marqueur, mettre un marqueur plus GROS, mettre une indication sur le marqueur, que sais je encore...

Attention toutefois même latitude ne veux pas forcément dire même longitude

[nolookpass8]

Et la variable J comment est-elle définie avant ?

[NoSmoking]

euhhhhhhhhh!
c'est toi qui la définie lorsque tu écris var j = i + 1;, mais tu pourrais également écrire

Code :

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

1
2
3
if ( markers[ i+1] && lat === parseFloat(markers[ i+1].getAttribute("lat"))) {
    lat === '59';
}

[nolookpass8]

euhhhh oui pardon ! j'ai hésité car dans ton post précédent en parlant de crash je pensais qu'il ne fallait pas déclarer j comme ça.

Bref j'avais quand même essayé ça :

Code :

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
var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("product");
        var markersClust = [];
        for (var i = 0; i < markers.length; i++) {//i = 0 et i < length pour avoir tous les markers de position = 0
            var j = i + 1;
            var id_product = markers[i].getAttribute("id_product");
            var name = markers[i].getAttribute("name");
            var domaine = markers[i].getAttribute("domaine");
            var description_short = markers[i].getAttribute("description_short");
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            if (markers[j] && lat === parseFloat(markers[j].getAttribute("lat"))) {
                lat === '59';
            }
            var point = new google.maps.LatLng(lat, lng);
            var myMarkerImage = new google.maps.MarkerImage('../~voyagere/img/perso/bustour.png');
            var marker = new google.maps.Marker({
                position: point,
                icon: myMarkerImage,
                map: map,
                title: name,
                animation: google.maps.Animation.DROP
            });
            markersClust.push(marker);

Mais ça ne me décale pas mon marker, ça ne change rien en gros, idem avec ça :

Code :

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
var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("product");
        var markersClust = [];
        for (var i = 0; i < markers.length; i++) {//i = 0 et i < length pour avoir tous les markers de position = 0
            var id_product = markers[i].getAttribute("id_product");
            var name = markers[i].getAttribute("name");
            var domaine = markers[i].getAttribute("domaine");
            var description_short = markers[i].getAttribute("description_short");
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            if ( markers[ i+1] && lat === parseFloat(markers[ i+1].getAttribute("lat"))) {
    lat === '59';
}
            var point = new google.maps.LatLng(lat, lng);
            var myMarkerImage = new google.maps.MarkerImage('../~voyagere/img/perso/bustour.png');
            var marker = new google.maps.Marker({
                position: point,
                icon: myMarkerImage,
                map: map,
                title: name,
                animation: google.maps.Animation.DROP
            });
            markersClust.push(

à moins que je n'y comprend rien !!

[NoSmoking]

Attention :

lat === '59';

je n'y ais pas prété attention mais là tu fait un test d'égalité et non une affectation.

Avec une latitude de 59, tu te retrouves au nord de l'Ecosse.

Pour opérer un décalage un simple + 0.001 devrait déjà se voir, à affiner

Code :

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

1
2
3
if ( markers[ i+1] && lat == parseFloat(markers[ i+1].getAttribute("lat"))) {
    lat +=0.001;
}

[nolookpass8]

Oh le c** ! le pire c'est qu'à un moment je l'avais rectifié cette erreur. Merci pour ton aide encore une fois. Dans le forum Google Maps il n'y a que toi décidément. Bon plus qu'à faire pareil pour la longitude.

[nolookpass8]

Après ça fonctionne avec 2 markers identiques, mais si j'en ai 3 .. je croyais avoir résolu le problème mais j'ai encore qq réglages à faire

[Fredd30]

Pour une fois que je peux apporter un peu de mes connaissances

Au lieu de "décaler" les valeurs des positions des markers il existe une librairie Javascript pour ça Spiderfier

Overlapping Marker Spiderfier for Google Maps API v3

Github : https://github.com/jawj/OverlappingMarkerSpiderfier

Demo map : http://jawj.github.io/OverlappingMar...fier/demo.html

J'espère avoir été utile pour ton problème

Cordialement

[nolookpass8]

Merci c'est pas tout mal j'ai réussi à le mettre en place. Le problème c'est qu'il ne me garde pas le clustering. Il me faut absolument garder le clustering.