Javascript Google Maps API：使用MarkerClusterer+；切换

我的GeoJson层有一个问题，我想（使用MarkerClusterer）对其进行集群，然后通过复选框或类似工具显示和隐藏它们。因此，我尝试了如下代码：

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(52.515696, 13.392624),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
    var bounds = new google.maps.LatLngBounds();
    var barLayer = new google.maps.Data();
    var cafeLayer = new google.maps.Data();

    barLayer.loadGeoJson('json/eat_drink/bar.geojson');
    cafeLayer.loadGeoJson('json/eat_drink/cafe.geojson');


    var markerClusterer = new MarkerClusterer(map); 
    var infowindow = new google.maps.InfoWindow();  
    markerClusterer.setMap(map);

    function displayMarkers(layer) { 
    var layer = layer;
    google.maps.event.addListener(layer, 'addfeature', function (e) {
        if (e.feature.getGeometry().getType() === 'Point') {
            var marker = new google.maps.Marker({
                position: e.feature.getGeometry().get(),
                title: e.feature.getProperty('name'),
                map: map
            });
            // open the infoWindow when the marker is clicked
            google.maps.event.addListener(marker, 'click', function (marker, e) {
                return function () {
                    var myHTML = e.feature.getProperty('name');
                    infowindow.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>");
                    infowindow.setPosition(e.feature.getGeometry().get());
                    infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
                    infowindow.open(map, marker);
                };
            }(marker, e));
            markerClusterer.addMarker(marker);
            bounds.extend(e.feature.getGeometry().get());
            map.fitBounds(bounds);
            map.setCenter(e.feature.getGeometry().get());
        }
    });
    layer.setMap(null);
    google.maps.event.addListener(map, "click", function () {
        infowindow.close();
    });

};

document.getElementById('bar').onclick = function(){            // enable and disable markers
        if(document.getElementById('bar').checked == true){
                displayMarkers(barLayer);
        }else{
            return null; 
        }
        };
}

函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（52.515696,13.392624），
缩放：11，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map”），
地图选项）；
var bounds=new google.maps.LatLngBounds（）；
var barLayer=new google.maps.Data（）；
var cafeLayer=new google.maps.Data（）；
loadGeoJson（'json/eat\u-drink/bar.geojson'）；
loadGeoJson（'json/eat\u-drink/cafe.geojson'）；
var markerClusterer=新的markerClusterer（map）；
var infowindow=new google.maps.infowindow（）；
markerClusterer.setMap（map）；
函数显示标记（层）{
var层=层；
google.maps.event.addListener（层'addfeature'，函数（e）{
如果（例如，feature.getGeometry（）.getType（）=='Point'）{
var marker=new google.maps.marker({
位置：e.feature.getGeometry（）.get（），
标题：e.feature.getProperty（'name'），
地图：地图
});
//单击标记时打开信息窗口
google.maps.event.addListener（标记，'click'，函数（标记，e）{
返回函数（）{
var myHTML=e.feature.getProperty（'name'）；
setContent（“+myHTML+”）；
设置位置（例如feature.getGeometry（）.get（））；
setOptions（{pixelcoffset:newgoogle.maps.Size（0，-30）}）；
信息窗口。打开（地图、标记）；
};
}（标记，e））；
markerClusterer.addMarker（标记器）；
extend（例如feature.getGeometry（）.get（））；
映射边界（bounds）；
map.setCenter（例如feature.getGeometry（）.get（））；
}
});
layer.setMap（空）；
google.maps.event.addListener（映射，“单击”，函数（）{
infowindow.close（）；
});
};
document.getElementById（'bar'）。onclick=function（）{//启用和禁用标记
if（document.getElementById（'bar'）。checked==true）{
显示标记（barLayer）；
}否则{
返回null；
}
};
}

不幸的是，这不起作用，我也不知道确切的原因。 如果我删除代码中的displayMarkers（）函数并用所需的GeoJson层（例如“barLayer”）替换“layer”，它就可以正常工作。

---

因为我最终会有很多GeoJason层，所以我更喜欢像这样的“紧凑”解决方案，而不是多次复制代码。你们知道如何正确地做到这一点吗？

恐怕我只做了重构代码的工作。你能试一下吗？如果不行，具体说明什么不行

function displayMarkers(layer, map, markerClusterer) {
    google.maps.event.addListener(layer, 'addfeature', function(e) {
        if (e.feature.getGeometry().getType() === 'Point') {
            var marker = new google.maps.Marker({
                position: e.feature.getGeometry().get(),
                title: e.feature.getProperty('name'),
                map: map
            });
            // open the infoBox when the marker is clicked
            google.maps.event.addListener(marker, 'click', function(e) {
                var myHTML = e.feature.getProperty('name');
                var infowindow = new google.maps.InfoWindow();
                infowindow.setContent("<div style='width:150px; text-align: center;'>" + myHTML + "</div>");
                infowindow.setPosition(e.feature.getGeometry().get());
                infowindow.setOptions({
                    pixelOffset: new google.maps.Size(0, -30)
                });
                infowindow.open(map, marker);
                google.maps.event.addListener(map, "click", function() {
                    infowindow.close();
                });
            });
            markerClusterer.addMarker(marker);
            var bounds = new google.maps.LatLngBounds();
            bounds.extend(e.feature.getGeometry().get());
            map.fitBounds(bounds);
            map.setCenter(e.feature.getGeometry().get());
        }
    });
    layer.setMap(null);
}

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(52.515696, 13.392624),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var barLayer = new google.maps.Data();
    var cafeLayer = new google.maps.Data();
    barLayer.loadGeoJson('json/eat_drink/bar.geojson');
    cafeLayer.loadGeoJson('json/eat_drink/cafe.geojson');
    var markerClusterer = new MarkerClusterer(map);
    markerClusterer.setMap(map);
    document.getElementById('bar').onclick = function() { // enable and disable streetViewControl
        if (document.getElementById('bar').checked == true) {
            displayMarkers(barlayer, map, markerClusterer);
        } else {
            return null;
        }
    };
}

功能显示标记（图层、地图、标记聚类器）{
google.maps.event.addListener（层'addfeature'，函数（e）{
如果（例如，feature.getGeometry（）.getType（）=='Point'）{
var marker=new google.maps.marker({
位置：e.feature.getGeometry（）.get（），
标题：e.feature.getProperty（'name'），
地图：地图
});
//单击标记时打开信息框
google.maps.event.addListener（标记，'click'，函数（e）{
var myHTML=e.feature.getProperty（'name'）；
var infowindow=new google.maps.infowindow（）；
setContent（“+myHTML+”）；
设置位置（例如feature.getGeometry（）.get（））；
infowindow.setOptions({
pixelOffset:new google.maps.Size（0，-30）
});
信息窗口。打开（地图、标记）；
google.maps.event.addListener（映射，“单击”，函数（）{
infowindow.close（）；
});
});
markerClusterer.addMarker（标记器）；
var bounds=new google.maps.LatLngBounds（）；
extend（例如feature.getGeometry（）.get（））；
映射边界（bounds）；
map.setCenter（例如feature.getGeometry（）.get（））；
}
});
layer.setMap（空）；
}
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（52.515696,13.392624），
缩放：11，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
var barLayer=new google.maps.Data（）；
var cafeLayer=new google.maps.Data（）；
loadGeoJson（'json/eat\u-drink/bar.geojson'）；
loadGeoJson（'json/eat\u-drink/cafe.geojson'）；
var markerClusterer=新的markerClusterer（map）；
markerClusterer.setMap（map）；
document.getElementById（'bar'）。onclick=function（）{//启用和禁用streetViewControl
if（document.getElementById（'bar'）。checked==true）{
显示标记（条形码、地图、标记聚类器）；
}否则{
返回null；
}
};
}

我在代码中的任何地方都看不到

displaymarks（）

的定义。

Uncaught SyntaxError:Unexpected token}

@enigma对不起，我的错，我复制了错误的代码。现在更正了。这也是令牌意外的原因；-）。谢谢你的努力。不幸的是，它仍然不起作用，选中复选框时不会显示任何标记。有趣的是，没有抛出错误，所以我真的不知道为什么它不工作。我唯一能想到的就是markerClusterer.setMap（map）函数。可能在添加其他标记时不会更新。如果输入console.log“markerClusterer”，我可以看到所有标记都已正确添加，但未设置