Skocz do zawartości

[js] Problem z dodaniem chmurek do markerów grupowanych MarkerClusterer


czaj

Rekomendowane odpowiedzi

Witam

Mam problem jak w temacie.

Tworzę mapę API3. Do dodawania markerów używam funkcji:

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
}

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

Tworzę kod:

var wspolrzedneArray = [];
var idPunktuArray = [];
var ArrayMarkerClusterer = [];

function dodajMarkerTest(wspolrzedneArray,idPunktuArray) {
 var infowindow = new google.maps.InfoWindow();
 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);
}

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

google.maps.event.addListener(marker, 'click', function());

żeby chmurki wyświetlały się prawidłowo. Pomoże ktoś??

Odnośnik do komentarza
Udostępnij na innych stronach

Jak by ktoś mial podobny problem to udało mi się go rozwiązać.

Poniżej rozwiązanie które u mnie działa:

var markerWspolrzedne = [];
  var markerID = [];

  function dodajMarkerTest(markerWspolrzedne,markerID) {

   var infowindow = new google.maps.InfoWindow();
   var markers = [];

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

 var latLng = markerWspolrzedne[i];
 var marker = new google.maps.Marker({
  map: mapa,
  position: latLng,
  icon: 'img/punkty/point_2.png',
  title: 'Click to see the charging point',
 });
 marker.customProperties = {}
 marker.customProperties.i = i;
 markers.push(marker);

 google.maps.event.addListener(marker,'click', function () {
  //alert(markerID[this.customProperties.i])
  var markerContent = '<div class="infoWindow" id="idPunktu-'+markerID[this.customProperties.i]+'"></div>';
  infowindow.setContent(markerContent);
  infowindow.setZIndex(1);
  infowindow.open(mapa,this);
  getValuePoint(markerID[this.customProperties.i]); // --- odwolanie do funkcji ladujacej tresc okienka
 })
   }

   mcOptions = {
 'zoomOnClick': false,
   }

   var markerCluster = new MarkerClusterer(mapa, markers, mcOptions);
   google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
 cluster.getCenter(); // LatLng - srodek klastra
 cluster.getMarkers(); // Tablica markerów, które zostaly objete przez klaster
 cluster.getSize(); // Rozmiar - chyba liczba markerów
 console.log(cluster)
   });

  }

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności