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

Question

假设我想制作一个网页,显示每个停车位上剩下的大约免费停车位数(由于机密性,我不允许提供我实际在做的任何细节).为此,我使用谷歌地图和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');在里面放了一个简单的测试它.

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

Answer 1

正如我在编辑中已经提到的,我非常接近解决方案.所以我今天再看了一下(新的)代码,再次检查了文档并注意到ClusterIconInfo中的以下内容:

index number 索引加上样式数组中用于设置群集图标样式的元素的1.

所以基本上我只是通过将索引递增1来解决这个问题(我还将Calculator移动为var,然后在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);

而现在它就像一个魅力(应该如此).

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