假设我要制作一个网页，显示每个 parking 位上大约剩余的免费 parking 位(由于 secret 性，我不能提供我在做什么的任何详细信息)。为此，我使用了Google map 和Markerclusterer。因此，对于 parking 位少于5％的 parking 位，我想显示一个红色标记；对于 parking 位为5％-25％的 parking 位，我要显示一个黄色标记；对于 parking 位超过25％的 parking 位，我要显示一个红色标记它绿色。到目前为止，我可以制作这些标记并对其进行聚类，但这是棘手的部分(以及问题本身):
如何使群集图标依赖于其中的标记？
例如:
当缩小时，我想显示所有四个都为红色(最差)的群集。当放大时，我会得到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);
现在我只有红色和绿色的标记，这足以测试它。但是，此群集的行为现在如下:
编辑
从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');对其进行了测试。希望这些附加信息可以帮助您找到解决方案。
最佳答案
正如我在编辑中已经提到的那样，我非常接近解决方案。因此，我今天再次(重新)看了一下代码，再次检查了docs并注意到ClusterIconInfo中的以下内容:
因此，基本上我只是通过将索引增加一个来解决了这个问题(我也将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);
现在，它就像一个魅力一样工作(应该如此)。
希望有一天能对某人有所帮助。