Un traitement javascript qui ne s'arrête pas

**Msysteme** · 07/01/2015, 10h53

Bonjour, j'ai une carte google map avec deux boutons "all" et "initialiser", le premier affiche tous les points sur ma carte et le deuxieme me nettoie la carte en supprimant tous les markers

Mon probleme c'est quand je clique sur le bouton all, la map commence a m'afficher tous les points un par un, a ce moment la si je clique sur le bouton initialiser il doit revenir a position initial avec une carte bien nettoyée mais ce n'est pas le cas car la carte continue a m'afficher les points jusqu'à la fin, vous avez une idée ?

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
function clearOverlays() {
 
    if (markers) {
        for (i in markers) {
            markers[i].setMap(null);
        }
        markers = [];
        infos = [];
    }
    if (directionsDisplay.getDirections() != null) {
        directionsDisplay.setMap(null);
        directionsDisplay = new google.maps.DirectionsRenderer();
    }
    //initialize();
}

Code :

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

1
2
3
4
5
6
7
8
9
function findAllAddress(tabStation) {
    clearOverlays();
    var n = tabStation.length;
 
 
    for (var i = 0; i < n; i++) {
        findAddress2(tabStation[i][0], tabStation[i][1], tabStation[i][2], tabStation[i][3]);
        }
}

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
function findAddress2(adresse, name, lt, lg) {
 
    var lat = parseFloat(lt.replace(',','.'));
    var lng = parseFloat(lg.replace(',','.'));
 
    var latlng = new google.maps.LatLng(lat, lng);
 
    var address = adresse;  
 
    // script uses our 'geocoder' in order to find location by address name
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) { // and, if everything is ok
 
            // we will center map
            var addrLocation = latlng;
            map.setCenter(addrLocation);
 
            // store current coordinates into hidden variables
            document.getElementById('lat').value = lat;
            document.getElementById('lng').value = lng;
 
            // and then - add new custom marker and Infowindow
            var addrMarker = new google.maps.Marker({
 
                position: addrLocation,
                map: map,
                title: results[0].formatted_address
                //animation: google.maps.Animation.BOUNCE
            });
 
            iconFile = 'https://maps.gstatic.com/mapfiles/ms2/micons/gas.png';          
            addrMarker.setIcon(iconFile) ;
 
            var infowindow = new google.maps.InfoWindow({
            content: '<DIV STYLE="line-height:1.35;overflow:hidden;white-space:nowrap;"><DIV STYLE=overflow:auto; width:50px; height:50px><font style="color:#000;">' + name +
            '<br /></font></div></div>'
 
            });
 
            google.maps.event.addListener(addrMarker, 'click', function (data) {
                            infowindow.open(map, addrMarker);
            });
 
 
            markers.push(addrMarker);
 
            addrMarker.indice = markers.length - 1;
 
            // suppression du marker sur dblclick
            google.maps.event.addListener(addrMarker, 'dblclick', function (data) {
                this.setMap(null);
                var ind = this.indice;
                markers.splice(ind, 1);
                // r?©ajuste les indices des autres marqueurs
                for (; markers[ind]; ind++) {
                    markers[ind].indice = ind;
                }
            });
        } 
         else{
      // on traite l'erreur OVER_QUERY_LIMIT
      if( status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT){
        // relance la requete
        setTimeout( function(){
          findAddress2(adresse, name, lt, lg); // rappel fonction avec meme param
        }, 200);
      }
      }
    });
}

**NoSmoking** · 08/01/2015, 23h33

Bonjour,

...car la carte continue a m'afficher les points jusqu'à la fin, vous avez une idée ?

OUI, ta fonction étant une fonction asynchrone le retour se fait...après...un laps de temps certain

Si tu veux interrompre le traitement il te faut gérer un flag qui laissera s'exécuter ou non le code en cours

exemple:

Code :

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

1
2
3
4
5
var flagInitialisation = false; // variable globale
oBtnInitialisation.onclick = function(){
  flagInitialisation = true;
  // la suite du code de la fonction
};

maintenant dans la fonction de récupération

Code :

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

1
2
3
4
5
6
7
8
9
10
function findAddress2(adresse, name, lt, lg) {
    if( flagInitialisation){
        return; // on ne va pas plus loin
    } 
    // ...
    // la suite du code
    // ...
    if (status == google.maps.GeocoderStatus.OK && !flagInitialisation){
        // le code si OK
    }

**Msysteme** · 29/01/2015, 23h21

Le programme ne s'arrete pas.la fonction alladdress localise un point par point et quand je clique sur le bouton initialiser le programme continue a mettre les markers

Code :

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

var flagInitialisation = false;

Code :

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

1
2
3
4
5
function initialize() {
 
    flagInitialisation =  true;
....
}

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
function findAddress2(adresse, name, lt, lg) {
alert(flagInitialisation);
if( flagInitialisation){
        return; // on ne va pas plus loin
    } 
 
    var lat = parseFloat(lt.replace(',','.'));
    var lng = parseFloat(lg.replace(',','.'));
 
    var latlng = new google.maps.LatLng(lat, lng);
 
    var address = adresse;  
 
    // script uses our 'geocoder' in order to find location by address name
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK && !flagInitialisation) {
....
}

**NoSmoking** · 30/01/2015, 14h14

Tu dois avoir un problème de séquencement dans ton code, montre nous l’entièreté de celui ci.

**Msysteme** · 30/01/2015, 14h38

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
var geocoder;
var map;
var oImage;
var markers = Array();
var infos = Array();
var rendererOptions = {
    draggable: true
};
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
 
var flagInitialisation = false;
 
function initialize() {
flagInitialisation =  true;
    // Check connexion
        var status = navigator.onLine;
        if (status) {
        } else {
            alert("Pas de connexion internet");
        }
 
 
    // prepare Geocoder
        geocoder = new google.maps.Geocoder();
 
        directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
 
        // set initial position (ville)
        var myLatlng = new google.maps.LatLng(34.2500000, -6.5833330);
 
        var myOptions = { // default map options
            zoom: 14,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
 
            panControl: true,
            panControlOptions: {
                position: google.maps.ControlPosition.TOP_RIGHT
            },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.RIGHT_TOP
            },
            scaleControl: true,
            streetViewControl: true,
            streetViewControlOptions: {
                position: google.maps.ControlPosition.LEFT_BOTTOM
            },
 
            mapTypeControl: true,
            mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BOTTOM_CENTER
            }
        };
 
        map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
        directionsDisplay.setMap(map);
 
        google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {
            computeTotalDistance(directionsDisplay.getDirections());
        });
 
        google.maps.event.addListener(map, 'rightclick', function (event) {
            if (directionsDisplay.getDirections() == null) {
                clearOverlays();
                clearForm();
                placeMarker(event.latLng);
            }
            else {
                loadItineraire(directionsDisplay.getDirections());
            }
 
        });
 
}
function findAllAddress(tabStation) {
    clearOverlays();
    var n = tabStation.length;
 
 
    for (var i = 0; i < n; i++) {
        findAddress2(tabStation[i][0], tabStation[i][1], tabStation[i][2], tabStation[i][3]);
        }
}
function findAddress2(adresse, name, lt, lg) {
 
    var lat = parseFloat(lt.replace(',','.'));
    var lng = parseFloat(lg.replace(',','.'));
 
    var latlng = new google.maps.LatLng(lat, lng);
 
    var address = adresse;  
 
    // script uses our 'geocoder' in order to find location by address name
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK  && !flagInitialisation) { // and, if everything is ok
 
            // we will center map
            var addrLocation = latlng;
            map.setCenter(addrLocation);
 
            // store current coordinates into hidden variables
            document.getElementById('lat').value = lat;
            document.getElementById('lng').value = lng;
 
            // and then - add new custom marker and Infowindow
            var addrMarker = new google.maps.Marker({
 
                position: addrLocation,
                map: map,
                title: results[0].formatted_address
                //animation: google.maps.Animation.BOUNCE
            });
 
            iconFile = 'https://maps.gstatic.com/mapfiles/ms2/micons/gas.png';          
            addrMarker.setIcon(iconFile) ;
 
            var infowindow = new google.maps.InfoWindow({
            content: '<DIV STYLE="line-height:1.35;overflow:hidden;white-space:nowrap;"><DIV STYLE=overflow:auto; width:50px; height:50px><font style="color:#000;">' + name +
            '<br /></font></div></div>'
 
            });
 
            google.maps.event.addListener(addrMarker, 'click', function (data) {
                            infowindow.open(map, addrMarker);
            });
 
 
            markers.push(addrMarker);
 
            addrMarker.indice = markers.length - 1;
 
            // suppression du marker sur dblclick
            google.maps.event.addListener(addrMarker, 'dblclick', function (data) {
                this.setMap(null);
                var ind = this.indice;
                markers.splice(ind, 1);
                // r?©ajuste les indices des autres marqueurs
                for (; markers[ind]; ind++) {
                    markers[ind].indice = ind;
                }
            });
        } 
         else{
      // on traite l'erreur OVER_QUERY_LIMIT
      if( status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT){
        // relance la requete
        setTimeout( function(){
          findAddress2(adresse, name, lt, lg); // rappel fonction avec meme param
        }, 200);
      }
      }
    });
}

Code :

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

1
2
3
 
btnInit.Attributes.Add("onClick", "javascript:initialize(); return false;");
BtnStations.Attributes.Add("onClick", "javascript:findAllAddress(" + result + "); return false;");

**NoSmoking** · 31/01/2015, 07h00

Les initialisations de ton flag ne sont pas au bon endroit et tu ne mets pas les tests également au bon endroit !

Je ne vois pas comment tu modifies efficacement le flag!

Change peut être le nom de la variable en bStop, cela prêtera peut être moins à confusion.

**Msysteme** · 26/02/2015, 15h44

le bstop ne va pas résoudre mon problème :

j'ai deux bouton :

All : affiche mes agences sur une carte, il les affiche une par une meme si je veux les afficher en une seule fois
Initialiser : nettoie la carte et supprime tous les points sur la carte et revient a une carte centralisé sur le un point X,Y

quand je clique sur all, cela veut dire que bstop est a true, les agence commence a apparaitre sur la carte, si je clique sur initialiser, la carte reviens centralisé pendant un abse de temps puis le traitement déclenché via all continue a s'exécuter.

cela veut dire que le bstop ne va me servire a rien.

j'espere que c'est clair

Ce que je souhaite faire c'est de localiser mes agences en une seule fois cela va resoudre 50% du problème
et quand je clique sur initialiser j'arrete le traitement javascript

Un traitement javascript qui ne s'arrête pas

APIs Google

Discussions similaires

Partager

Partager