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个的群集都是红色的

修改

从此链接中我发现我可能需要的是计算器。所以我尝试了一下，但还没有成功（虽然我认为我离解决方案很近了。实际上，我希望我现在非常接近解决方案）。

所以我尝试更改我的选项：

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');进行了测试。

希望这些额外的信息能够帮助您找到解决方案。

- Novarg

Answer 1

正如我在编辑中提到的那样，我已经非常接近解决方案了。因此，今天我又仔细查看了代码，再次检查了文档，并在ClusterIconInfo中注意到以下内容:

index number 在样式数组中要用于设置聚合图标样式的元素的索引加1。

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

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

现在它就像魔法一样工作(正如它应该的那样)。

希望这可以帮助某个人在未来的某一天。

- Novarg

---

它曾经帮助过某个人的 :) - João Sequeira

谢谢，伙计。虽然我遇到了一些不同的问题，但你的代码还是帮了我很多。 - PANKAJ NAROLA

你能用三种颜色让它工作吗？我正在尝试复制你的解决方案这里，它几乎可以工作。 - anm767

Answer 2

在Novarg的答案基础上进行扩展，您需要定义一个Calculator，它从传递到MarkerClusterer构造函数的初始样式数组中选择一个样式。

如果您想扩展原始功能（根据Cluster包含的标记数控制样式），可以在初始样式数组中以3的倍数添加样式，并在计算器中调用原始Calculator。

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

- Will Freeman