1

for loop過度のコードを避けるために、を繰り返し処理したい配列があります。私は以下を取りたいと思います：

var mySchool = document.getElementById(varID[0]);
google.maps.event.addDomListener(mySchool,'click', function() {
    filterMap(layer, tableId, map);                 
});

そしてそれをもっと次のようにします：

for(var i=0; i < varID.length; i++){
    var mySchool = document.getElementById(varID[i]);
    google.maps.event.addDomListener(mySchool,'click', function() {
        filterMap(layer, tableId, map);
    }); 
}

私はいくつかの読書をしてきましたが、それはJavascriptクロージャと関係があると思いますが、私が見つけたさまざまなコード例でそれを動作させることはできません。経験豊富な目で、このJavascript初心者に欠けているものを見つけられることを願っています。

私の完全なコードは次のようになります。

//There are more items in my array but i wanted to keep it short here   
var varID = [
    "adamRobertson",
    "blewett",
    "brentKennedy"
];

var tableId = '1yc4wo1kBGNJwpDm6e-eJY_KL1YhQWfftjhA38w8';

function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(49.491052,-117.304484),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var layer = new google.maps.FusionTablesLayer();
    filterMap(layer, tableId, map);

    //Trying to get this to work
    for(var i=0; i < varID.length; i++){
        var mySchool = document.getElementById(varID[i]);
            google.maps.event.addDomListener(mySchool,'click', function() {
                filterMap(layer, tableId, map);                 
        });
    }

    //Trying to avoid this 25 times     
    /*
    google.maps.event.addDomListener(document.getElementById(varID[0]),
        'click', function() {
            filterMap(layer, tableId, map);
    });
    */
}

// Filter the map based on checkbox selection.
function filterMap(layer, tableId, map) {
    var where = generateWhere();

    if (where) {
      if (!layer.getMap()) {
        layer.setMap(map);
      }
      layer.setOptions({
        query: {
          select: 'Location',
          from: tableId,
          where: where
        }
      });
    } else {
      layer.setMap(null);
    }
}

// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateWhere() {
    var filter = [];
    var schools = document.getElementsByName('school');
    for (var i = 0, school; school = schools[i]; i++) {
      if (school.checked) {
        var schoolName = school.value.replace(/'/g, '\\\'');
        filter.push("'" + schoolName + "'");
      }
    }
    var where = '';
    if (filter.length) {
      where = "School IN (" + filter.join(',') + ')';
    }
    return where;
}

google.maps.event.addDomListener(window, 'load', initialize);

HTMLには基本的に、ポリゴンのオンとオフを切り替えるチェックボックスの入力が含まれています。

助けてくれてありがとう。

4

1 に答える 1

1

コードを次のように変更すると役立つと思います。

var mySchool; var limit = varID.length;
for(var i=0; i < limit; i++){
    mySchool = document.getElementById(varID[i]);
    (function(){

        google.maps.event.addDomListener(mySchool,'click', function() {
            filterMap(layer, tableId, map);                 
        });

    }());
}

for limit の計算をループから外したので、速度もいくらか節約できます。

Maps API を使用していないため、クロージャにいくつかの引数を追加する必要がある場合があります。

var mySchool; var limit = varID.length;
for(var i=0; i < limit; i++){
    mySchool = document.getElementById(varID[i]);
    (function(s, l, t, m){

        google.maps.event.addDomListener(s,'click', function() {
            filterMap(l, t, m);                 
        });

    }(mySchool, layer, tableId, map));
}

どの引数が必要かはわかりませんが、おそらく理解できるでしょう。

于 2012-12-04T08:31:49.727 に答える