Markerclusterer 根据里面的标记设置标记簇图标

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中发现了以下内容：

index number 样式数组中元素的index加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 的倍数的样式，并在您的计算器。

// create MarkerClusterer instance with array of styles, multiples of 3
const markerClusterer = new MarkerClusterer(this.map, this.kioskMarkers, {
  clusterClass: "custom-clustericon",
  styles: [
    {
      width: 30,
      height: 30,
      className: "normal"
    },
    {
      width: 40,
      height: 40,
      className: "normal"
    },
    {
      width: 50,
      height: 50,
      className: "normal"
    },
    {
      width: 30,
      height: 30,
      className: "special"
    },
    {
      width: 40,
      height: 40,
      className: "special"
    },
    {
      width: 50,
      height: 50,
      className: "special"
    }]
});

// your function that determines special styling
const checkForYourSpecialCondition = () => true;

// new calculator function
const newCalculator = (markers, numStyles) => {
    const offset = checkForYourSpecialCondition() ? 3 : 0;
    const { text, index } = MarkerCluster.CALCULATOR(markers, numStyles);
    return {text, index: index + offset};
}

markerClusterer.setCalculator(newCalculator);