Portée des variables

Version imprimable

Bonjour,

J'essaie de créer des marqueurs sur une carte via l'api google maps.
Je commence par construire ma variable sur le modèle de la FAQ :
http://javascript.developpez.com/faq...owBonAffichage

Dans ma page, j'affiche des adresses dans des champs cachés :

Code:

1
2
3
4
<input type="hidden" name="nbadresses" id="nbadresses" value="2">
<div id="map-canvas"></div>
<input type="hidden" id="adresse1" value="2, rue de Rivoli<br>75004 PARIS">
<input type="hidden" id="adresse2" value="7, boulevard Magenta<br>75010 PARIS">

Voilà mon code pour créer mon tableau d'éléments :

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
var strpositions = new Array();
function TrouverAdresse()
{
	var nbadresses = document.getElementById('nbadresses').value;
	var tMarker = "["
	// Création du tableau des adresses
	for (var i = 1; i <= nbadresses; i++)
		{
		var adresse = eval("document.getElementById('adresse" + i + "').value");
		geocoder = new google.maps.Geocoder();
		geocoder.geocode( { 'address': adresse}, function(results, status)
			{
			if (status == google.maps.GeocoderStatus.OK)
				{
				var strposition = results[0].geometry.location+"";
				//Supprimer les parenthèses
				strposition = strposition.replace('(', '');
				strposition = strposition.replace(')', '');
				//Mettre en tableau les lat et lon de l'adresse courante
				strpositions = strposition.split(',');
				}
			});
alert(strpositions[0]);
				tMarker += "{'lat' :" + strpositions[0] + ", 'lon' :" + strpositions[1] + ", 'title' :'Ouvrir', 'info' :'" + adresse + "'},\n";
		}
		//Supprimer la dernière virgule
		tMarker = tMarker.substring(0,tMarker.length-1);
		//Ajouter le crochet fermant
		tMarker += "];";
//alert(tMarker);
}

Le alert(strpositions[0]); m'affiche undefined.
Pourtant j'ai l'impression que mes déclarations sont correctes, non ?

Si quelqu'un voit où je fais une erreur ?

Merci.

16/01/2014, 14h20
Bovino

Tout d'abord

Code:

var adresse = eval("document.getElementById('adresse" + i + "').value");

:vomi:

Quelle est ici l'intérêt d'utiliser l'immonde eval() ? :no:

Sinon, ta variable strpositions est définie (via le mot clé var) dans la fonction de rappel de la méthode geocode(). Elle n'existe donc que dans le contexte de celle-ci et quand tu essayes d'y accéder en dehors de cette fonction, ben... elle n'existe logiquement plus. D'où le undefined.
16/01/2014, 14h28
pc75

Re,

Merci de ton intervention.

Pour ta 1ère remarque :

Citation:

Quelle est ici l'intérêt d'utiliser l'immonde eval() ?

Je ne connais pas à l'avance le nombre de champs cachés.
Je les crée dynamiquement depuis les données d'une BDD.
Je ne vois pas quelle autre méthode je pourrai utiliser.

Pour ta 2ème remarque :
La variable strpositions (au pluriel) est bien définie au niveau global, non ?
C'est la variable strposition (au singulier) qui est déclarée dans la fonction geocode().

Merci.
16/01/2014, 14h40
Bovino

Il n'y a aucune raison d'utiliser eval() dans ce contexte...

Code:

var adresse = document.getElementById('adresse' + i).value;

est largement suffisant. De plus, c'est aussi une mauvaise pratique de définir une variable à l'intérieur d'une boucle puisqu'une boucle ne crée pas de contexte spécifique.

Pour revenir à ton problème, effectivement, je n'avais pas fait attention au pluriel...
En fait, tu obtiens undefined parce que la méthode geocode() est asynchrone, donc quand tu sors de la fonction de rappel, les réponses n'ont pas encore été reçues et ta variable n'est pas valorisée.
16/01/2014, 14h47
pc75

OK, merci pour le eval.

J'ai également sorti la déclaration de ma boucle.

Et pour ma variable undefined, il existe une solution ?
(Je ne suis pas un pro de javascript).

Met l'alert à l'intérieur de la fonction ;)
Dis toi que strpositions n'est visible QUE à l'intérieur de cette fonction. Donc, si des traitements utilisent cette variable, mets les dans la fonction.

On appelle ce genre fonction : une fonction de rappel (callback function).
Cela veut dire que cette fonction est exécutée une fois que geocode a fini son boulot.

Cela a un nom : le Continuation-Passing Style. Le fait de dire à JavaScript, exécute cette fonction quand tu as fini d'exécuter cette fonction.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 geocoder.geocode( { 'address': adresse}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var strposition = results[0].geometry.location+""; //Supprimer les parenthèses strposition = strposition.replace('(', ''); strposition = strposition.replace(')', ''); //Mettre en tableau les lat et lon de l'adresse courante strpositions = strposition.split(','); alert(strpositions[0]); } });

OK, ça j'avais à peu près compris.

Par contre, si je continue mon 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
 
var strpositions = new Array();
function TrouverAdresse()
{
	var nbadresses = document.getElementById('nbadresses').value;
	var strposition;
	var tMarker = "[";
	// Création du tableau des adresses
	for (var i = 1; i <= nbadresses; i++)
		{
		var adresse = document.getElementById('adresse' + i).value;
		geocoder = new google.maps.Geocoder();
		geocoder.geocode( { 'address': adresse}, function(results, status)
			{
			if (status == google.maps.GeocoderStatus.OK)
				{
				strposition = results[0].geometry.location+"";
				//Supprimer les parenthèses
				strposition = strposition.replace('(', '');
				strposition = strposition.replace(')', '');
				//Mettre en tableau les lat et lon de l'adresse courante
				strpositions = strposition.split(',');
//alert(strpositions[0]);
				}
			});
				tMarker += "{'lat' :" + strpositions[0] + ", 'lon' :" + strpositions[1] + ", 'title' :'Ouvrir', 'info' :'" + adresse + "'},\n";
alert(tMarker);
		}
		//Supprimer la dernière virgule
		tMarker = tMarker.substring(0,tMarker.length-1);
		//Ajouter le crochet fermant
		tMarker += "];";
}

Ca ne fonctionne plus, car pour construire ma variable tMarker, je dois utiliser strpositions[0].
De plus, si je fais un alert(adresse) à la ligne 23, ça m'affiche toujours la dernière adresse de mes input.

Je tourne en rond...

Plusieurs problèmes dans tout ça en effet.

1 - Pourquoi construire un tableau de marker ? Pourquoi ne pas placer le marker directement sur la map dans la fonction de rappel ? Peut-être que ce Fiddle pourrait t'aider.

2 -

Citation:

De plus, si je fais un alert(adresse) à la ligne 23, ça m'affiche toujours la dernière adresse de mes input.

C'est normal, mais c'est un point des plus chauds à comprendre de JavaScript je pense.

geocode est asynchrone. ça veut dire quoi ? Que ta boucle va continuer à tourner sans attendre que geocode se termine. La variable adresse va donc continuer à changer, alors que la fonction de rappel du premier geocode n'aura même pas été encore appelée une fois ! Du coup, lorsque la fonction de rappel est appelée pour la première fois, adresse a déjà atteint sa valeur max.

Pour comprendre, un exemple simple :
Code:

1 2 3 4 5 for(var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 1000); }
Ce code, va afficher 3, trois fois. Et non, 0 puis 1 puis 2 comme on pourrait se le dire.
Comme geocode, setTimeout est asynchrone. Si on décortique la boucle, ceci se passe en quelques micro secondes :
- Premier tour, i vaut 0. On demande d'afficher i au bout de 1 seconde.
- Deuxième tour, i vaut 1. On demande d'afficher i au bout de 1 seconde.
- Troisième tour, i vaut 2. On demande d'afficher i au bout de 1 seconde.
- Fin de boucle, i vaut 3.

Une seconde plus tard, JavaScript affiche ce qu'on lui a dit d'afficher :
- J'affiche i, J'affiche i, J'affiche i. (soit 3 fois le chiffre 3).

Tu comprends ? C'est ce qui se passe avec ta variable adresse. Tu lui dis d'utiliser geodecode sur adresse autant de fois qu'il y a d'adresses. Sauf qu'au moment où ta fonction de rappel est réellement appelée, adresse a déjà sa valeur finale.

Pour résoudre ce problème, il faut figer la valeur de i dans une autre variable ou alors un autre environnement (contexte) à chaque tour de boucle. Ainsi, chaque boucle aura sa propre valeur. Plusieurs solutions :

1 - Utiliser une IIFE (Immediately Invoked Function Expression). Cela crée un nouveau contexte, avec un i_bis emprisonnant la valeur de i à chaque tour de boucle.
Code:

1 2 3 4 5 6 7 8 for(var i = 0; i < 3; i++) { setTimeout( (function(i_bis) { return function() { console.log(i_bis); } }(i)), 1000); }
2 - Utiliser une closure. Similaire à la première solution, sauf que l'on invoque pas une fonction immédiatement. On la définit ailleurs (si jamais tu veux réutiliser la closure)
Code:

1 2 3 4 5 6 7 8 9 10 // La closure function enfermerVariable(variableEnfermee) { return function() { console.log(variableEnfermee); } } for(var i = 0; i < 3; i++) { setTimeout(enfermerVariable(i), 1000); }
3 - Function.bind (attention compatibilité IE8- ).
Code:

1 2 3 4 5 for(var i = 0; i < 3; i++) { setTimeout(function(variableEnfermee){ console.log(variableEnfermee); }.bind(null, i), 1000); }
Dans le Fiddle que je t'ai fourni ci avant, la solution 1 est utilisée.

16/01/2014, 18h46
NoSmoking

Bonjour,
je me permet d'en remettre une couche, (eu égard ton post précédent), avec la :faq:
Pourquoi l'InfoWindow n'affiche rien quand je clique sur le marker ?

mais tout est dit dans ce qu'a écrit Kaamo.

Bonjour et merci à vous deux.

Malheureusement, ça atteint un niveau bien trop élevé pour moi.
Je suis largué.

Je me suis dit, "pas grave", je vais stocker les coordonnées en base quand l'utilisateur fera une création ou une modification d'une adresse.
J'ai un écran de saisie qui ressemble à ça :

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
<table border="0" align="center">
	<tr>
		<td>
			<font face="Arial" color="#0099CC" size="2">
			<strong>Voie :</strong>
			</font>
		</td>
		<td>
			<input type="text" name="txtVoie" id="txtVoie" value="<%=Str_Voie%>" size="100" maxlength="255">
		</td>
	</tr>
	<tr>
		<td>
			<font face="Arial" color="#0099CC" size="2">
			<strong>Code postal :</strong>
			</font>
		</td>
		<td>
			<input type="text" name="txtPostal" id="txtPostal" value="<%=Str_Postal%>" size="10" maxlength="5">
		</td>
	</tr>
	<tr>
		<td>
			<font face="Arial" color="#0099CC" size="2">
			<strong>Ville :</strong>
			</font>
		</td>
		<td>
			<input type="text" name="txtVille" id="txtVille" value="<%=Str_Ville%>" size="100" maxlength="255">
		</td>
	</tr>
</table>
<br><br>
<table align="center">
	<tr>
		<td>
			<span style="cursor:pointer;">
			<img src="../Images/valider.gif" OnClick="VerifSaisie()" border="0" alt="Valider" WIDTH="100" HEIGHT="25">
			</span>
		</td>
		<td>
			<a href="Default.asp">
			<img src="../Images/annuler.gif" border="0" alt="Annuler" WIDTH="100" HEIGHT="25">
			</a>
		</td>
	</tr>
</table>
</form>

Et ma fonction VerifSaisie :

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
function VerifSaisie(){
	if (document.getElementById('txtVoie').value == ''){
		alert('La voie est obligatoire');
		document.getElementById('txtVoie').focus();
	}
	else if (document.getElementById('txtPostal').value == ''){
		alert('Le code postal est obligatoire');
		document.getElementById('txtPostal').focus();
	}
	else if (document.getElementById('txtVille').value == ''){
		alert('La ville est obligatoire');
		document.getElementById('txtVille').focus();
	}
	else{
		voie = document.getElementById('txtVoie').value;
		postal = document.getElementById('txtPostal').value;
		ville = document.getElementById('txtVille').value;
		adresse = voie + ' ' + postal + ' ' + ville;
		geocoder = new google.maps.Geocoder();
		geocoder.geocode( { 'address': adresse}, function(results, status){
		if (status == google.maps.GeocoderStatus.OK){
			latitude = results[0].geometry.location.lat();
			document.getElementById('Latitude').value = latitude;
		}});
		if (document.getElementById('Action').value == 'Creer'){
			document.frmSaisie.action = 'SqlInsert.asp';
			document.frmSaisie.submit();
		}
		else if (document.getElementById('Action').value == 'Modifier'){
			document.frmSaisie.action = 'SqlUpdate.asp';
			document.frmSaisie.submit();
		}
	}
}

Donc là, il n'y a pas de problème de boucle.
Mais, apparemment, l'instruction :

Code:

document.getElementById('Latitude').value = latitude;

ne semble pas fonctionner, car dans mes pages où je récupère les infos pour mettre à jour ma BDD, la valeur du champ latitude est vide.

J'ai du mal à croire que je suis le premier à essayer de faire un truc similaire.
Et je ne voudrais pas en arriver à être obligé de créer autant de fonctions que d'adresses...

Merci encore pour votre patience.

17/01/2014, 10h44
Kaamo

Tout est dans le Fiddle que je t'ai donné ou dans la FAQ qu'a fourni NoSmoking.

Pour latitude c'est normal ... tu n'attends pas que geodecode soit terminé pour envoyer ton formulaire ! Du coup, latitude est encore vide au moment où le formulaire est envoyé. (voir explications dans les posts précédents).

Place ta soumission de formulaire dans la fonction de rappel et ça devrait bien se passer

Tu peux peut être te simplifier la compréhension en passant par une fonction intermédiaire

Code:

1
2
3
4
5
6
geocoder.geocode( { 'address': adresse}, function(results, status){
    if (status == google.maps.GeocoderStatus.OK){
      // fonction qui sera appelée lorsque le résultat sera revenue et correct
      fct_Qui_Traite_Le_Resultat ( results);
    }
  });

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
// tu mets tout ce qui concerne le traitement de la réponse passée en paramètre
function fct_Qui_Traite_Le_Resultat ( reponse){
    latitude = reponse[0].geometry.location.lat();
    document.getElementById('Latitude').value = latitude;
    if (document.getElementById('Action').value == 'Creer'){
        document.frmSaisie.action = 'SqlInsert.asp';
        document.frmSaisie.submit();
    }
    else if (document.getElementById('Action').value == 'Modifier'){
        document.frmSaisie.action = 'SqlUpdate.asp';
        document.frmSaisie.submit();
    }
}

20/01/2014, 13h36
pc75

Merci,

J'ai changé ma façon de gérer ça. Dans mon module qui permet de créer mes adresses, je récupère les coordonnées et je les stocke dans ma base de données.
Je n'ai donc plus de problème avec le fonction geocode.