Google Maps markClusterer：如何在配置对象中组合 Interface Renderer 和 GridOptions gridSize？

我目前正在尝试实施Google 地图 JavaScript MarkerClusterer在网站上。

我在用着界面渲染器覆盖几个默认配置参数。

let renderer = {
    render: ({ count, position }) =>
        new google.maps.Marker({
            label: {
                text: String(count),
                color: "transparent",
            },
            position,
            icon: {
                url: mapOperator.imageBasePath + "pin-cluster-1.png",
            },
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        }),
};

let config = { map, markers, renderer };
let cluster = new markerClusterer.MarkerClusterer(config);

请注意，我通过 unpkg 添加markerClusterer 插件。所以我必须这样声明集群：let cluster = new markerClusterer.MarkerClusterer(config); (如官方文档的“安装”部分所述）（请参阅我上面的代码位的最后一行）。

这段代码效果很好，但我也想重写GridOptions 接口中的 gridSize 属性为了获得更大的集群和更少的顺序（好吧，我希望......我什至不确定这个选项会给我带来我所期望的；我不是英语母语，给出的描述对我来说并不完全清楚......）我的地图上的单独标记。

我因以下几个原因而苦苦挣扎：

• 我不熟悉他们设置代码的方式，
• 该文档是空的，并且没有提供有关如何实现我想要的目标的示例代码，
• 找不到有关堆栈溢出、教程（博客、社交网络等）的任何帮助。确实，我能找到的只是 10 万种过时的方法，但是当您使用界面渲染器时，这些方法不起作用。这是一个例子：

var markerClusterer = new MarkerClusterer(map, markers, {
    gridSize: 10,
    maxZoom: 9, // maxZoom set when clustering will stop
    imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
});

所以我尝试了几件事，但没有任何作用：

let config = { map, markers, renderer, GridOptions: { gridSize: 10 } };

let renderer = {
    render: ({ count, position }) =>
        new google.maps.Marker({
            label: {
                text: String(count),
                color: "transparent",
            },
            position,
            icon: {
                url: mapOperator.imageBasePath + "pin-cluster-1.png",
            },
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
            gridSize: 10,
        }),
};

let renderer = {
    render: ({ count, position }) =>
        new google.maps.Marker({
            label: {
                text: String(count),
                color: "transparent",
            },
            position,
            icon: {
                url: mapOperator.imageBasePath + "pin-cluster-1.png",
            },
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        }),
    
    GridOptions: ({ gridSize = 10 }),
    // gridSize: 10,
};

谁能帮我？谢谢！

Finally:

let renderer = {
    render: ({ count, position }) =>
        new google.maps.Marker({
            label: {
                text: String(count),
                color: "transparent",
            },
            position,
            icon: {
                url: mapOperator.imageBasePath + "pin-cluster-1.png",
            },
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        }),
};
let algorithm = new markerClusterer.GridAlgorithm({gridSize: 60});

let config = { map, markers, renderer, algorithm };
let cluster = new markerClusterer.MarkerClusterer(config);

而且，是的，如果增加其值（默认值：40），gridSize 属性确实会在地图上生成更大的簇和更少的单独标记。