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

Question

假设我想制作一个网页，显示每个 parking 场剩余的大概免费 parking 位数量(出于保密原因，我不能提供我实际在做什么的任何细节)。为此，我使用了 Google map 和 Markerclusterer。因此，对于剩余 parking 位少于 5% 的 parking 位，我想显示一个红色标记，对于有 5%-25% parking 位的 parking 位，我会显示一个黄色标记，对于剩余 parking 位超过 25% 的 parking 位，我想制作它是绿色的。到目前为止，我可以制作这些标记并将它们聚类，但这是棘手的部分(和问题本身):

如何根据其中的标记制作一个簇图标？

例如:

• parking 场 A 是绿色的
• parking 场B是红色的
• parking 场C是绿色的
• parking 场 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 中的以下内容:

index number The index plus 1 of the element in the styles array to be used to style the cluster icon.

所以基本上我通过将 index 递增一个来解决这个问题(我还将 Calculator 移动到一个 var 然后使用 setCalculator() MarkerClusterer 本身的方法)。所以我的代码变成了:

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

现在它就像一个魅力(它应该)。

希望有一天这能对某人有所帮助。