Question

我创建了一个带有一些标记的google地图（来自wordpress帖子），但是当我在控制台上运行“gulp”时，我遇到了这样的错误：“不要在循环中创建函数。”

我创建了一个jsfiddle来复制我的本地情况，有人可以帮我解决这个问题吗？

我知道如果我写“// jshint ignore：line”gulp创建脚本，但我认为这个问题可能是我在chrome上遇到的另一个bug的问题：（

var infowindow = new google.maps.InfoWindow();
var gmarkers = []; 

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(51.508293, -0.127701),
    mapTypeControl: false,
    panControl: false,
    zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_CENTER
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
      position: locations[i].latlng,
      icon: locations[i].marker,
      map: map,
      animation: google.maps.Animation.DROP,
      optimized : false
    });

    gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click',
      (function(marker, i) {
        return function() {
          map.panTo(marker.getPosition());

          //method 2
          var target = jQuery("#item" + i);
          jQuery(target).show().siblings("div").hide();

          if (!jQuery('#all-posts').hasClass('active')){
            jQuery("#all-posts").toggleClass("active");
            jQuery("#close-btn").toggleClass("active");
          }

          // stop yt video
          //jQuery("#stop-yt-video").trigger("click");
        };
      })(marker, i)
    );  
  }
}

initialize();

Answer 1

使用IIFE功能，将其移出循环并为其命名，例如makeHandler （但不要调用它）。

function makeHandler(marker, i) {
  return function() {

    map.panTo(marker.getPosition());

    //method 2
    var target = jQuery("#item" + i);
    jQuery(target).show().siblings("div").hide();

    if (!jQuery('#all-posts').hasClass('active')){
          jQuery("#all-posts").toggleClass("active");
          jQuery("#close-btn").toggleClass("active");
    }
    // stop yt video
    //jQuery("#stop-yt-video").trigger("click");
  };
}

然后在循环中，执行以下操作：

for (var i = 0; i < locations.length; i++) {
  var marker = new google.maps.Marker({
    position: locations[i].latlng,
    icon: locations[i].marker,
    map: map,
    animation: google.maps.Animation.DROP,
    optimized : false
  });
  gmarkers.push(marker);

  google.maps.event.addListener(marker, 'click', makeHandler(marker, i)); 
}

jshint - 不要在循环中创建函数 - 谷歌地图

1 个答案: