Javascript 显示/隐藏带有类别的标记。不使用MarkerCluster

我正在尝试选择以显示和隐藏带有类别的标记。 它可以正常工作，但如果地图上有markercluster，则不起作用。 例如，当我选择categorybar时，地图上标记了categoryrestaurantDisaper，但markercluster仍在地图上。以下是我的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);
    }
}}

函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var chicago=new google.maps.LatLng（52.6145,21.3418）；
变量映射选项={
缩放：6，
中心：芝加哥
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
方向显示.setMap（地图）；
//地理定位
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos=新的google.maps.LatLng（position.coords.latitude，
位置坐标经度）；
document.getElementById（'field'）。value=+position.coords
.纬度+“，”+位置.坐标.经度；
marker=新的google.maps.marker({
职位:pos,，
动画：google.maps.animation.DROP，
地图：地图
});
地图设置中心（pos）；
}，函数（）{
手持导航（真）；
});
}否则{
//浏览器不支持地理位置
手动定位（假）；
}
var infoWindow=new google.maps.infoWindow；
//根据PHP文件的名称更改此选项
下载URL（“db/parse_xml.php”，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName(
“标记”）；
Markerary=[]；
对于（var i=0；i“+地址+
“
”；
var icon=customIcons[type]| |{}；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
icon:icon.icon，
shadow:icon.shadow，
类别：类型
});
markerArray.push（标记器）；
bindInfoWindow（标记、地图、infoWindow、html）；
document.getElementById（'pasekBoczny'）.innerHTML+=
“
”；
//标记器。推（标记器）；
}
var markerCluster=新的MarkerClusterer（映射，markerArray）；
});}

和我的过滤功能：

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);
    }
}}

filterMarkers=功能（类别）{
对于（i=0；i

我假设您不想完全删除标记群集，只需更改隐藏标记的位置即可。在标记上循环时，将隐藏的标记从集群中移除，如下所示：

        // 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（）重新绘制簇

首先需要修改代码，使MarkerClusterer成为全局变量。e、 g

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();
};

var-markerCluster；
函数初始化（）{
...
markerCluster=新的MarkerClusterer（地图、markerArray）；
}
过滤器标记=功能（类别）{
对于（i=0；i

我发现markerCluster未定义，您可以在此处看到我的地图：这是因为您仍在这样做：

var markerCluster=new MarkerClusterer（地图，markerArray）。
var
关键字使markerCluster成为只有初始化函数才能访问的局部变量。单击选择栏几次后刷新Markercluster