Google maps Api : Pb events dans boucle for

Sujet publié le 12/09/2011 par philou15 et classé dans javascript

Bonjour,
Je créé des polygones cliquables sur une carte.
J'essaie de créé un évènement dans une boucle "for" pour chaque zone cliquable, le tout dans la fonction load().
Je ne vois pas le problème, qui doit néanmoins sauter aux yeux.
Dans cet exemple simplifié, deux zones sont créées, lorsque je clique sur l'une d'entre elle, je dois voir son nom dans une boite de dialogue; j'affiche en fait la valeur "undefined".
Merci de m'aider
Trachy
voici le lien à la page :
www.paysagesdefrance.com/essai.htm
Voici le script :
<!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>Application Paysages de France</title>
<style type="text/css">
#map{
position:absolute;top:10px;left:10px;width:1000px; height: 750px
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="JavaScript" src="../libraryV3/markermanager_packed.js" type="text/JavaScript"></script>

<script type="text/javascript">
// initialisation avec centre de la carte et zoom initial
var latcentrecarto = 46.54;
var longcentrecarto = 2.416;
var zoominitialcarto = 6;

// initialisation des demi largeur/hauteur des zones touristiques

var demihauteurzonetouristique = 0.116;
var demilargeurzonetouristique = 0.347;

// initialisation des zones touristiques avec le nom et la lattitude, longitude du centre de la zone
var nomzone=[];
var latcentrezone =[];
var longcentrezone =[];

// Bassin d'Arcachon
nomzone[0]= "Bassin d Arcachon";
latcentrezone[0]= 44.6897998686099;
longcentrezone[0]= -1.1421918869018554;
// Côte Basque
nomzone[1]= "Côte Basque";
latcentrezone[1]= 43.415678458962645;
longcentrezone[1]= -1.5047407150268554;

function load() {

//construction de la carte

var mymap;

var centreCarte = new google.maps.LatLng(latcentrecarto, longcentrecarto);
var optionsCarte = {
zoom: zoominitialcarto,
center: centreCarte,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
mymap = new google.maps.Map(document.getElementById("map"), optionsCarte);

//construction des polygones réactifs correspondant aux Zones touristiques
var myzone =[];
var tableaupointspolygone =[];

for(i=0;i<latcentrezone.length;i++){
tableaupointspolygone[i]= [
new google.maps.LatLng(latcentrezone[i]-demihauteurzonetouristique,longcentrezone[i] +demilargeurzonetouristique),
new google.maps.LatLng(latcentrezone[i]-demihauteurzonetouristique,longcentrezone[i]-demilargeurzonetouristique),
new google.maps.LatLng(latcentrezone[i]+demihauteurzonetouristique,longcentrezone[i]-demilargeurzonetouristique),
new google.maps.LatLng(latcentrezone[i]+demihauteurzonetouristique,longcentrezone[i]+demilargeurzonetouristique)];

var optionsZone = {
clickable: true,
fillColor: "#00AAFF",
fillOpacity: 0.5,
map: mymap,
paths: tableaupointspolygone[i],
strokeColor:"#FFAA00",
strokeOpacity: 1,
strokeWeight:1,
zIndex:5
};
myzone[i]= new google.maps.Polygon(optionsZone);

//Evènement : affichage du nom de la zone touristique au clic de la souris dans celle-ci
google.maps.event.addListener (myzone[i],"click", function() {
alert(nomzone[i]);
});
}
return;}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map"></div>
</body>
</html>

par philou15, 12/09/2011 à 21h39
philou

répondre

Salut ,

à la vue de ton code qui est en ligne

tu initialises des événements avec une référence à i ,au moment de ces appels i est toujours égal à 2 vue que c'est sa dernière valeur dans la boucle for

donc à mon avis ,dans ton for() tu devrais essayer d'écrire ce i en dur et pas en dynamique

exemple

for(i=0;i!=taValeurMax;i++)
{
init('+i+'); // bon
init(i); // pas bon
}

par inca roads, 19/09/2011 à 09h36

mon exemple n'est pas exact mais je pense que le problème se situe à ce niveau

par inca roads, 19/09/2011 à 10h08

peut être

fonction eval

http://www.toutjavascript.com/reference/reference.php?ref=eval&parent=210

avec i écrit en dur sur ce bout de code

//Evènement : affichage du nom de la zone touristique au clic de la souris dans celle-ci
google.maps.event.addListener (myzone[i],"click", function() {
alert(nomzone[i]);
});

par inca roads, 19/09/2011 à 10h26

Le forum bouffe des caractères

//Evènement : affichage du nom de la zone touristique au clic de la souris dans celle-ci
	google.maps.event.addListener (myzone,"click", function() {
	alert(nomzone[i]);
	});

par inca roads, 19/09/2011 à 10h34

J'ai vu à la racine de ton site ,
apparemment le problème est résolu

la solution que je suggérais

dans le for()

remplacer

google.maps.event.addListener (myzone,"click", function()
 { alert(nomzone[i]); });

par

eval('google.maps.event.addListener (myzone['+i+'],"click", function(){alert(nomzone['+i+']);});');

par inca roads, 19/09/2011 à 19h20

répondre