モデルを作成したい.marker.addListener（ 'click'、function（）{forループの外側

Question

このコードは実行されますが、のjavascriptのベストプラクティスとインラインではありません。 model[i].marker.addListener('click', function() forループが、私は問題を抱えてい外

function pushMarkers() { 
locInfo = new google.maps.InfoWindow(); 
for (var i = 0; i < model.length; i++) { 
    var loc = model[i].places; 
    var title = model[i].title; 
    model[i].marker = new google.maps.Marker({ 
     position: loc, 
     title: title, 
     animation: google.maps.Animation.DROP, 
     map: map, 
     id: i 
    }); 
    console.log(model[i].title); 
    model[i].marker.addListener('click', function() { 
     console.log('InfoWindow Loop entered'); 
     toggleBounce(this); 
     populateInfoWindow(this, locInfo); 
    }); 
    wikiLink(model[i].marker); 
    } 
} 

Answer 1

あなただけのコールバックとして使用するという名前の関数を作成し、それを使用します。

function pushMarkers() { 

    // Create it 
    function mapClickCallback() { 
     console.log('InfoWindow Loop entered'); 
     toggleBounce(this); 
     populateInfoWindow(this, locInfo); 
    } 

    locInfo = new google.maps.InfoWindow(); 
    for (var i = 0; i < model.length; i++) { 
     var loc = model[i].places; 
     var title = model[i].title; 
     model[i].marker = new google.maps.Marker({ 
      position: loc, 
      title: title, 
      animation: google.maps.Animation.DROP, 
      map: map, 
      id: i 
     }); 
     console.log(model[i].title); 
     model[i].marker.addListener('click', mapClickCallback); // <−−−− Use it 
     wikiLink(model[i].marker); 
    } 
} 

それが機能は上に定義されていることをいいのよlocInfoですが、ご希望の場合は、関数の宣言は、その関数の最上位レベルにある限り、pushMarkersのどこにでも置くことができます。 （ES2015のようにトップレベルでない関数宣言を使用するために行動を定義したが、ここでする必要はありませんし、それのための規則は少し複雑ですです。）

---

サイドノートを：あなたのコードはの餌食に落ちていますThe Horror of Implicit Globals（私の貧血の小さなブログの投稿です）; varでlocInfoを宣言してください。