Question

现在我在地图上有8张照片作为标记，当我点击这个聚类器时，地图会变暗，并且正在显示该聚类器中的所有照片。

如果我关闭此昏暗并返回地图并放大，那么它将是2个聚类，其中包含4个标记和2个标记，并且单击聚类器有2张照片，它将使地图变暗并显示8张照片。这是错的！

当我点击具有8张照片的群集时，它将显示该群集器中的8张照片。如果我点击包含4张照片的群集，它将显示该群集中的4张照片。我怎么能做到这一点？

var markerCluster = new MarkerClusterer(gm_map, [], options_markerclusterer);

google.maps.event.addListener(markerCluster, 'clusterclick', function() {
    $('#toggle-photolist').fadeIn();
    $('#close-overlay').fadeIn();
    $('#view-multiblephotos').show();
    $('#view-singlephoto').hide();


    var array = [];
    var num = 0;
    for(i = 0; i < locations.length; i++) {
        num++;

        array.push(locations[i][0]);
    }

    $('#count-photos').text(num);
    $('#list-photos').html(array.join(''));
});

jsFiddle demo

提前致谢。

Answer 1

感谢我的兄弟，我得到了这个工作！这是工作代码（jsFiddle上的代码也已更新）。

function initialize() {
    var marker, i;
    var clusterMarkers = [
        new google.maps.Marker({
            position: new google.maps.LatLng(59.381059,13.504026),
            map: gm_map,
            title:"P1220214 1.JPG"             
        }),

        new google.maps.Marker({
            position: new google.maps.LatLng(59.338683,13.492057),
            map: gm_map,
            title:"P1220214 2.JPG"             
        }),

        new google.maps.Marker({
            position: new google.maps.LatLng(59.340715,13.49631),
            map: gm_map,
            title:"P1220214 3.JPG"             
        }),

        new google.maps.Marker({
            position: new google.maps.LatLng(59.327232,13.487384),
            map: gm_map,
            title:"P1220214 4.JPG"             
        }),

        new google.maps.Marker({
            position: new google.maps.LatLng(59.379034,13.516566),
            map: gm_map,
            title:"P1220214 5.JPG"             
        }),

        new google.maps.Marker({
            position: new google.maps.LatLng(59.328631,13.485688),
            map: gm_map,
            title:"P1220214 6.JPG"             
        }),

        new google.maps.Marker({
            position: new google.maps.LatLng(59.328657,13.485591),
            map: gm_map,
            title:"P1220214 7.JPG"             
        }),

        new google.maps.Marker({
            position: new google.maps.LatLng(59.328501,13.485782),
            map: gm_map,
            title:"P1220214 8.JPG"             
        })
        ]

    var options_googlemaps = {
        minZoom: 4,
        maxZoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false
    }

    gm_map = new google.maps.Map(document.getElementById('google-maps'), options_googlemaps);


    var options_markerclusterer = {
        gridSize: 20,
        maxZoom: 18,
        zoomOnClick: false
    };



    var markerCluster = new MarkerClusterer(gm_map, clusterMarkers, options_markerclusterer);

    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
        $('#toggle-photolist').fadeIn();
        $('#close-overlay').fadeIn();
        $('#view-multiblephotos').show();
        $('#view-singlephoto').hide();

        var markers = cluster.getMarkers();

        var array = [];
        var num = 0;

        for(i = 0; i < markers.length; i++) {

            num++;
            array.push(markers[i].getTitle() + '<br>');
        }

        $('#count-photos').text(num);
        $('#list-photos').show().html(array.join(''));

    });



    for(i = 0; i < clusterMarkers.length; i++) {
       var marker = clusterMarkers[i];

        google.maps.event.addListener(marker, 'click', (function(marker) {
            return function() {
                $('#toggle-photolist').fadeIn();
                $('#close-overlay').fadeIn();
                $('#view-multiblephotos').hide();
                $('#list-photos').hide();
                $('#view-singlephoto').show().html(marker.getTitle());
            }
        })(marker));

    }
}

确定特定聚类器中的照片

1 个答案: