谷歌地图 addListener 只加载一个标记关闭问题

Question

我在移动视口时尝试加载谷歌地图标记，但只有我最后添加的标记正在加载。我认为这是一个关闭问题。这是我的代码的一部分：

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(42.271084, -83.737277),
      zoom: 16
    });
   downloadUrl('/data', function(results) {
      var resultsJSON = JSON.parse(results.responseText).data;
      for (var i = 0; i < resultsJSON.length; i++) {
      var lat = resultsJSON[i].lat;
      var lng = resultsJSON[i].lng;
      var latLng = new google.maps.LatLng(lat, lng);
      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        category:year,
        icon: icon.style,
        scale: 2
      });

      if(map.getBounds().contains(marker.getPosition())) {
        marker.setMap(map);
      }
      else {
        marker.setMap(null);
      }  
      google.maps.event.addListener(map, "idle", function() {loadMarker(map, marker)});
     }
    });
  }
 function downloadUrl(url, callback) {
    #ajax call
  }
  function loadMarker(map, marker) {
        if(map.getBounds().contains(marker.getPosition())) {
        marker.setMap(map);
        console.log("Hello world");
      }
      else {
        marker.setMap(null);
      } 
  }

Answer 1

你在循环中使用这个命令

google.maps.event.addListener(map, "idle", function() {loadMarker(map, marker)});

在循环的每次迭代中，您尝试向事件“空闲”添加一个匿名函数。并且在每笔交易中，您都用新数据和新函数重写了这个函数。作为最后一个事务的结果，您最后添加的标记正在加载。您应该创建一个标记数组并在循环结束后传递它们。像这样的：

   downloadUrl('/data', function(results) {
      var resultsJSON = JSON.parse(results.responseText).data;
      var markers = [];
      for (var i = 0; i < resultsJSON.length; i++) {
      var lat = resultsJSON[i].lat;
      var lng = resultsJSON[i].lng;
      var latLng = new google.maps.LatLng(lat, lng);
      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        category:year,
        icon: icon.style,
        scale: 2
      });
       markers[i] = marker;
     }
     loadMarker(map, markers);
     google.maps.event.addListener(map, "idle", function() {loadMarker(map, markers)});
    });

 function loadMarker(map, markers) {
       for (var i = 0; i < markers.length; i++) {
        if(map.getBounds().contains(markers[i].getPosition())) {
        markers[i].setMap(map);
        console.log("Hello world");
      }
      else {
        markers[i].setMap(null);
      } 
     }
  }