Markerclusterer根据里面的标记设置标记集群图标 [英] Markerclusterer set marker cluster icon depending on markers inside it

问题描述

假设我想制作一个网页，显示每个停车位剩余的免费停车位的大概数量（由于保密性，我不允许提供任何有关我实际上在做什么的细节）。为此，我使用 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] .getIcon（）。indexOf（redP.png）> -1）{
return {text：markers.length，index：1};
}
}
return {text：markers.length，index：0};
}
};

但是计算器永远不会被使用。我通过在其中放入一个简单的 alert（'test'）; 来测试它。

将帮助您找到解决方案。

解决方案

正如我在编辑中提到的那样，我非常接近解决方案。因此，我今天又看了一遍代码，检查了 docs 再次注意到以下内容 ClusterIconInfo ：
$ b

索引号

所以在样式数组中使用索引加1 来设置集群图标的样式。基本上我简单地通过将索引加1来解决这个问题（并且我还将 Calculator 移动为var，然后使用 setCalculator（）方法在 MarkerClusterer 本身上）。所以我的代码变成了：

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ i（marker.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）;

现在它像一个魅力一样（它应该）。

希望这有助于某个人。

Let's say that I want to make a webpage that will show approximate number of free parking spots left on each parking(due to confidentiality I'm not allowed to give any details of what I'm actually doing). For this I'm using Google maps and Markerclusterer. So for parking with less than 5% spots left I'd like to show a red marker, for parkings with 5%-25% spots I'd show a yellow one and for ones with more than 25% free spots I want to make it green. So far I could make those markers and cluster them, but here's the tricky part(and question itself):

How can I make a cluster icon dependant on the markers inside it?

For example:

• Parking A is green
• Parking B is red
• Parking C is green
• Parking D is yellow

When zoomed out I want to show the cluster that has all 4 of them red(worst of all). When zoomed in I'd get 2 clusters(A+B and C+D). I want the first cluster(A+B) to be red and second(C+D) should be yellow.

What I did so far:

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

Right now I only have red and green markers, which should be enough to test it. But behaviour of this cluster now is as follows:

• All clusters with less than 10 markers in it are green
• All clusters with more than 9 markers in it are red

EDIT

From this link I found that what I might need is Calculator. So I tried it, but still no luck(although I think that I'm getting closer. Actually, I hope I'm very close to the solution right now).

So I tried to change my options:

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

But the Calculator is never being used. I tested it by putting a simple alert('test'); inside it.

I hope this additional info will help you to help me find a solution.

解决方案

As I already mentioned in the edit, I was very close to the solution. So I took another(fresh) look at the code today, checked the docs once again and noticed the following in the ClusterIconInfo:

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

So basically I solved this problem simply by incrementing the index by one(and I also moved Calculator to be a var and then used setCalculator() method on the MarkerClusterer itself). So my code became:

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

And now it works like a charm(as it should).

Hopefully this could help somebody someday.

这篇关于Markerclusterer根据里面的标记设置标记集群图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！