Google地图标记群集

Question

我一直在试图在我的一个Google地图（MarkerClusterer）上实现一项新功能，但我还没有完成。

它运行正常，但不是很顺利，如果你仔细查看代码并给我提供任何提示/建议，那就太好了。

我在这里运行测试：（链接删除）

• 请让我知道，如果你需要的信息了。

任何帮助表示赞赏:)

Answer 1

你似乎创建你的标志环内做一个可怕的很多。例如，你应该只需要在该循环之后执行var markerCluster = new MarkerClusterer(...)，而不是在每次循环中执行！

好的，在这里我只是将你的循环移出该行。

for (var i = 0; i < mapLocationsdata.businesses.length; i++) { 
    var businesses = mapLocationsdata.businesses[i]; 
    var pos = new google.maps.LatLng(businesses.lat, businesses.lng); 
    var marker = new google.maps.Marker({ 
     position: pos, 
     map: map, 
     title: businesses.company, 
     icon: placemarker[businesses.placemaker], 
     clickable: true, 
     draggable:false, 
     animation: google.maps.Animation.DROP 
    }); 

    markers.push(marker); 

    (function(i, marker){ 
     var infobox = new google.maps.InfoWindow({ 
      content: 
     //This creates the content inside the popup info window when clicked 
      '<div class="info"><div class="info1"><h4>' 
      +businesses.company+ 
      '</h4></div><div class="infotel">' 
      +businesses.itemAdresse+businesses.itemPostBy+businesses.itemTlf+businesses.itemEmail+businesses.itemWeb+ 
      '</div><div class="clearfix"></div></div>', 
     }); 

     //This function opens the info box and toggles the icon bounce 
     marker.addListener('click', function() { 
      infobox.open(map, marker); 
      toggleBounce(map, marker); 
     }); 
     //This function stops the bouncs on the icon once the infowindow is closed 
     infobox.addListener('closeclick', function() { 
      toggleBounce(map, marker); 
     }); 

     // POSSIBLY THIS FUNCTION COULD BE MOVED OUT OF THE LOOP TOO 
     //This makes them bounce when clicked 
     function toggleBounce() { 
      if (marker.getAnimation() != null) { 
      marker.setAnimation(null); 
      } else { 
      marker.setAnimation(google.maps.Animation.BOUNCE); 
      } 
     } 
    }) 

//The marker loop generates all of the markers 

    // NO IDEA WHAT THE POINT OF THIS LINE IS: 
    (i, marker);  

//Associate the styled map with the MapTypeId and set it to display. 
    map.mapTypes.set('map_style', styledMap); 
    map.setMapTypeId('map_style'); 
} 


var markerCluster = new MarkerClusterer(map, markers, { 
    gridSize: 60, 
    minimumClusterSize: 2, 
    calculator: function(markers, numStyles) { 
     if (markers.length >= 50) return {text: markers.length, index: 3}; // red 
     if (markers.length >= 5) return {text: markers.length, index: 2}; // yellow 
     return {text: markers.length, index: 0}; }      // blue 
});