Unterfunktion kennt Variablen nicht

[3a5y2k]

Hi , ich probier jetz seit ner Weile rum und bekomm es einfach nicht hin, den gewünschten String in Zeile 11 ausgeben zulassen.
[JavaScript] GMap Points&Marker with Infotext - Pastebin.com

Die Funktion ist zum setzen eines Punktes auf ner GMap zuständig und es soll einen Div manipuliert werden falls der Marker des Punktes geklickt wird. Leider habe ich keinen Plan warum er die Variablen in der Unterfunktion vom Eventhandler nicht kennt. Geben ich nur einfach "Mein teststring" an wird dieser wie gewünscht nach dem klicken auf der Karte angezeigt.

Also will dann die Informationen aus dem array ausgeben können.

innerHTML= "Firma: "+ points[i]['name'] + ..

Danke fürs lesen und ne eventuelle Antwort.

der Paul

 

[kkapsner]

Du hast da einen typischen JS-Stolperstein. Das i in dem Eventlistener zeigt nicht auf den Wert von i, den es während der Erzeugung der Funktion hatte, sondern wirklich auf die Variable und die wird durch die Schleife natürlich geändert und landet am Ende bei poins.length.

Um das zu umgehen kannst du z.B. mit ARRAY.forEach() iterieren (anstatt dem for) oder du machst einen zusätzlichen anonymen Funktionsscope, was aber meiner Meinung nach ziemlich hässlich und schwer zu lesen ist.

 

[3a5y2k]

du bist mein Held
[JavaScript] GMap Points&Marker with Infotext - Pastebin.com
Also es geht, ist bloß leider so das ich die map gloabal machen mußte.
Hab noch nicht ganz geraft wie ich der Funktion set_point() einen weitere Variable übergeben kann.
Vlt kennst du die Schreibweise?

Danke für den Link, die Seite is klasse

 

[kkapsner]

Du könntest die Funktion set_point() innerhalb von initialize definieren. Dann hat sie auch auch Zugriff auf alle lokalen Variablen.

Ich persönlich mache das sowieso meistens mit einer anonymen Funktion (so wie du es schon beim Eventlistener machst):

function initialize(){
	var mapOptions = {
		center: new google.maps.LatLng('.$loc['lat'].', '.$loc['lng'].'),
		zoom: 10,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	points.forEach(function(point){
		var p_pos = new google.maps.LatLng(point.lat, point.lng);
		var marker = new google.maps.Marker({
			position: p_pos,
			map: map,
			title: point.name
		});
		marker.addListener('click',
			function(){
				marker_click_event(point);
			}
		);
	});
}

function marker_click_event(test){
	var e = document.getElementById("map_info")
	e.style.visibility = "visible";
	e.innerHTML = test.name;
}