使用 MarkerCluster 更改颜色规则的 Google Maps V3答案

【问题标题】：Google Maps V3 with MarkerCluster changing the color rules使用 MarkerCluster 更改颜色规则的 Google Maps V3
【发布时间】：2013-06-26 03:45:32
【问题描述】：

使用带有 MarkerCluster 的 Google Maps V3，您可以在聚类时看到三种不同类型的颜色，具体取决于聚类在一起的数量。

问题：我想将规则从基于数量更改为该区域的案件严重程度，它也体现在我使用的自定义图标中。我使用的类型是绿色表示运行良好的产品，黄色表示警告，红色表示不良产品。

如果某处有坏产品，我希望能够看到集群图标上的红色，而不是基于数字..

我正在使用带有剃须刀的 ASP.NET MVC3 - 这可能会有所帮助。

伙计们可以这样做吗？

【问题讨论】：

标签： asp.net-mvc-3 razor google-maps-api-3 markerclusterer

【解决方案1】：

假设：

您的集群映像文件已就位且索引为 1-green； 2-黄色； 3-红色；
对标记图标（字符串|图标|符号）的引用作为对象的属性提供，markerIcons

var markerIcons = {
    'green': '...',
    'yellow': '...',
    'red': '...'
};

然后，您可以使用计算器功能控制显示哪些集群图标，如下所示：

var myClusterer = new MarkerClusterer(map, {
    ...,//options
});

mc.setCalculator(function(markers, numStyles) {
    var index = 1;//green
    loop:
    for(var i=0; i<markers.length; i++) {
        switch(markers[i].getIcon()) {
            case markerIcons.yellow:
                index = 2;//yellow
            break;
            case markerIcons.red:
                index = 3;//red
                break loop;
            break;
        }
    }
    var index = Math.min(index, numStyles);
    return {text:markers.length, index:index};
});

【讨论】：

【解决方案2】：

您需要更改计算器功能：

var mc = new MarkerClusterer(map);

mc.setCalculator(
    function(markers, numStyles) {
        return {text: markers.length, index: 8}; 
     }
 );

该函数获取标记列表并应返回一对：文本标签和颜色编号。

【讨论】：