如何正确配置Google Maps js-markerclusterer标记聚合选项？

在JavaScript版Google Maps中添加了500+个标记，使用js-markerclusterer库（CDN引入）实现标记聚合时，设置imagePath、gridSize、zoomOnClick、maxZoom等选项完全无效。原配置代码如下：

const clusterOptions = {
  imagePath: "<imagepath>",
  gridSize: 30,
  zoomOnClick: false,
  maxZoom: 10,
};

const markerCluster = new markerClusterer.MarkerClusterer({ map, markers, clusterOptions});

完整代码片段：

function initMap() {
    // Create the map.
        var lastWindow = null;
        var markers = new Array();
        const map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            keyboardShortcuts: false,
            center: { lat: 40.748817, lng: -73.985428 },
            disableDefaultUI: true,
            gestureHandling: "greedy",
            ClickableIcons: false,
            styles: mapStyle,
            restriction: {
                latLngBounds: NEW_YORK_BOUNDS,
                strictBounds: true
                    },
            
        });

        const markers_map = {{markers_map | tojson | safe}};
        const infowindow = new google.maps.InfoWindow();

        // Create markers.
        for (let i = 0; i < markers_map.length; i++) {
            const currMarker = markers_map[i];

            const marker = new google.maps.Marker({
              position: {lat: currMarker.lat, lng: currMarker.lng},
              map,
              animation: google.maps.Animation.DROP,
              icon: currMarker.icon
            });

            marker.addListener("click", () => {
              if (lastWindow) {lastWindow.close()};
              lastWindow = infowindow;
              const _id = currMarker._id;
              const name = currMarker.name;
              const url_link = currMarker.url_link;
              const address = currMarker.address;
              const neighborhood = currMarker.neighborhood;
              const from_day = currMarker.from_day;
              const to_day = currMarker.to_day;
              const from_hours = currMarker.from_hours;
              const to_hours = currMarker.to_hours;
              const content = `
              <div class=infowindow>
                  <div class=infowindow__imagecontainer>
                      <img class=infowindow__image src=${url_link} alt=HappyHour img>
                  </div>
                  <div class=infowindow__content onclick=nextpage()>
                      <h2 class=markers__name>${name}</h2><p class=markers__neighborhood>In ${neighborhood}</p>
                      <div class=markers__section>
                          <p class=markers__address>${address}</p>
                          {{ map("container__map") }}
                      </div>
                      <div class=infowindow__output>
                          <div class=output__details>${from_day}</div>
                          <div class=output__details>${to_day}</div>
                          <div class=output__details>${from_hours}</div>
                          <div class=output__details>${to_hours}</div>
                      </div>
                      <div class=infowindow__next>
                              {{ click("container__click") }}
                          <p>Click to see more</p>
                      </div>
                  <div>
                      <form name=infowindow--form id=next action=/location/${_id}></form>
              </div>
          `   ;
              
              infowindow.open({
                anchor: marker,
                map,
                shouldFocus: false,
              });

              infowindow.setContent(content)
              
            });

            markers.push(marker);
            
            map.addListener('click', () => {
            infowindow.close();
          });
        }   

        const clusterOptions = {
        imagePath: "<imagepath>",
gridSize: 30,
zoomOnClick: false,
maxZoom: 10,
};

        const markerCluster = new markerClusterer.MarkerClusterer({ map, markers, clusterOptions});
}

问题出在MarkerClusterer的初始化参数结构上：你把聚合选项嵌套在了clusterOptions属性中，但该库的构造函数要求所有配置选项直接与map、markers平级传入，不需要额外的嵌套对象。

方式一：直接平级传入配置 #

// 直接将聚合配置与map、markers平级传入
const markerCluster = new markerClusterer.MarkerClusterer({
  map: map,
  markers: markers,
  imagePath: "<imagepath>",
  gridSize: 30,
  zoomOnClick: false,
  maxZoom: 10
});

方式二：保留单独选项对象并展开合并 #

如果想保留独立的配置对象，可以用对象展开运算符合并参数：

const clusterOptions = {
  imagePath: "<imagepath>",
  gridSize: 30,
  zoomOnClick: false,
  maxZoom: 10,
};

// 展开clusterOptions，将配置合并到初始化参数中
const markerCluster = new markerClusterer.MarkerClusterer({ 
  map, 
  markers, 
  ...clusterOptions 
});

关键说明 #

js-markerclusterer的构造函数仅接受一个包含所有配置的单一对象，其中map和markers是必填项，其他聚合选项直接作为该对象的属性存在，不需要嵌套在额外的clusterOptions属性里——原代码的嵌套写法不符合库的参数规范，导致所有配置被忽略，进而设置无效。

内容的提问来源于stack exchange，提问作者Slowcooked