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 
});