특정 클러스터러에있는 사진 확인

Question

지금은지도에 8 개의 사진이 표시되어 있으며이 클러스터를 클릭하면지도가 희미 해지고이 클러스터에있는 모든 사진이 표시됩니다.

이 희미하고지도로 돌아가서 4 개의 마커와 2 개의 마커가있는 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)); 

    } 
}