Google Maps API：具有MarkerClusterer +切换功能的多个GeoJson图层

Question

我的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; 
        }
        };
}

不幸的是，这行不通，我也不完全是为什么。 如果我删除代码周围的displayMarkers（）函数，并将“ layer”替换为所需的GeoJson图层，例如“ barLayer”，则效果很好。 由于我最终要获得大量的GeoJason图层，因此我希望使用像这样的“紧凑”解决方案，以便多次复制代码。 你们有任何想法如何正确地做到这一点吗？

Answer 1

恐怕我要做的不只是重构您的代码。 您可以尝试一下，如果它不起作用，请确切说明什么不起作用？

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