11548 sujets

JavaScript, DOM et API Web HTML5

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 :
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 :

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>

<!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>

 
[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]