javascript - Fluster 2如何以特定缩放级别显示所有标记

Question

我正在使用 Fluster 2 对标记进行聚类，并发现 Fluster 聚类方法过于激进。因此，即使我放大到城市级别，我最终仍然拥有比我真正想要的更多的集群。有谁知道如何修改混乱的 .js 以使其在您说缩放级别 5 后显示所有标记？

这里有太多与fluster相关的代码要添加，所以这个问题更适合那些已经使用fluster来满足他们的标记聚类需求的人。

谢谢，

Answer 1

好答案齐德。

顺便说一句，如果您有多个具有相同位置的标记，即使 gridSize 为 0，聚类仍然会发生。为了解决这个问题，请将网格设置为 -1

    google.maps.event.addListener(map, "zoom_changed", function() {

  var zoomLevel = map.getZoom();

  switch(true){
    case zoomLevel > 13:
      fluster.gridSize = -1;
          break;
    case zoomLevel > 12:
      fluster.gridSize = 10;
      break;
    case zoomLevel > 7:
      fluster.gridSize = 20;
      break;
    case zoomLevel > 5:
      fluster.gridSize = 40;
      break;
    default:
      fluster.gridSize = 60;
      break;
  }

});

Answer 2

您可以在地图的缩放级别上创建一个监听器，然后控制集群。这是您的代码应该是什么样子的示例。我还没有测试过代码，我从中获取代码的完整教程在这里。

var fluster = new Fluster2(map);
// Set styles for the clustered icons
fluster.styles = {
  0: {
    image: "http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m1.png",
    textColor: "#FFFFFF",
    width: 53,
    height: 52
  },
  10: {
    image: "http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m2.png",
    textColor: "#FFFFFF",
    width: 56,
    height: 55
  },
  15: {
    image: "http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m3.png",
    textColor: "#FFFFFF",
    width: 66,
    height: 65
  }
};
// Initialize Fluster
// This will set event handlers on the map and calculate clusters the first time.
fluster.initialize();

// Event listener for switching to Street View/Road Map to show/hide the
// close button, respectively
google.maps.event.addListener(panorama,"visible_changed",toggleVisible);

// Add a listener to the zoom change event so we can change the grid size
// of the cluster script. Should be dynamic!
google.maps.event.addListener(map, "zoom_changed", function() {

  var zoomLevel = map.getZoom();

  switch(true){
    case zoomLevel > 13:
      fluster.gridSize = 0;
      break;
    case zoomLevel > 12:
      fluster.gridSize = 10;
      break;
    case zoomLevel > 7:
      fluster.gridSize = 20;
      break;
    case zoomLevel > 5:
      fluster.gridSize = 40;
      break;
    default:
      fluster.gridSize = 60;
      break;
  }

});