javascript - 显示/隐藏类别标记。不使用 MarkerCluster

Question

我正在尝试选择显示和隐藏带有类别的标记。 它工作正常，但如果 map 上有标记簇则无法工作。 例如。当我选择 map 上的类别酒吧标记时，类别餐厅消失，但标记簇仍在 map 上。这是我的 intin 函数:

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(52.6145, 21.3418);
var mapOptions = {
    zoom: 6,
    center: chicago
};
map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
directionsDisplay.setMap(map);
// Geolocation
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var pos = new google.maps.LatLng(position.coords.latitude,
            position.coords.longitude);
        document.getElementById('field').value = +position.coords
            .latitude + "," + position.coords.longitude;
        marker = new google.maps.Marker({
            position: pos,
            animation: google.maps.Animation.DROP,
            map: map
        });
        map.setCenter(pos);
    }, function() {
        handleNoGeolocation(true);
    });
} else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
}
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("db/parse_xml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName(
        "marker");
    markerArray = [];
    for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var type = markers[i].getAttribute("type");
        var cover = markers[i].getAttribute("cover");
        var point = new google.maps.LatLng(parseFloat(markers[i]
            .getAttribute("lat")), parseFloat(markers[i]
            .getAttribute("lng")));
        var html = "<div id='infobox'><img src='" + cover +
            "'/><b>" + name + "</b><br>" + address +
            " <br/><input type='button' id='end' onClick=calcRoute() name='" +
            name + "," + address +
            "' value='Wyznacz trasę'></div>";
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow,
            category: type
        });
        markerArray.push(marker);
        bindInfoWindow(marker, map, infoWindow, html);
        document.getElementById('pasekBoczny').innerHTML +=
            '<li class="list-sidebar" ><a href="javascript:myclick(' +
            i + ')"  >' + name + '</a></li>';
        // markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markerArray);
});}

和我的过滤功能:

filterMarkers = function (category) {
for (i = 0; i < markers.length; i++) {
    marker = markers[i];
    // If is same category or category not picked
    if (marker.category == category || category.length === 0) {
        marker.setVisible(true);
    }
    // Categories don't match 
    else {
        marker.setVisible(false);
    }
}}

Answer 1

我假设您不想完全删除标记簇，只需更改隐藏标记的位置即可。当您循环标记时，请从集群中删除那些隐藏的标记，如下所示:

        // Categories don't match 
        else {
            marker.setVisible(false);
            markerCluster.removeMarker(marker);
        }

同样，如果您显示标记，您可能需要使用 addMarker 将其添加回集群中

        // If is same category or category not picked
        if (marker.category == category || category.length === 0) {
            marker.setVisible(true);
            markerCluster.addMarker(marker);
        }

然后您可能需要调用 MarkerClusterer 上的redraw 函数。

参见https://googlemaps.github.io/js-marker-clusterer/docs/reference.html

redraw() Redraws the clusters.

您需要首先修改代码以使 MarkerClusterer 成为全局变量。例如

var markerCluster;

function initialize() {
    ...
    markerCluster = new MarkerClusterer(map, markerArray);
}

filterMarkers = function (category) {
    for (i = 0; i < markers.length; i++) {
        marker = markers[i];
        // If is same category or category not picked
        if (marker.category == category || category.length === 0) {
            marker.setVisible(true);
            markerCluster.addMarker(marker);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
            markerCluster.removeMarker(marker);
        }
    }

    markerCluster.redraw();
};