0

现在我在地图上有 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 演示

提前致谢。

4

1 回答 1

0

感谢我的兄弟，我得到了这个工作！这是工作代码（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));

    }
}
于 2012-11-11T22:44:26.533 回答