Google Maps：複数のInfoWindowsには常に最後の値が表示されます

Question

さて、私は100番目の人物で、これについて質問していますが、調査していろいろなことを数日後に試してもわかりません。 私はGoogleマップ上にマーカーを作成する関数を持っています。この関数は、各マーカーにアタッチされるべきinfoWindowに表示されるHTMLと同様に、座標を渡します。

非常に単純な例でも、infoWindowのコンテンツは、特定のマーカーを作成するときのコンテンツセットではなく、常にinfoWindowの最後のコンテンツセットであるという問題があります。

私はこの問題を解決するにはどうすればよいですか？

var somerandomcounter = 0; 

function addMarkerNew(){ 
    markers[somerandomcounter] = new GMarker(new GLatLng(52.3666667+somerandomcounter,9.7166667+somerandomcounter),{title: somerandomcounter}); 
    map.addOverlay(markers[somerandomcounter]); 

    var marker = markers[somerandomcounter]; 

    GEvent.addListener(marker, "click", function() { 
     marker.openInfoWindowHtml("<b>"+somerandomcounter+"</b>"); 
    }); 

somerandomcounter++; 
} 

Answer 1

ここでの問題は、変数のスコープです：

は、ここに私のコードです。それを打破してみましょう：

// variable is in the global scope 
var somerandomcounter = 0; 

function addMarkerNew(){ 
    // now we're in the addMarkerNew() scope. 
    // somerandomcounter still refers to the global scope variable 
    // ... (some code elided) 
    var marker = markers[somerandomcounter]; 

    GEvent.addListener(marker, "click", function() { 
     // now we're in the click handler scope. 
     // somerandomcounter *still* refers to the global scope variable. 
     // When you increment the variable in the global scope, 
     // the change will still be reflected here 
     marker.openInfoWindowHtml("<b>"+somerandomcounter+"</b>"); 
    }); 

    // increment the global scope variable 
    somerandomcounter++; 
} 

この問題を解決する最も簡単な方法は、引数としての機能の一つにsomerandomcounter変数を渡すことです - これはローカルスコープの変数を指してクリックハンドラ内の参照を保持します。ここでは、これを行うには二つの方法があります：

1. はaddMarkerNewへの引数としてカウンターを渡します

   // variable is in the global scope 
   var somerandomcounter = 0; 
   
   function addMarkerNew(counter){ 
       // now we're in the addMarkerNew() scope. 
       // counter is in the local scope 
       // ... 
       var marker = markers[counter]; 
   
       GEvent.addListener(marker, "click", function() { 
        // now we're in the click handler scope. 
        // counter *still* refers to the local addMarkerNew() variable 
        marker.openInfoWindowHtml("<b>"+somerandomcounter+"</b>"); 
       }); 
   } 
   
   // call the function, incrementing the global variable as you do so 
   addMarkerNew(somerandomcounter++); 
   

2. クリックハンドラを添付し、その関数にカウンターを渡すために新しい関数を作成します。

   // variable is in the global scope 
   var somerandomcounter = 0; 
   
   // make a new function to attach the handler 
   function attachClickHandler(marker, counter) { 
       // now we're in the attachClickHandler() scope. 
       // counter is a locally scope variable 
       GEvent.addListener(marker, "click", function() { 
        // now we're in the click handler scope. 
        // counter refers to the local variable in 
        // the attachClickHandler() scope 
        marker.openInfoWindowHtml("<b>"+counter+"</b>"); 
       }); 
   } 
   
   function addMarkerNew(){ 
       // now we're in the addMarkerNew() scope. 
       // somerandomcounter still refers to the global scope variable 
       // ... 
       var marker = markers[somerandomcounter]; 
   
       // attach the click handler 
       attachClickHandler(marker, somerandomcounter) 
   
       // increment the global scope variable 
       somerandomcounter++; 
   }