[Google Maps API v3] Opisy markerów w MarkerClusterer, Problem z dodaniem chmurek do markerów grupowanych MarkerClusterer Opcje

[czaj]

Witam

Mam problem jak w temacie.
Tworzę na swojej stronie mapę z Google Maps API v3. Do dodawania markerów używam funkcji:

[XML] pobierz, plaintext 
function dodajMarker(wspolrzedne,idPunktu) {
var marker = new google.maps.Marker({
         position: wspolrzedne,
         map: mapa,
}); // dodanie markera
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
         var markerContent = '<div class="infoWindow">Bla Bla</div>';
         infowindow.setContent(markerContent);
         infowindow.setZIndex(1);
         infowindow.open(mapa,marker);
}); //dodanie do markera chmurki
}
[XML] pobierz, plaintext 

Tutaj wszystko działa pięknie, ale jak chcę użyć opcji MarkerClusterer ( http://google-maps-utility-library-v3.goog...le_example.html ) to już nie jest tak kolorowo.

Tworzę kod:

[XML] pobierz, plaintext 
var wspolrzedneArray = [];
var idPunktuArray = [];
var ArrayMarkerClusterer = [];
 
function dodajMarkerTest(wspolrzedneArray,idPunktuArray) {
  for (x = 0; x < wspolrzedneArray.length; x++){
        var latLng = wspolrzedneArray[x]
        var marker = new google.maps.Marker({
          position: latLng,
          map: mapa,
        });
        ArrayMarkerClusterer.push(marker);
  }
  var mcOptions = {gridSize: 50, maxZoom: 10};
  var markerCluster = new MarkerClusterer(mapa, ArrayMarkerClusterer, mcOptions);
}
[XML] pobierz, plaintext 

No i tutaj już "za Chiny" nie wiem jak dodać

[XML] pobierz, plaintext 
google.maps.event.addListener(marker, 'click', function());
[XML] pobierz, plaintext 

żeby chmurki wyświetlały się prawidłowo. Pomoże ktoś(IMG:style_emoticons/default/questionmark.gif)

Ten post edytował czaj 22.11.2012, 12:35:53

[lukasz1985]

Poniżej kod źródłowy z wyjaśnieniami w komentarzach, dlaczego to, co zrobiłeś nie działało tak, jak tego oczekiwałeś:

[JAVASCRIPT] pobierz, plaintext 
 
            function initialize() {
                var  infowindow = new google.maps.InfoWindow();
 
                var center = new google.maps.LatLng(37.4419, -122.1419);
 
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 3,
                    center: center,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
 
                var markers = [];
                for (var i = 0; i < 100; i++) {
                    var dataPhoto = data.photos[i];
                    var latLng = new google.maps.LatLng(dataPhoto.latitude,
                    dataPhoto.longitude);
                    var marker = new google.maps.Marker({
                        position: latLng
                    });
 
                    // Warości nie można przechowywać w zmiennej lokalnej w funkcji wywołującej, musi
                    // ona być przechowana w obiekcie, którego zdarzenie klick dotyczy lub w innej formie
 
                    // Stworzony został nowy obiekt jako właściwość markera, nazwany "customProperties" (tłum: zmienne uzytkownika)
                    marker.customProperties = {} 
                    // W tym obiekcie przechowywana jest zmienna i - w tym przypadku jest to numer iteracji
                    marker.customProperties.i = i;
 
                    markers.push(marker);
 
 
                    google.maps.event.addListener(marker,'click', function () {
                        // Słowo kluczowe this odnosi się do klikniętego markera w funkcji wywoływanej, 
                        // natomiast zmienna "marker" odnosi się do iteracji, 
                        // która w momencie kliknięcia markera zawsze już jest ostatnia.
                        // Stąd klikając w którykolwiek marker pojawiał się taki problem,
                        // że wyświetlany był balon tylko dla ostatniego markera.
                        alert(this.customProperties.i)
                        var markerContent = '<div class="infoWindow" id="idPunktu-'+this.customProperties.i+'"></div>';
                        infowindow.setContent(markerContent);
                        infowindow.setZIndex(1); 
                        infowindow.open(map,this); 
                    })
                }
                var markerCluster = new MarkerClusterer(map, markers, {'zoomOnClick': false});
                google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
                    cluster.getCenter(); // LatLng - środek klastra
                    cluster.getMarkers(); // Tablica markerów, które zostały objęte przez klaster
                    cluster.getSize(); // Rozmiar - chyba liczba markerów
                    console.log(cluster)
                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);
[JAVASCRIPT] pobierz, plaintext