Question

我有一张包含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]});

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

Answer 1

根据the reference，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();
        }
    }
}

使用Javascript在Google Maps中显示/隐藏markerclusters

1 个答案: