javascript - 迭代数组并向每个数组添加谷歌地图事件？

Question

所以我有一个使用 KnockoutJS 与 Google map 配合使用的项目。我这样定义标记:

for (i = 0; i < markerData.length; i++) {
  // Grab marker data so we only have to call it once
  var m = markerData[i];
  // Define everything
  var position = new google.maps.LatLng(m.location.lat, m.location.lng);
  var title = m.title;
  // etc etc

  // Push all this info to the google maps marker
  var marker = new google.maps.Marker({
    map: map,
    position: position,
    title: title
    // etc with rest 
  });

然后在同一个 for 循环中，我尝试定义一个信息窗口，简化阅读:

  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(this.title + '<br>' + this.address + '<br><a target="_blank" href="' + this.directions + '">Get Directions</a>');
    infoWindow.open(map, this);
    map.setCenter(this);
  });

虽然它的工作原理与我喜欢的完全一样，但 linter 表示不要在 for 循环内创建函数。话虽如此，有没有办法可以将其移出 for 循环并仍然使其有效工作？到目前为止，我尝试过的所有内容本质上都以某种方式变成了另一个 for 循环，这仍然会启动 linter。

我觉得我在这里遗漏了一些明显明显的东西。关于如何正确应用它有什么想法或想法吗？

顺便说一句 - 所有标记都在 KO vm viewModel.gMarkers() 中。非常感谢任何帮助，谢谢!

Answer 1

具体来说，linter 会提示 for 循环中的匿名函数 google.maps.event.addListener(marker, 'click', function() {};。您可以尝试将其放入它自己的函数，并在循环中调用它并传入标记。

var m, position, title, marker;

for (i = 0; i < markerData.length; i++) {
  // Grab marker data so we only have to call it once
  m = markerData[i];
  // Define everything
  position = new google.maps.LatLng(m.location.lat, m.location.lng);
  title = m.title;
  // etc etc

  // Push all this info to the google maps marker
  marker = new google.maps.Marker({
    map: map,
    position: position,
    title: title
    // etc with rest 
  });

  doThis(marker);
}

function doThis(marker) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(this.title + '<br>' + this.address + '<br><a 
    target="_blank" href="' + this.directions + '">Get Directions</a>');
    infoWindow.open(map, this);  // Not sure where map is coming from
    map.setCenter(this);
 });
}