更改特定 google 地图集群的集群图标 - markerclusterplus

Question

我想根据某些特定条件更改集群图标（dynamically/for 特定集群）。我能够识别条件并限制进一步深入研究。在该特定级别，我们正在为用户打开信息框。

问题出在群集上，因为我想将图标更改为其他图标。对于单个图钉，图标很好。

下面是我要实现的代码：

<!DOCTYPE html>
<html>
   <head>
      <style>
         /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
         #map {
         height: 100%;
         }
         /* Optional: Makes the sample page fill the window. */
         html, body {
         height: 80%;
         margin: 0;
         padding: 0;
         }
      </style>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtTgoZ3tcsUSNfK6yCPzX_muSVOG6N9Ho"></script>
      <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
      <button type="button" id="refreshmap">Click Me!</button>
      <div id="map"></div>
      <script>
         var gm_map;
         var markerArray = [];
         var clusterMarkers = [];
         var infoWindow = new google.maps.InfoWindow();
         function initialize(searchMarkers = []) {
            var marker, i;
            
            if(searchMarkers.length == 0) {
                clusterMarkers = [
                    new google.maps.Marker({
                      position: new google.maps.LatLng(59.381059, 13.504026),
                      map: gm_map,
                      title: "P1220214 1.JPG",
                      label: {
                        text: 'Label 1',
                        color: '#222222',
                        fontSize: '12px'
                      }
                    }),
         
                    new google.maps.Marker({
                      position: new google.maps.LatLng(59.381059, 13.504026),
                      map: gm_map,
                      title: "P1220214 2.JPG",
                      label: {
                        text: 'Label 2',
                        color: '#222222',
                        fontSize: '12px'
                      }
                    
                    }),
         
                    new google.maps.Marker({
                      position: new google.maps.LatLng(59.340715, 13.49631),
                      map: gm_map,
                      title: "P1220214 3.JPG",
                      label: {
                        text: 'Label 3',
                        color: '#222222',
                        fontSize: '12px'
                      }
                    
                    }),
         
                    new google.maps.Marker({
                      position: new google.maps.LatLng(59.327232, 13.487384),
                      map: gm_map,
                      title: "P1220214 4.JPG",
                      label: {
                        text: 'Label 4',
                        color: '#222222',
                        fontSize: '12px'
                      }
                    
                    }),
         
                    new google.maps.Marker({
                      position: new google.maps.LatLng(59.379034, 13.516566),
                      map: gm_map,
                      title: "P1220214 5.JPG",
                      label: {
                        text: 'Label 5',
                        color: '#222222',
                        fontSize: '12px'
                      }
                    
                    }),
         
                    new google.maps.Marker({
                      position: new google.maps.LatLng(59.330000, 13.485000),
                      map: gm_map,
                      title: "P1220214 6.JPG",
                      label: {
                        text: 'Label 6',
                        color: '#222222',
                        fontSize: '12px'
                      }
                    
                    }),
         
                    new google.maps.Marker({
                      position: new google.maps.LatLng(59.328501, 13.485782),
                      map: gm_map,
                      title: "P1220214 7.JPG",
                      label: {
                        text: 'Label 7',
                        color: '#222222',
                        fontSize: '12px'
                      }
                    
                    }),
         
                    new google.maps.Marker({
                      position: new google.maps.LatLng(59.328501, 13.485782),
                      map: gm_map,
                      title: "P1220214 8.JPG",
                      label: {
                        text: 'Label 8',
                        color: '#222222',
                        fontSize: '12px'
                      }
                    
                    })
                ]
            } else {
                clusterMarkers = searchMarkers;
            }
            
            var options_googlemaps = {
                minZoom: 9,
                zoom: 9,
                center: new google.maps.LatLng(59.328631, 13.485688),
                maxZoom: 18,
            }
            
            gm_map = new google.maps.Map(document.getElementById('map'), options_googlemaps)
            
            var options_markerclusterer = {
                //gridSize: 20,
                maxZoom: 18,
                zoomOnClick: false,
                imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
                label: {
                    text: 'This is custom text'
                }
            };
            
            var markerCluster = new MarkerClusterer(gm_map, clusterMarkers, options_markerclusterer);
            
            markerCluster.setCalculator(function(markers, numStyles){
                var index = 0,
                count = markers.length,
                total = count;
                
                while (total !== 0) {
                    //Create a new total by dividing by a set number
                    total = parseInt(total / 5, 10);
                    //Increase the index and move up to the next style
                    index++;
                }
                index = Math.min(index, numStyles);
                samePin = _getPinStatus(markers);
                if (samePin) {
                    return {
                        text: count + " ("+ count + " Jobs)",
                        index: index
                    };
                } else {
                    return {
                        text: count,
                        index: index
                    };
                }               
            });
            
            
            google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
                
                //This needs some logic to identify if all the internal pings are at same location - execute else part otherwise further zoom in using if code.
                var markers = cluster.getMarkers();
                var samePin = false;
                samePin = _getPinStatus(markers);
                
                if (!samePin ){
                    gm_map.setCenter(cluster.center_);
                    gm_map.setZoom(gm_map.getZoom() + 2);
                } else {
                    // This is where I want to change the icon of the particular cluster.   
                    var array = [];                     
                    for (i = 0; i < markers.length; i++) {
                        array.push(markers[i].getTitle() + '<br>');
                    }
                    if (gm_map.getZoom() <= markerCluster.getMaxZoom()) {
                        infoWindow.setContent(markers.length + " markers<br>" + array);
                        infoWindow.setPosition(cluster.getCenter());
                        infoWindow.open(gm_map);
                    }
                }
            });
            
            for (i = 0; i < clusterMarkers.length; i++) {
                var marker = clusterMarkers[i];
         
                google.maps.event.addListener(marker, 'click', (function(marker) {
                    return function() {
                        infoWindow.setContent(this.getTitle());
                        infoWindow.open(gm_map, this);
                    }
                })(marker));
            }
         }
         
         $(document).ready(function() {
            initialize();
            $('body').on('click', '#close-link', function() {
                $('#toggle-photolist').fadeOut();
                $('#close-overlay').fadeOut();
            });
            $('#refreshmap').click(function() {
                searchMarkers = [
                    new google.maps.Marker({
                      position: new google.maps.LatLng(59.381059, 13.504026),
                      map: gm_map,
                      title: "Search Data 1.JPG",
                      label: {
                        text: 'Search label 1',
                        color: '#222222',
                        fontSize: '12px'
                      }
                    
                    }),
         
                    new google.maps.Marker({
                      position: new google.maps.LatLng(59.338683, 13.492057),
                      map: gm_map,
                      title: "Search Data 2.JPG",
                      label: {
                        text: 'Search label 1',
                        color: '#222222',
                        fontSize: '12px'
                      }
                    
                    })
                ]
                initialize(searchMarkers);
            });
         });
         
         function _getPinStatus(markers) {
            for (i = 0; i < markers.length; i++) {
                var parentLatitude = markers[0].getPosition().lat();
                var parentLongitude = markers[0].getPosition().lng();
                
                if(markers[i].getPosition().lat() == parentLatitude && 
                    markers[0].getPosition().lng() == parentLongitude) {                        
                    samePin = true;
                }
                else {
                    // break out of the loop in case a single pin is different and allow user to further zoom in the map
                    samePin = false;
                    break;
                }
            }
            return samePin;
         }
         
      </script>
      <!-- Replace following script src -->
   </body>
</html>

我试图构建的逻辑是，如果集群下方有相同的引脚（我不想向下钻取），则将图标更改为其他任何图标。函数 _getPinStatus 帮助我识别上述逻辑并创建信息窗口。

我也无法设法获得 zoom change 事件 - 但这是一个单独的查询

我尝试使用 clearMarkers() 函数并通过在 options_markerclusterer 数组中提供图像来重新映射集群，但它确实替换了所有底层标记上的图像。

我找不到有关 setStyles 及其实施的详细信息。绘制地图后是否可以推送样式。

感谢任何建议。

Answer 1

您可以向用于定义群集图标样式的样式数组添加其他样式：

var mcStyles = markerCluster.getStyles();
  mcStyles.push({
    url: "http://www.geocodezip.com/mapIcons/markerclusterer/heart50.png",
    width: 50,
    height: 44,
    anchorIcon: [44, 25],
    textSize: 10,
    textColor: "black",
    textDecoration: "none",
    fontStyle: "normal",
    fontFamily: "Arial,sans-serif",
    backgroundPosition: "0 0",
  });

然后将“计算器”调整为 return 相应的索引（在本例中为 6），当您点击“相同的引脚”时：

markerCluster.setCalculator(function(markers, numStyles) {
  var index = 0,
    count = markers.length,
    total = count;

  while (total !== 0) {
    //Create a new total by dividing by a set number
    total = parseInt(total / 5, 10);
    //Increase the index and move up to the next style
    index++;
  }
  index = Math.min(index, numStyles);
  samePin = _getPinStatus(markers);
  if (samePin) {
    return {
      text: count + " (" + count + " Jobs)",
      index: 6 // reference added style
    };
  } else {
    return {
      text: count,
      index: index
    };
  }
});

proof of concept fiddle

代码片段：

var gm_map;
var markerArray = [];
var clusterMarkers = [];
var infoWindow = new google.maps.InfoWindow();

function initialize(searchMarkers = []) {
  var marker, i;

  if (searchMarkers.length == 0) {
    clusterMarkers = [
      new google.maps.Marker({
        position: new google.maps.LatLng(59.381059, 13.504026),
        map: gm_map,
        title: "P1220214 1.JPG",
        label: {
          text: 'Label 1',
          color: '#222222',
          fontSize: '12px'
        }
      }),

      new google.maps.Marker({
        position: new google.maps.LatLng(59.381059, 13.504026),
        map: gm_map,
        title: "P1220214 2.JPG",
        label: {
          text: 'Label 2',
          color: '#222222',
          fontSize: '12px'
        }

      }),

      new google.maps.Marker({
        position: new google.maps.LatLng(59.340715, 13.49631),
        map: gm_map,
        title: "P1220214 3.JPG",
        label: {
          text: 'Label 3',
          color: '#222222',
          fontSize: '12px'
        }

      }),

      new google.maps.Marker({
        position: new google.maps.LatLng(59.327232, 13.487384),
        map: gm_map,
        title: "P1220214 4.JPG",
        label: {
          text: 'Label 4',
          color: '#222222',
          fontSize: '12px'
        }

      }),

      new google.maps.Marker({
        position: new google.maps.LatLng(59.379034, 13.516566),
        map: gm_map,
        title: "P1220214 5.JPG",
        label: {
          text: 'Label 5',
          color: '#222222',
          fontSize: '12px'
        }

      }),

      new google.maps.Marker({
        position: new google.maps.LatLng(59.330000, 13.485000),
        map: gm_map,
        title: "P1220214 6.JPG",
        label: {
          text: 'Label 6',
          color: '#222222',
          fontSize: '12px'
        }

      }),

      new google.maps.Marker({
        position: new google.maps.LatLng(59.328501, 13.485782),
        map: gm_map,
        title: "P1220214 7.JPG",
        label: {
          text: 'Label 7',
          color: '#222222',
          fontSize: '12px'
        }

      }),

      new google.maps.Marker({
        position: new google.maps.LatLng(59.328501, 13.485782),
        map: gm_map,
        title: "P1220214 8.JPG",
        label: {
          text: 'Label 8',
          color: '#222222',
          fontSize: '12px'
        }

      })
    ]
  } else {
    clusterMarkers = searchMarkers;
  }

  var options_googlemaps = {
    minZoom: 9,
    zoom: 9,
    center: new google.maps.LatLng(59.328631, 13.485688),
    maxZoom: 18,
  }

  gm_map = new google.maps.Map(document.getElementById('map'), options_googlemaps)

  var options_markerclusterer = {
    //gridSize: 20,
    maxZoom: 18,
    zoomOnClick: false,
    imagePath: 'https://www.geocodezip.net/mapIcons/markerclusterer/m',
    label: {
      text: 'This is custom text'
    }
  };

  var markerCluster = new MarkerClusterer(gm_map, clusterMarkers, options_markerclusterer);
  var mcStyles = markerCluster.getStyles();
  console.log(mcStyles);
  mcStyles.push({
    url: "https://www.geocodezip.net/mapIcons/markerclusterer/heart50.png",
    width: 50,
    height: 44,
    anchorIcon: [44, 25],
    textSize: 10,
    textColor: "black",
    textDecoration: "none",
    // textLineHeight: 12,
    // fontWeight: "bold",
    fontStyle: "normal",
    fontFamily: "Arial,sans-serif",
    backgroundPosition: "0 0",
  });
  markerCluster.setCalculator(function(markers, numStyles) {
    console.log("setCalculator(numMarkers" + markers.length + ", numStyles=" + numStyles + ")");
    var index = 0,
      count = markers.length,
      total = count;

    while (total !== 0) {
      //Create a new total by dividing by a set number
      total = parseInt(total / 5, 10);
      //Increase the index and move up to the next style
      index++;
    }
    index = Math.min(index, numStyles);
    samePin = _getPinStatus(markers);
    if (samePin) {
      return {
        text: count + " (" + count + " Jobs)",
        index: 6
      };
    } else {
      return {
        text: count,
        index: index
      };
    }
  });


  google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {

    //This needs some logic to identify if all the internal pings are at same location - execute else part otherwise further zoom in using if code.
    var markers = cluster.getMarkers();
    var samePin = false;
    samePin = _getPinStatus(markers);

    if (!samePin) {
      gm_map.setCenter(cluster.center_);
      gm_map.setZoom(gm_map.getZoom() + 2);
    } else {
      // This is where I want to change the icon of the particular cluster.   
      var array = [];
      for (i = 0; i < markers.length; i++) {
        array.push(markers[i].getTitle() + '<br>');
      }
      if (gm_map.getZoom() <= markerCluster.getMaxZoom()) {
        infoWindow.setContent(markers.length + " markers<br>" + array);
        infoWindow.setPosition(cluster.getCenter());
        infoWindow.open(gm_map);
      }
    }
  });

  for (i = 0; i < clusterMarkers.length; i++) {
    var marker = clusterMarkers[i];

    google.maps.event.addListener(marker, 'click', (function(marker) {
      return function() {
        infoWindow.setContent(this.getTitle());
        infoWindow.open(gm_map, this);
      }
    })(marker));
  }
}

$(document).ready(function() {
  initialize();
  $('body').on('click', '#close-link', function() {
    $('#toggle-photolist').fadeOut();
    $('#close-overlay').fadeOut();
  });
  $('#refreshmap').click(function() {
    searchMarkers = [
      new google.maps.Marker({
        position: new google.maps.LatLng(59.381059, 13.504026),
        map: gm_map,
        title: "Search Data 1.JPG",
        label: {
          text: 'Search label 1',
          color: '#222222',
          fontSize: '12px'
        }

      }),

      new google.maps.Marker({
        position: new google.maps.LatLng(59.338683, 13.492057),
        map: gm_map,
        title: "Search Data 2.JPG",
        label: {
          text: 'Search label 1',
          color: '#222222',
          fontSize: '12px'
        }

      })
    ]
    initialize(searchMarkers);
  });
});

function _getPinStatus(markers) {
  for (i = 0; i < markers.length; i++) {
    var parentLatitude = markers[0].getPosition().lat();
    var parentLongitude = markers[0].getPosition().lng();

    if (markers[i].getPosition().lat() == parentLatitude &&
      markers[0].getPosition().lng() == parentLongitude) {
      samePin = true;
    } else {
      // break out of the loop in case a single pin is different and allow user to further zoom in the map
      samePin = false;
      break;
    }
  }
  return samePin;
}

/* Always set the map height explicitly to define the size of the div
         * element that contains the map. */

#map {
  height: 100%;
}


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

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

<!DOCTYPE html>
<html>

<head>
  <title>SO MarkerClusterer Question</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=&v=weekly"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <button type="button" id="refreshmap">Click Me!</button>
  <div id="map"></div>
</body>

</html>

有关其工作原理的详细信息：

MarkerClustererPlus source on GitHub

useStyle:

/**
* Sets the icon styles to the appropriate element in the styles array.
*
* @ignore
* @param sums The icon label text and styles index.
*/
useStyle(sums: ClusterIconInfo): void

在集群中使用 updateIcon:

/**
* Updates the cluster icon.
*/
public updateIcon(): void

此处：Cluster

const sums = this.markerClusterer_.getCalculator()( this.markers_, numStyles ); this.clusterIcon_.setCenter(this.center_);
this.clusterIcon_.useStyle(sums);
this.clusterIcon_.show();

其中 sums 是由计算器函数 return 计算的结构：

更改特定 google 地图集群的集群图标 - markerclusterplus

Change cluster icon for a particular google map cluster - markerclusterplus

google-maps

google-maps-api-3

markerclusterer