11550 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Variables qui changent toutes seules ??

Bonsoir à tous, me voici encore bloqué !

Alors je cherche à utiliser l'API Google Maps pour positionner des lieux issus d'une base de données sur une carte et permettre de calculer des itinéraires à partir de ces lieux.

Pour celà j'appelle en ajax (via getJSON, j'utilise JQuery) une page PHP qui me génère un tableau d'objets JSON contenant les coordonnées des lieux. J'utilise ensuite ces coordonnées pour placer des marqueurs, et je voudrais sur chaque marqueur permettre le calcul d'un itinéraire en ouvrant un formulaire popup au clic.
J'ai donc les coordonées de la destination (du marqueur donc) comme "name" du <input>.

Le problème c'est qu'après avoir itéré sur tout mon tableau tous les "name" ont la même valeur, soit la dernière du tableau.

Je suspecte un problème de portée de variable mais je n'arrive à rien Smiley sweatdrop

En espérant que vous pourrez vous débrouiller avec mon code !

$(function() {
	var map=new GMap2(document.getElementById('map'));
	if(map==undefined) {
		return;
	}
	map.setUIToDefault();
	map.disableScrollWheelZoom();
	var bounds = new GLatLngBounds();
	$.getJSON('scripts/php/getcenters.php','',function(data) {
		for(var i in data) {
			var locate=data[i].adresse+'<br />'+data[i].cp+' '+data[i].ville+'<br />'+data[i].pays;
			var tel=data[i].telephone.replace(/(\d{2})/g,'$1 ');
			var coords = new GLatLng(data[i].latitude,data[i].longitude);
			var marker=new GMarker(coords);
			map.addOverlay(marker);
			GEvent.addListener(marker,'click',function() {
				this.openInfoWindowTabsHtml([new GInfoWindowTab('Adresse',locate+'<br /><br />Téléphone : <strong>'+tel+'</strong>'),
											 new GInfoWindowTab('Itinéraire','<form action="index.php?p=acces" method="post"><fieldset class="nospace bottomspacer"><label class="up" for="from">Vous partez de<br /><input type="text" id="from" name="'+locate.replace(new RegExp('<br />','g'),' ')+'" /></label></fieldset><button type="submit">Calculer</button></form>')]);
			});
			bounds.extend(coords);
		}
		map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds));
	});
	$('#map form').live('submit',function() {
		var directions = new GDirections(map,document.getElementById('road'));
		directions.load('from:'+$(this).find('input').val()+' to:'+$(this).find('input').attr('name'));
		GEvent.addListener(directions,'error',function() { alert('Impossible de calculer ; précisez votre lieu de départ.'); });
		GEvent.addListener(directions,'load',function() { map.clearOverlays(); });
		$('#road').after($('<br /><a href="index.php?p=acces">Revenir à la carte des centres</a>'));
		return false;
	});
});

Donc dans la fonction anonyme appliquée au clic sur le marqueur les variables locate et tel "changent"..!

Une solution ??

Merci d'avance Smiley smile [/i][/i][/i][/i][/i][/i][/i]

(J'aurais pas dû appeler ma variable "i" Smiley biggol )
Modifié par MatTheCat (06 Jun 2010 - 08:22)
Bon il me manquait simplement la connaissance des closures Smiley murf 

$(function() {
	var map=new GMap2(document.getElementById('map'));
	if(map==undefined) {
		return;
	}
	map.setUIToDefault();
	map.disableScrollWheelZoom();
	var bounds = new GLatLngBounds();
	$.getJSON('scripts/php/getcenters.php','',function(data) {
		for(var i in data) {
			var locate=data[i].adresse+'<br />'+data[i].cp+' '+data[i].ville+'<br />'+data[i].pays;
			var tel=data[i].telephone.replace(/(\d{2})/g,'$1 ');
			var coords = new GLatLng(data[i].latitude,data[i].longitude);
			var marker=new GMarker(coords);
			map.addOverlay(marker);
			(function(locate, tel) {
				GEvent.addListener(marker,'click',function() {
					this.openInfoWindowTabsHtml([new GInfoWindowTab('Adresse',locate+'<br /><br />Téléphone : <strong>'+tel+'</strong>'),
												 new GInfoWindowTab('Itinéraire','<form action="index.php?p=acces" method="post"><fieldset class="nospace bottomspacer"><label class="up" for="from">Vous partez de<br /><input type="text" id="from" name="'+locate.replace(new RegExp('<br />','g'),' ')+'" /></label></fieldset><button type="submit">Calculer</button></form>')]);
				});
			})(locate,tel);
			bounds.extend(coords);
		}
		map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds));
	});
	$('#map form').live('submit',function() {
		var directions = new GDirections(map,document.getElementById('road'));
		directions.load('from:'+$(this).find('input').val()+' to:'+$(this).find('input').attr('name'));
		GEvent.addListener(directions,'error',function() { alert('Impossible de calculer ; précisez votre lieu de départ.'); });
		GEvent.addListener(directions,'load',function() { map.clearOverlays(); });
		$('#road').after($('<br /><a href="index.php?p=acces">Revenir à la carte des centres</a>'));
		return false;
	});
});


Et là ça marche !![/i][/i][/i][/i][/i][/i][/i]
Sujet clos
Aller à