使用 Javascript 在 Google 地图中显示/隐藏标记集群

debugcn 发表于 Dev

路易吉·卡拉多娜

我有一张带有 2 种类型标记的地图，直到现在我提供了 2 个复选框，可以使用以下代码显示/隐藏这些标记：

复选框

<input type="checkbox" id="suggested" name="suggested" onclick="toggleMarkers('suggested')">
<label for="suggested"> Suggested</label>
<input type="checkbox" id="organized" name="organized" onclick="toggleMarkers('organized')">
<label for="organized"> Organized</label>

Javascript

function toggleMarkers(type) {
    switch(type)
    {
        case 'suggested':
            for (var i = 0; i < suggested.length; i++) {
                if (suggested[i].getMap() === null) {
                    suggested[i].setMap(map);
                } else {
                    suggested[i].setMap(null);
                }
            }
            break;

        case 'organized':
            for (var i = 0; i < organized.length; i++) {
                if (organized[i].getMap() === null) {
                    organized[i].setMap(map);
                } else {
                    organized[i].setMap(null);
                }
            }
            break;

        default: break;
    }
}

其中suggested和organized是包含相应类型标记的 2 个数组。现在我注意到有很多标记是不够的，地图可能会令人困惑，然后我决定引入标记集群。我可以这样做，导入库并添加就足够了

let suggestedCluster = new MarkerClusterer(map, suggested, {gridSize:80, styles:styles[0]});

let organizedCluster = new MarkerClusterer(map, organized, {gridSize:80, styles:styles[1]});

问题是我想保留显示/隐藏标记类别的功能，但上面的代码不再适用，它有错误的行为。如何显示/隐藏集群类别以及未包含在集群中的同一类别的标记？

乔纳森·威尔逊

根据参考，MarkerClusterer有方法addMarkers和clearMarkers。

function toggleClusterer(type){
    switch(type)
    {
        case 'suggested':
            toggle(suggestedCluster, suggested);
            break;

        case 'organized':
            toggle(organizedCluster, organized);
            break;
    }

    function toggle(clusterer, markers) {
        if(clusterer.getMarkers().length == 0){
            clusterer.addMarkers(markers);
        } else {
            clusterer.clearMarkers();
        }
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。