Question

我理解为什么你不应该在循环中声明函数的理论，但我似乎无法弄清楚是如何为我的数组中的每个对象添加事件监听器。我有一个数组，其中包含将用于在谷歌地图上创建标记的位置，我想添加一个事件监听器，以便在单击标记时打开一个窗口并显示有关标记的信息。如何在不在for循环中添加事件监听器的情况下实现这一目标？

我的对象数组

var model = [
      {title: 'Lake Acworth', location: {lat: 34.0560394, lng: -84.689369}, type: 'fun'},
      {title: 'Town Center Mall', location: {lat: 34.0176429, lng: -84.566472},  type: 'fun'},
      {title: 'Kennesaw Mountain Battlefield', location: {lat: 33.9830771, lng: -84.5801223},  type: 'fun'},
      {title: 'SunTrust Park', location: {lat: 33.8907898, lng: -84.4699654},  type: 'fun'},
      {title: 'Barret Parkway Shopping Center', location: {lat: 33.9933893, lng: -84.6007358},  type: 'fun'},
      {title: 'RIdenour Estates', location: {lat: 33.9928034, lng: -84.591437},  type: 'apt'},
      {title: 'Vinings GA', location: {lat: 33.8715574, lng: -84.473635},  type: 'apt'},
      {title: 'Overton Rise Apartments', location: {lat: 33.8862235, lng: -84.4572464},  type: 'apt'},
      {title: 'The Encore', location: {lat: 33.8799177, lng: -84.4575624}, type: 'apt'},
      {title: 'The Reserve at the Ballpark', location: {lat: 33.8944195, lng: -84.4708393},  type: 'apt'},
];

用于添加事件侦听器的循环

function initMap() {
 var defaultIcon = makeMarkerIcon('0091ff');
 var highlightedIcon = makeMarkerIcon('FFFF24');
 largeInfowindow = new google.maps.InfoWindow();
 map = new google.maps.Map(document.getElementById('map'), {
  zoom: 11,
  center: {lat: 34.0691755, lng: -84.6587895},
  styles: styles
});
for(let i = 0; i < model.length; i++){

    var position = model[i].location;
    var title = model[i].title;

    marker = new google.maps.Marker({
      position: position,
      title: title,
      animation: google.maps.Animation.DROP,
      icon: defaultIcon,
      id: i
    });

    markers.push(marker);
    marker.setMap(map);

    marker.addListener('click', function() {
      populateInfoWindow(this, largeInfowindow);
    });

    marker.addListener('click', function(){

        toggleBounce(this);
    });

    marker.addListener('mouseover', function() {
      this.setIcon(highlightedIcon);
    });

    marker.addListener('mouseout', function() {
      this.setIcon(defaultIcon);
    });
  }
}

Answer 1

一个选项是定义循环外的函数（给它们命名）：

function clickFn1() {
  populateInfoWindow(this, largeInfowindow);
}

function clickFn2() {
  toggleBounce(this);
}

function mouseOutFn() {
  this.setIcon(defaultIcon);
}

function mouseOverFn() {
  this.setIcon(highlightedIcon);
}

然后使用循环内的那些：

for (let i = 0; i < model.length; i++) {

  var position = model[i].location;
  var title = model[i].title;

  marker = new google.maps.Marker({
    position: position,
    title: title,
    animation: google.maps.Animation.DROP,
    icon: defaultIcon,
    id: i
  });

  markers.push(marker);
  marker.setMap(map);

  marker.addListener('click', clickFn1);

  marker.addListener('click', clickFn2);

  marker.addListener('mouseover', mouseOverFn);

  marker.addListener('mouseout', mouseOutFn);
}

proof of concept fiddle

代码段

var markers = [];

function initMap() {
  var defaultIcon = "http://maps.google.com/mapfiles/ms/micons/blue.png";
  var highlightedIcon = "http://maps.google.com/mapfiles/ms/micons/yellow.png";
  largeInfowindow = new google.maps.InfoWindow();
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {
      lat: 34.0691755,
      lng: -84.6587895
    }
  });
  for (let i = 0; i < model.length; i++) {

    var position = model[i].location;
    var title = model[i].title;

    marker = new google.maps.Marker({
      position: position,
      title: title,
      animation: google.maps.Animation.DROP,
      icon: defaultIcon,
      id: i
    });

    markers.push(marker);
    marker.setMap(map);

    marker.addListener('click', clickFn1);

    marker.addListener('click', clickFn2);

    marker.addListener('mouseover', mouseOverFn);

    marker.addListener('mouseout', mouseOutFn);
  }

  function clickFn1() {
    populateInfoWindow(this, largeInfowindow);
  }

  function clickFn2() {
    toggleBounce(this);
  }

  function mouseOutFn() {
    this.setIcon(defaultIcon);
  }

  function mouseOverFn() {
    this.setIcon(highlightedIcon);
  }
}

function populateInfoWindow() {}

function toggleBounce() {}
var model = [{
    title: 'Lake Acworth',
    location: {
      lat: 34.0560394,
      lng: -84.689369
    },
    type: 'fun'
  },
  {
    title: 'Town Center Mall',
    location: {
      lat: 34.0176429,
      lng: -84.566472
    },
    type: 'fun'
  },
  {
    title: 'Kennesaw Mountain Battlefield',
    location: {
      lat: 33.9830771,
      lng: -84.5801223
    },
    type: 'fun'
  },
  {
    title: 'SunTrust Park',
    location: {
      lat: 33.8907898,
      lng: -84.4699654
    },
    type: 'fun'
  },
  {
    title: 'Barret Parkway Shopping Center',
    location: {
      lat: 33.9933893,
      lng: -84.6007358
    },
    type: 'fun'
  },
  {
    title: 'RIdenour Estates',
    location: {
      lat: 33.9928034,
      lng: -84.591437
    },
    type: 'apt'
  },
  {
    title: 'Vinings GA',
    location: {
      lat: 33.8715574,
      lng: -84.473635
    },
    type: 'apt'
  },
  {
    title: 'Overton Rise Apartments',
    location: {
      lat: 33.8862235,
      lng: -84.4572464
    },
    type: 'apt'
  },
  {
    title: 'The Encore',
    location: {
      lat: 33.8799177,
      lng: -84.4575624
    },
    type: 'apt'
  },
  {
    title: 'The Reserve at the Ballpark',
    location: {
      lat: 33.8944195,
      lng: -84.4708393
    },
    type: 'apt'
  },
];

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

如何解决jshint警告“在循环中声明的函数”

1 个答案: