Javascript trop rapide !

**glucoz21** · 16/04/2010, 09h08

Bonjour à tous.

Voilà 2 jours que je suis sur du Google map via du Javascript pour un programme C# et il y a un petit souci que je n'arrive pas à résoudre.

Pour vous expliquer le fonctionnement de mon application. Je dois être capable, via mon formulaire, de charger un fichier CSV qui contient des adresses, le javascript doit les afficher sur la carte et je dois voir affichée la liste de tous mes points à droite et pouvoir cliquer sur un élément pour le faire apparaitre sur la carte.

Seulement voilà, j'ai l'impression que le Javascript s'exécute trop rapidement, du coup mes points sont bien placés sur la carte mais les infobulles affichées ne correspondent pas (en général ce sont toutes les mêmes correspondant au dernier élément de mon fichier CSV).

Le seul moyen que j'ai trouvé c'est d'ajouter un alert dans le javascript au début de ma boucle afin de mettre "en pause" le javascript pour chaque élément ce qui permet d'avoir les bonnes choses d'affichées (les bons marqueurs, les bonnes infobulles et quand on clique sur un élément dans la liste, ça affiche le bon marqueur avec la bonne infobulle).

J'ai tout essayé mais je ne vois pas comment empêcher d'afficher un alert pour que cela fonctionne.

Merci de me dire ce que vous en pensez.
Je vous joins le code de ma page HTML avec les commentaires qui vont bien.

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
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Google Maps</title>
    <style type="text/css">
        v\:*
        {
            behavior: url(#default#VML);
        }
    </style>
 
    <script src="http://maps.google.com/maps?file=api&v=2&key=maCle"
        type="text/javascript"></script>
 
    <script src="mapiconmaker.js" type="text/javascript"></script>
 
    <script type="text/javascript">
 
            // Déclarations 
            var map = null;
            var geocoder = null;
            var route = null;
            var points = [];
            var routes = [];
            var dernierPoint = null;
            var totalDistance = 0;
            var tabMarker = new Array();
            var tableauMarqueurs = new Array();
            var tableauInfoBulle = new Array();
            var ListeLienHref = "";
            var nbAdresse = 0;
            var resultat = "vrai";
            var arrayLigne = new Array();
            var arrayArgs = new Array();
            var arrayListeAffichee = "";
 
            // Chargement de la page, affichage de la carte et des différents contrôles à afficher sur la carte
            // Ajout de la méthode d'affichage des coordonnées au bas de la carte ainsi que le calcul de distance
            function load() {
                try {
                    map = new GMap2(document.getElementById("map"));
                    geocoder = new GClientGeocoder();
                }
                catch (ex) { alert("Vous devez être connecté à Internet..."); }
                if (map != null) {
                    //Centrer la carte sur "Dijon"(Latitude, Longitude) : zoom = 15
                    map.setCenter(new GLatLng(47.3231, 5.04194), 15);
                    new GKeyboardHandler(map); //flèches clavier activées
                    map.addControl(new GLargeMapControl()); //Zoom
                    map.addControl(new GMapTypeControl()); //Type de carte
                    map.setMapType(G_NORMAL_MAP);
                    map.addControl(new GOverviewMapControl()); //Aperçu général
                    map.addControl(new GScaleControl()); //Echelle
                    map.enableScrollWheelZoom(); // Contrôle du zoom à la souris
                    //Enregistrer l'événement 'clic' de la carte
                    GEvent.addListener(map, 'click', function(overlay, point) {
                        if (point) {
                            var latLngStr = 'Latitude - Longitude ';
                            var distance = 0;
                            if (dernierPoint) //calcul de la distance
                            {
                                distance = dernierPoint.distanceFrom(point);
                                totalDistance = totalDistance + distance;
                                distance = Math.round(distance * 10) / 10;
                            }
                            dernierPoint = point;
                            latLngStr += '(' + point.y + ', ' + point.x + ') ' + distance + 'm => total=' + Math.round(totalDistance * 10) / 10 + 'm';
 
                            var coordonnees = document.getElementById("coordonnees");
                            coordonnees.innerHTML = latLngStr;
                            //ajouter les points à la route
                            if (route) { map.removeOverlay(route); }
                            points.push(point);
                            if (points.length > 1) {
                                route = new GPolyline(points);
                                map.addOverlay(route);
                                routes.push(route);
                            }
                        }
                    });
                }
            }
 
            function showListAddress(listArgs) 
            {
                listArgs = listArgs.substring(0,listArgs.length-1);
                //alert(listArgs);
                arrayLigne = listArgs.split("&");
                // arrayArgs = listArgs.split("|");
                for(x in arrayLigne)
                {
// Alert magique. S'il n'y est pas, le javascript s'exécute trop vite et la liste n'est pas remplie.
                    alert("Veuillez patienter");
                    arrayArgs = arrayLigne[x].split("|");
                    if (geocoder) 
                    {
                        geocoder.getLatLng(arrayArgs[0], function(point) 
                        {
                            if (!point) 
                            {
                                geocoder.getLatLng(arrayArgs[2],function(point2)
                                {
                                    if(!point2)
                                    {
                                        //alert(arrayArgs[0] + " non trouvé");
                                        // nbAdresse++;
                                    }
                                });
                            }
                            else {
                                map.setCenter(point, 15);
                                ListeLienHref += '<ul>';
 
                                var newIcon = MapIconMaker.createMarkerIcon({ width: 40, height: 40, primaryColor: "red" });
 
                                var marker = new GMarker(point, { icon: newIcon });
 
// On ajoute le marqueur sur la carte
                                map.addOverlay(marker);
                                var contenuInfoBulle = '<h3>' + arrayArgs[5] + '</h3>' + arrayArgs[1] + '<br/>' + arrayArgs[2] + '<br/>' + arrayArgs[3]
               // On lui associe l'infobulle créée                 marker.openInfoWindowHtml(contenuInfoBulle);
                                //Enregistrer l'événement 'clic' du marqueur
                                GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(contenuInfoBulle); });
                                // Remplissage de la variable de retour (renvoyée à C# pour affichage dans une listView)
                                arrayListeAffichee += arrayArgs[5] + "|";
                                tabMarker[nbAdresse] = marker;
                                tableauInfoBulle[nbAdresse] = contenuInfoBulle;
// Remplissage de la chaine contenant les liens Href pour un affichage directement en HTML
                                ListeLienHref += '<li><a href="javascript:clickLien(' + nbAdresse + ')">' + arrayArgs[5] + '</a></li>';
                                nbAdresse++;
                                //alert("alert de test");
                            }
                        }
                        );
                    }
                }
                alert("C'est fini !!");
                ListeLienHref += '</ul>';
                document.getElementById("EmplacementDeLaListe").innerHTML = ListeLienHref;
                return arrayListeAffichee;
            }
 
 
            function clickLien(indice) 
            {
                tabMarker[indice].openInfoWindowHtml(tableauInfoBulle[indice]);
            }
 
    </script>
 
</head>
<body onload="load()" onunload="GUnload()">
    <h1>
        Utilisation de Google Maps pour trouver les coordonnées
    </h1>
    <!--<div id="map" style="width: 1000px; height: 600px">
    </div>-->
    <div id="map" style="width: 100%; height: 500px">
    </div>
        Coordonnées : <span id="coordonnees"></span>
 
</body>
</html>

**Gsnalf** · 16/04/2010, 09h36

Ca n'a pas de sens ce que tu dis là, ce n'est pas parce qu'un code est trop rapide que ça va provoquer un décalage entre tes infobulles associés à tes points et tes point eux-même

**glucoz21** · 16/04/2010, 10h12

Non en fait je me suis mal exprimé ...

Le problème est au niveau du retour de ma liste contenant les adresses trouvées.

Si je ne met pas l'alert et que j'ai 10 adresses, ma liste sera composée de 10 adresses identiques. Or sur la carte, les points seront placés correctement.

Si je met l'alert, j'ai bien mes 10 adresses placées correctement et les 10 bonnes valeurs dans la liste (après avoir cliqué 10 fois sur OK).

J'ai l'impression donc que sans l'alert, la liste n'a pas le temps de se remplir...

Invité · 16/04/2010, 15h27

Bonjour,

Peut-être aller voir de ce coté
http://code.google.com/apis/ajax/pla...#event_closure

A+

**Gsnalf** · 16/04/2010, 16h35

J'ai trouvé ton pb et comme l'a montré notre monsieur jlmag, tu as un pb avec les closures.

Passe par une fonction tierce qui elle va t'ajouter l'event en fonction des paramètres que tu lui passes, ça téviteras d'avoir une closure pareil

**papa6** · 17/04/2010, 10h01

Bonjour,

Je suis exactement sur le même problème : script qui se termine malgré l'attente des réponse de GMaps (même si je n'utilise pas directement ton interface).

Je n'ai pas compris ces closure (bien que j'utilise le script GG 'initialize' montré par votre lien)

Voici ce que j'ai essayé, là encore en vain

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type='text/javascript'>
window.onload = function(){
initialize();
var posi = new Array();
while(typeof(posi)=='undefined' || posi == Array())
    {
    posi = showLocation('adresse ville');
    alert('posi plutot ok : ' + posi);
    remplitChamps(posi);
    confirm('intermediaire ok');
    }
alert('totalement fini');
};
</script>

avec les fonctions initialize et showLocation ok (trouvées sur les forums dédiés gg maps et testées 'ok' sur mon site)

Le problème : j'ai l'alerte 'totalement fini' qui s'affiche alors que la variable posi (un tableau longitude+latitude) n'a pas eu le temps d'être retourné

Si vous avez des idées, merci

PS : je sais, c'est un problème récurrent à JS, que l'exécution d'un script sans attendre le retour des variables, à cause du simple 'onLoad' incomplet...)

Javascript trop rapide !

JavaScript

Vue hybride

Discussions similaires

Partager

Partager