Question

假设我想制作一个网页，显示每个停车位上剩下的大约免费停车位数（由于机密性，我不允许提供我实际在做的任何细节）。为此，我使用 Google地图和 Markerclusterer 。所以对于停留不到5％的停车点，我想要显示一个红色标记，对于5％-25％的停车位，我会显示一个黄色的停车位，对于那些我想要制造超过25％的免费停车位的停车位它绿色。到目前为止，我可以制作这些标记并将它们聚类，但这里是棘手的部分（和问题本身）：

如何根据其中的标记制作群集图标？

例如：

停车A是绿色
停车B为红色
停车C为绿色
停车D为黄色

缩小时我想显示其中所有4个都是红色的群集（最糟糕的是）。放大时，我会得到2个簇（A + B和C + D）。我希望第一个簇（A + B）为红色，第二个簇（C + D）应为黄色。

到目前为止我做了什么：

var mcOptions = {gridSize: 50, maxZoom: 15, styles: [{
    height: 46,
    url: "///Users/Novarg/Downloads/foundation-5.4.7/img/greenC.png",
    width: 46
  },
  {
    height: 46,
    url: "///Users/Novarg/Downloads/foundation-5.4.7/img/redC.png",
    width: 46
  }]};
  var markers = [];
  for (var i = 0; i < 100; i++) {
    var latLng = new google.maps.LatLng(51 + Math.random(),
      4 + Math.random());
    var marker = new google.maps.Marker({'position': latLng, icon: 'img/greenP.png'});
    markers.push(marker);
  }
  for (var i = 0; i < 20; i++) {
    var latLng = new google.maps.LatLng(51 - Math.random(),
      4 - Math.random());
    var marker = new google.maps.Marker({'position': latLng, icon: 'img/redP.png'});
    markers.push(marker);
  }
  var markerCluster = new MarkerClusterer(map, markers, mcOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

现在我只有红色和绿色标记，应该足以测试它。但现在这个集群的行为如下：

其中包含少于10个标记的所有群集均为绿色
其中包含超过9个标记的所有群集均为红色

修改

从this link我发现我可能需要的是 Calculator 。所以我尝试了，但仍然没有运气（虽然我认为我越来越近了。实际上，我希望我现在非常接近解决方案）。

所以我试着改变我的选择：

var mcOptions = {gridSize: 50, maxZoom: 15, styles: [{
  height: 46,
  url: "///Users/Novarg/Downloads/foundation-5.4.7/img/greenC.png",
  width: 46
},
{
  height: 46,
  url: "///Users/Novarg/Downloads/foundation-5.4.7/img/redC.png",
  width: 46
}],
calculator: function(markers, numStyles) {
  for (var i = 0; i < markers.length; i++) {
    if (markers[i].getIcon().indexOf("redP.png") > -1) {
      return {text: markers.length, index: 1};
    }
  }
  return {text: markers.length, index: 0};
}
};

但计算器永远不会被使用。我通过在其中放置一个简单的alert('test');来测试它。

我希望这些额外信息可以帮助您找到解决方案。

Answer 1

正如我在编辑中已经提到的，我非常接近解决方案。所以我今天再看了一遍（新鲜）代码，再次检查了docs，并在 ClusterIconInfo 中注意到以下内容：

索引编号样式数组中元素的索引加1 ，用于设置群集图标的样式。

所以基本上我只是通过将 index 增加一个来解决这个问题（我还将 Calculator 移动为var然后使用 setCalculator（）< MarkerClusterer 本身的/ em>方法。所以我的代码变成了：

var calc = function(markers, numStyles) { for (var i = 0; i < markers.length; i++) { if (markers[i].getIcon().indexOf("redP") > -1) { return {text: markers.length, index: 2}; } } return {text: markers.length, index: 1}; } var mcOptions = {gridSize: 50, maxZoom: 15, styles: [{ height: 46, url: "img/greenC.png", width: 46 }, { height: 46, url: "img/redC.png", width: 46 }] }; var markerCluster = new MarkerClusterer(map, markers, mcOptions); markerCluster.setCalculator(calc);

现在它就像一个魅力（应该如此）。

希望有一天这可以帮助某人。

Answer 2

要扩展Novarg的答案，您需要定义一个Calculator，它将从传递给MarkerClusterer的构造函数的初始样式数组中选择一种样式。

如果您想扩展原始功能（根据Cluster包含的标记数来控制样式，则可以在初始样式数组中以3的倍数添加样式，并调用原始的{{1 }}。

Calculator

Markerclusterer根据其中的标记设置标记簇图标

2 个答案: