jqueryが動作していないGoogleマップマーカー上をループする

Question

マップと名前のリストを表示するページがあります。マーカーが地図上に表示されていて、リストに正しく入力されていますが、マーカまたはリストをクリックすると、正しいコンテンツ文字列値でマーカーが表示されないようです。

マーカをクリックすると常に最後のコンテンツストリングが表示され、リスト内のアイテムをクリックすると、シリーズの最後のマーカが常に開きます。

私はこの十分な情報を継続したいと考えています。私はちょうどinfowindow.setcontentとinfowindow.openが正しい項目番号を取得しているように見えます。

HERE ARE SOME VARIABLES THAT ARE BEING USED IN THE CODE BELOW: 
    data[i][3] = firstname 
    data[i][4] = lastname 
    data[i][6] = latitude 
    data[i][7] = longitude 

ご協力いただければ幸いです！

おかげ ケビン

contentString = new Array(); 

    for (var I = 0; I < data.length; I++) { 

contentString[I] = '<b>' + data[I][3] + ' ' + data[I][4] + '</b>'; 
var thismarker = I; 
var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(data[I][6],data[I][7]), 
    map: map, 
    zIndex: I 
}); 
$("<li />") 
    .html('<span class="leadid">' + I + '</span>' + '<div class="leadname">' + data[I][3] + ' ' + data[I][4] + '</div>') 
    .click(function(){ 
     infowindow.close(); 
     infowindow.setContent(contentString[thismarker]); 
     infowindow.open(map, markers[thismarker]); 
    }) 
.appendTo("#leadList"); 
google.maps.event.addListener(marker, "click", function(e){ 
    infowindow.close(); 
    infowindow.setContent(contentString[thismarker]); 
    infowindow.open(map, markers[thismarker]); 
}); 
markers[I] = marker; 
    } 

Answer 1

ここでの問題は、あなたがループ内でクリックハンドラを設定し、ループ変数Iを参照しようとしているということである（thismarkerを通じて - それはここでは同じことだ）閉鎖中。変数Iとthismarkerは各ループ反復で更新され、クリックハンドラ内の参照も更新されます。したがって、内では、すべてクリックハンドラのthismarkerは、の最後の値をその変数に割り当てます。 （これを避けることができれば、ループ内で関数を定義するのは一般的には悪い考えです。）

これを修正する方法はいくつかあります。必ずしも最も美しいとはいえないが、問題のコードを無名関数にラップし、ループ変数を引数として渡すのが最も簡単です。

for (var I = 0; I < data.length; I++) { 
    // ... snip ... 

    // start of anonymous function 
    (function(thismarker) { 
     // within the scope of this function, 
     // "thismarker" will work as expected 
     $("<li />") 
      .html('<span class="leadid">' + I + '</span>' + '<div class="leadname">' + data[I][3] + ' ' + data[I][4] + '</div>') 
      .click(function(){ 
       infowindow.close(); 
       infowindow.setContent(contentString[thismarker]); 
       infowindow.open(map, markers[thismarker]); 
      }) 
      .appendTo("#leadList"); 
     google.maps.event.addListener(marker, "click", function(e){ 
      infowindow.close(); 
      infowindow.setContent(contentString[thismarker]); 
      infowindow.open(map, markers[thismarker]); 
     }); 
    })(I); // end anonymous function, calling with loop variable 
}