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

Question

我制作了一张带有集群的地图。 idea 是簇的颜色应该取决于内部标记的颜色：如果有红色标记，则簇为红色；没有红色，但有黄色标记，簇为黄色；没有红色和黄色标记，簇是蓝色的。

这仅在特定缩放级别下按预期工作。完全缩小它显示蓝色集群，但是那里有红色标记，所以我希望是红色集群。当我开始放大并且地图显示多个集群时，大多数看起来是正确的，但在某些情况下这种违规行为会重复出现，它会将 red/yellow/blue 标记分组为蓝色集群，我希望是红色。与黄色 + 蓝色标记相同，应该形成黄色簇，而不是蓝色。

根据 this setCalculator 函数分别为每个集群运行，因此我期待一致的行为，但结果却是混合的。

    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(51, 4),
            zoom:6,
            mapTypeControlOptions:"roadmap"
        });

        var markers = [];

        // make random red, yellow, blue markers
        for (var i = 0; i < 20; i++) {
            var latLng = new google.maps.LatLng(51.11 - Math.random(), 4.11 - Math.random());
            var marker = new google.maps.Marker({
                position: latLng, 
                icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
                label: i,
                map: map
            });
            markers.push(marker);
        }
        for (var i = 0; i < 20; i++) {
            var latLng = new google.maps.LatLng(51.11 - Math.random(),4.11 - Math.random());
            var marker = new google.maps.Marker({
                position: latLng, 
                icon: 'http://maps.google.com/mapfiles/ms/micons/yellow.png',
                label: i,
                map: map
            });
            markers.push(marker);
        }
        for (var i = 0; i < 20; i++) {
            var latLng = new google.maps.LatLng(51.11 - Math.random(),4.11 - Math.random());
            var marker = new google.maps.Marker({
                position: latLng, 
                icon: 'http://maps.google.com/mapfiles/ms/micons/red.png',
                label: i,
                map: map
            });
            markers.push(marker);
        }

        // match cluster icon to markers
        var calc = function(markers, numStyles) {
            for (var i = 0; i < markers.length; i++) {
                if (markers[i].getIcon().indexOf("red.png") > -1) {
                    return {text: markers.length, index: 3}; // index of red
                }else if (markers[i].getIcon().indexOf("yellow.png") > -1) {
                return {text: markers.length, index: 2}; // index of yellow
                }else if (markers[i].getIcon().indexOf("green.png") > -1) {
                    return {text: markers.length, index: 1};// index of blue
                }
            }
        }

        // define cluster icons
        var mcOptions = {gridSize: 50, maxZoom: 15, styles: [{
                height: 50,
                url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m1.png",
                width: 50
            },
            {
                height: 50,
                url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m2.png",
                width: 50
            },
            {
                height: 50,
                url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m3.png",
                width: 50
            }]
        };
        var markerCluster = new MarkerClusterer(map, markers, mcOptions);
        markerCluster.setCalculator(calc);
    }

    #map {
            height: 80%;
          }
          /* Optional: Makes the sample page fill the window. */
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }

    <script defer src="https://maps.googleapis.com/maps/api/js?v=3.42&key=AIzaSyA4PP1O36qWCzer8K3VFyjf0uxRs4WVNFo&callback=initMap"></script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

    <div id="map"></div>

更新：更改了标记图标，使其与集群图标更容易区分。

Answer 1

您的问题之一是您的计算器功能。如果集群中有任何红色标记，您希望它为 return "red"，如果有任何黄色标记但没有红色标记，则为黄色，否则为蓝色。编写代码来做到这一点：

// match cluster icon to markers
var calc = function(markers, numStyles) {
    // default to blue
    var highestPriorityColor = 1;
    for (var i = 0; i < markers.length; i++) {
        if (markers[i].getIcon().indexOf("red.png") > -1) {
            // if any markers are red, will be red, can return result
            return {text: markers.length, index: 3}; // index of red
        } else if (markers[i].getIcon().indexOf("yellow.png") > -1) {
            // if any markers are yellow, update it to yellow if it is blue
            if (highestPriorityColor < 2)
                highestPriorityColor = 2; // index of yellow
        } /* else if (markers[i].getIcon().indexOf("green.png") > -1) {
            // ignore green markers (leave it whatever color it is, defaults to blue)
        } */
    }
    // return result once complete processing all the markers
    return {text: markers.length, index: highestPriorityColor}; // index of chosen cluster
}

缩小

放大

放大红色“17”簇

代码片段：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(51, 4),
    zoom: 6,
    mapTypeControlOptions: "roadmap"
  });

  var markers = [];

  // make random red, yellow, blue markers
  for (var i = 0; i < 50; i++) {
    var latLng = new google.maps.LatLng(51.11 - Math.random(), 4.11 - Math.random());
    var marker = new google.maps.Marker({
      position: latLng,
      icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
      label: "" + i,
      map: map
    });
    markers.push(marker);
  }
  for (var i = 0; i < 20; i++) {
    var latLng = new google.maps.LatLng(51.11 - Math.random(), 4.11 - Math.random());
    var marker = new google.maps.Marker({
      position: latLng,
      icon: 'http://maps.google.com/mapfiles/ms/micons/yellow.png',
      label: "" + i,
      map: map
    });
    markers.push(marker);
  }
  for (var i = 0; i < 5; i++) {
    var latLng = new google.maps.LatLng(51.11 - Math.random(), 4.11 - Math.random());
    var marker = new google.maps.Marker({
      position: latLng,
      icon: 'http://maps.google.com/mapfiles/ms/micons/red.png',
      label: "" + i,
      map: map
    });
    markers.push(marker);
  }

  // match cluster icon to markers
  var calc = function(markers, numStyles) {
    // default to blue
    var highestPriorityColor = 1;
    for (var i = 0; i < markers.length; i++) {
      if (markers[i].getIcon().indexOf("red.png") > -1) {
        // if any markers are red, will be red, can return result
        return {
          text: markers.length,
          index: 3
        }; // index of red
      } else if (markers[i].getIcon().indexOf("yellow.png") > -1) {
        // if any markers are yellow, update it to yellow if it is blue
        if (highestPriorityColor < 2)
          highestPriorityColor = 2; // index of yellow
      }
      /* else if (markers[i].getIcon().indexOf("green.png") > -1) {
                 // ignore green markers (leave it whatever color it is, defaults to blue)
             } */
    }
    // return result once complete processing all the markers
    return {
      text: markers.length,
      index: highestPriorityColor
    }; // index of chosen cluster
  }

  // define cluster icons
  var mcOptions = {
    gridSize: 50,
    maxZoom: 15,
    styles: [{
        height: 50,
        url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m1.png",
        width: 50
      },
      {
        height: 60,
        url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m2.png",
        width: 60
      },
      {
        height: 70,
        url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m3.png",
        width: 70
      }
    ]
  };
  var markerCluster = new MarkerClusterer(map, markers, mcOptions);
  markerCluster.setCalculator(calc);
}

#map {
  height: 80%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script defer src="https://maps.googleapis.com/maps/api/js?v=3.42&key=AIzaSyA4PP1O36qWCzer8K3VFyjf0uxRs4WVNFo&callback=initMap"></script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>


<div id="map"></div>

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

set marker cluster icon depending on markers inside it

javascript

google-maps

google-maps-api-3