2009-08-02 17 views
6

Estoy trabajando en una página que busca código con un httpObject de Javascript y lo usa para actualizar dos elementos en la página: un mapa de Google y un DIV que enumera las cosas a las que apunta el marcador .Añadiendo dinámicamente oyentes a Google Maps Markers

Ese bit funciona bien. El problema es que cuando creo los marcadores, lo hago a través de un ciclo for, y agrego oyentes al marcador en cada ciclo. Luego, cuando pruebo la página, encuentro que sucede lo mismo con cada marcador.

Al pasar el cursor sobre un marcador se debe cambiar el color del borde del bit correspondiente del DIV. En cambio, cada marcador cambia el borde del último bit. Parece que cada vez que agrego los oyentes también sobrescribo a los oyentes de los marcadores agregados anteriormente.

Entiendo que esto tiene que ver con que la API de Google Maps conserve la identidad de un marcador incluso cuando se crea uno nuevo en Javascript. Lo que no entiendo cómo conseguir alrededor de él - He intentado crear una matriz fuera del bucle, y el cambio de

var newMarker = new GMarker(newLatLng); 

con newMarker [count] = new GMarker (newLatLng);

pero todavía no funciona.

Help Me, StackOverflow. Tu eres mi única esperanza. :)

Editar: Un poco más de código

for (count=0;count<=LatArray.length;count++) 
{ 
    thisLat = LatArray[count]; 
    thisLong = LongArray[count]; 
    thisHTML = HTMLArray[count]; 
    newLatLng = new GLatLng(thisLat, thisLong, true); 

    if (mapBounds.containsLatLng(newLatLng)) 
    { 
     //alert(count); 
     var dinnerNumber = "dinner_"+count; 
     newMarkers[count] = new GMarker(newLatLng); 
     map.addOverlay(newMarkers[count]); 
     GEvent.addListener(newMarkers[count],'mouseover',function(){document.getElementById(dinnerNumber).style.borderColor = '#000000'; 
    }); 
}// for 
+1

1 para hacer referencia a Star Wars (la no basura uno) – karim79

+0

¿Podemos tener una muestra de código más grande, por favor? Es muy difícil decir cuál es el problema. – karim79

Respuesta

6

tema de cierre - todos los oyentes comparten la misma variable dinnerNumber. Pruebe esto:

GEvent.addListener(newMarkers[count], 'mouseover', (function(dinnerNumber){ return function(){document.getElementById(dinnerNumber).style.borderColor = '#000000';}; })(dinnerNumber)); 

De esta manera, cada oyente se crea con su propia copia cerrada de dinnerNumber.

+0

Gracias Justin! No tengo ni idea de lo que sucede al final, pero funciona. Lo desarmaré y veré si puedo darle sentido, pero por ahora ¡has resuelto mi problema! –

+1

Consulte http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/ para obtener una explicación muy buena de los cierres y el "infame problema de bucle". –

1

usted tiene que leer cuidadosamente

GEvent.addListener(newMarkers[count], 'mouseover', 
     (function(dinnerNumber) 
      { return function() 
       { document.getElementById(dinnerNumber).style.borderColor = '#000000';};   
      } 
    )(dinnerNumber) 
); 

se ha perdido una();

el parámetro 3-rd es (function (var) {función de retorno() {// lo que quiere con el avance de var;};}) (var)