2011-09-14 2 views
1

私はに似たループ内の閉鎖に関連していると考えているJavaScriptの問題があります:私はビングマップ上のピンのリストをプロットし、それぞれにイベントを添付していますBing Mapsイベントのクロージャを作成する方法は?

How to copy a variable in JavaScript? JavaScript closure inside loops – simple practical example

をピンごとにインフォボックスを表示することができます。各ピンは別の情報ボックスを持っているはずです。問題は、イベントが発生したときに、イベントを発生させるピンに接続されている情報ボックスではなく、ループの最後の反復から最後の情報ボックスが常に表示されることです。ここでループ構造を持つメソッドとクロージャ

monumentMap.plotData = function() { 
     monumentMap.theMap.entities.clear(); 

     var monument = null 
     var loc = null; 
     for (var i = monumentMap.theData.length - 1; i >= 0; i--) { 
      monument = monumentMap.theData[i]; 
      loc = new Microsoft.Maps.Location(monument.lat, monument.lon); 

      // construct a bing pushpin and add it to the item data 
      monument.pin = new Microsoft.Maps.Pushpin(loc, { 
       icon: 'http://media.maps101.com/' + monument.pinImg 
      }); 

      // construct a bing infobox and add it to the item data 
      monument.infobox = new Microsoft.Maps.Infobox(loc, { // breakpoint 1 
       title: monument.title, 
       offset: new Microsoft.Maps.Point(-3, monument.pin.getHeight() - 5), 
       zIndex: 999, 
       visible: true 
      }); 

      // add event listeners 
      // doesn't work 
      Microsoft.Maps.Events.addHandler(monument.pin, 'mouseover', function() { 
       return function(infobox) { 
        monumentMap.displayInfobox(infobox); 
       }(monument.infobox); // breakpoint 2: by the time this is executed monument.infobox is already "last not current" 
      }); 

      // add the entities to the map view for this item 
      monumentMap.theMap.entities.push(monument.pin); 
     } 
} 

私は悩み、それが動作しない理由のまわりで私の頭を取得したよを作成するために、私の失敗した試みがあります。私はmonument.infoboxをループの中に設定し、 "breakpoint 1"と書かれた行にブレークポイントを置くと、私は "breakpoint 2"になったときにすべてのループ反復でmonument.infoboxが変化するのを見ることができますイベントが発生するまで実行されません)、最後に作成したinfoboxを参照します。イベントハンドラをアタッチするときに、そのピンに接続された情報フィールドではありません。

この時点までに私は半分の行を期待していますmonumentMap.theMap.entities.push(monument.pin);ループの最後のピンのコピーを追加しますが、それは行いません。それはちょうどそれと同じように動作し、ループごとに異なるピンを追加します。

答えて

1

外部のアノマイズ関数にパラメータを配置する必要があります。私が正しい場合:

Microsoft.Maps.Events.addHandler(monument.pin, 'mouseover', 
(function(infobox) { 
    return function() { 
    monumentMap.displayInfobox(infobox); 
    }  
})(monument.infobox)); 
+0

トリックをしたようです!私はこれを前に試したことが分かっていて、うまくいかなかったのですが、おそらくブラウザのページなどを更新するのを忘れていました。 – rushinge

関連する問題