google-maps - 谷歌地图标记集群

Question

我一直在尝试在我的一张谷歌地图（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
});