Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [Google Maps API v3] Opisy markerów w MarkerClusterer
Forum PHP.pl > Forum > Po stronie przeglądarki
czaj
Witam

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

  1. function dodajMarker(wspolrzedne,idPunktu) {
  2. var marker = new google.maps.Marker({
  3. position: wspolrzedne,
  4. map: mapa,
  5. }); // dodanie markera
  6. var infowindow = new google.maps.InfoWindow();
  7. google.maps.event.addListener(marker, 'click', function() {
  8. var markerContent = '<div class="infoWindow">Bla Bla</div>';
  9. infowindow.setContent(markerContent);
  10. infowindow.setZIndex(1);
  11. infowindow.open(mapa,marker);
  12. }); //dodanie do markera chmurki
  13. }


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:

  1. var wspolrzedneArray = [];
  2. var idPunktuArray = [];
  3. var ArrayMarkerClusterer = [];
  4.  
  5. function dodajMarkerTest(wspolrzedneArray,idPunktuArray) {
  6. for (x = 0; x < wspolrzedneArray.length; x++){
  7. var latLng = wspolrzedneArray[x]
  8. var marker = new google.maps.Marker({
  9. position: latLng,
  10. map: mapa,
  11. });
  12. ArrayMarkerClusterer.push(marker);
  13. }
  14. var mcOptions = {gridSize: 50, maxZoom: 10};
  15. var markerCluster = new MarkerClusterer(mapa, ArrayMarkerClusterer, mcOptions);
  16. }


No i tutaj już "za Chiny" nie wiem jak dodać
  1. google.maps.event.addListener(marker, 'click', function());

żeby chmurki wyświetlały się prawidłowo. Pomoże ktośquestionmark.gif
lukasz1985
Domyślam się, że chcesz przypisać zdarzenie do klastrów.
Poniżej kod, który możesz wpisać do swojego skryptu.
Informacje o tym znalazłem tu:
http://stackoverflow.com/questions/5710568...r-on-click-zoom


[JAVASCRIPT] pobierz, plaintext
  1.  
  2. var mcOptions = {gridSize: 50, maxZoom: 10, 'zoomOnClick': false};
  3. var markerCluster = new MarkerClusterer(map, markers, mcOptions);
  4. google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
  5. alert('click') // test czy działa
  6.  
  7. cluster.getCenter(); // LatLng - środek klastra
  8. cluster.getMarkers(); // Tablica markerów, które zostały objęte przez klaster
  9. cluster.getSize(); // Rozmiar - chyba liczba markerów
  10. });
[JAVASCRIPT] pobierz, plaintext
czaj
Cytat
Domyślam się, że chcesz przypisać zdarzenie do klastrów.
Poniżej kod, który możesz wpisać do swojego skryptu.
Informacje o tym znalazłem tu:
http://stackoverflow.com/questions/5710568...r-on-click-zoom


No nie chodzi mi o dodawanie zdażeń do klastra.
Chodzi o to żeby przypisać indywidualną chmurkę dla każdego markera który jest zgrupowany i pojawia się dopiero przy odpowiednim zbiżeniu mapy.
lukasz1985
Działa normalnie:
[JAVASCRIPT] pobierz, plaintext
  1.  
  2. function initialize() {
  3. var center = new google.maps.LatLng(37.4419, -122.1419);
  4.  
  5. var map = new google.maps.Map(document.getElementById('map'), {
  6. zoom: 3,
  7. center: center,
  8. mapTypeId: google.maps.MapTypeId.ROADMAP
  9. });
  10.  
  11. var markers = [];
  12. for (var i = 0; i < 100; i++) {
  13. var dataPhoto = data.photos[i];
  14. var latLng = new google.maps.LatLng(dataPhoto.latitude,
  15. dataPhoto.longitude);
  16. var marker = new google.maps.Marker({
  17. position: latLng
  18. });
  19. markers.push(marker);
  20. google.maps.event.addListener(marker,'click', function () {
  21. alert('click marker')
  22. })
  23. }
  24. var markerCluster = new MarkerClusterer(map, markers, {'zoomOnClick': false});
  25. google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
  26. cluster.getCenter(); // LatLng - środek klastra
  27. cluster.getMarkers(); // Tablica markerów, które zostały objęte przez klaster
  28. cluster.getSize(); // Rozmiar - chyba liczba markerów
  29. console.log(cluster)
  30. });
  31. }
  32. google.maps.event.addDomListener(window, 'load', initialize);
[JAVASCRIPT] pobierz, plaintext


Możesz sprawdzić czy przypisujesz zdarzenia wewnątrz pętli "for" i czy funkcja wywołująca zdarzenie znajduje się w zasięgu pętli. Jeśli będziesz potrzebował mogę zamieścić kod na jsFiddle.
czaj
Też nic.
Napisałem taką funkcję:

[JAVASCRIPT] pobierz, plaintext
  1.  
  2. var markerWspolrzedne = [];
  3. var markerID = [];
  4. var ArrayMarkerClusterer = [];
  5.  
  6. function dodajMarkerTest(markerWspolrzedne,markerID) {
  7. for (x = 0; x < markerWspolrzedne.length; x++){
  8. var latLng = markerWspolrzedne[x]
  9. var marker = new google.maps.Marker({
  10. position: latLng,
  11. map: mapa,
  12. icon: 'img/punkty/point_2.png',
  13. title: 'Click to see the charging point',
  14. });
  15. ArrayMarkerClusterer.push(marker);
  16.  
  17. var infowindow = new google.maps.InfoWindow();
  18. google.maps.event.addListener(marker,'click', function () {
  19. alert('click marker');
  20. var markerContent = '<div class="infoWindow" id="idPunktu-'+x+'"></div>';
  21. infowindow.setContent(markerContent);
  22. infowindow.setZIndex(1);
  23. infowindow.open(mapa,marker);
  24. //getValuePoint(idPunktu); // --- odwolanie do funkcji ladujacej tresc okienka
  25. })
  26. }
  27.  
  28. var mcOptions = {gridSize: 50, maxZoom: 10};
  29. var markerCluster = new MarkerClusterer(mapa, ArrayMarkerClusterer, mcOptions);
  30.  
  31. google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
  32. alert('click') // test czy dziala
  33. cluster.getCenter(wspolrzedne); // LatLng - srodek klastra
  34. cluster.getMarkers(ArrayMarkerClusterer); // Tablica markerów, które zostaly objete przez klaster
  35. cluster.getSize(x); // Rozmiar - chyba liczba markerów
  36. console.log(cluster);
  37. });
  38. };
  39.  
[JAVASCRIPT] pobierz, plaintext


Efekt jest taki że chmurka się włącza ale nie jest przypisana do markera którego się klika, tylko do pierwszego/ostatniego załadowanego markera, niezależnie który marker się kliknie
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
  1.  
  2. function initialize() {
  3. var infowindow = new google.maps.InfoWindow();
  4.  
  5. var center = new google.maps.LatLng(37.4419, -122.1419);
  6.  
  7. var map = new google.maps.Map(document.getElementById('map'), {
  8. zoom: 3,
  9. center: center,
  10. mapTypeId: google.maps.MapTypeId.ROADMAP
  11. });
  12.  
  13. var markers = [];
  14. for (var i = 0; i < 100; i++) {
  15. var dataPhoto = data.photos[i];
  16. var latLng = new google.maps.LatLng(dataPhoto.latitude,
  17. dataPhoto.longitude);
  18. var marker = new google.maps.Marker({
  19. position: latLng
  20. });
  21.  
  22. // Warości nie można przechowywać w zmiennej lokalnej w funkcji wywołującej, musi
  23. // ona być przechowana w obiekcie, którego zdarzenie klick dotyczy lub w innej formie
  24.  
  25. // Stworzony został nowy obiekt jako właściwość markera, nazwany "customProperties" (tłum: zmienne uzytkownika)
  26. marker.customProperties = {}
  27. // W tym obiekcie przechowywana jest zmienna i - w tym przypadku jest to numer iteracji
  28. marker.customProperties.i = i;
  29.  
  30. markers.push(marker);
  31.  
  32.  
  33. google.maps.event.addListener(marker,'click', function () {
  34. // Słowo kluczowe this odnosi się do klikniętego markera w funkcji wywoływanej,
  35. // natomiast zmienna "marker" odnosi się do iteracji,
  36. // która w momencie kliknięcia markera zawsze już jest ostatnia.
  37. // Stąd klikając w którykolwiek marker pojawiał się taki problem,
  38. // że wyświetlany był balon tylko dla ostatniego markera.
  39. alert(this.customProperties.i)
  40. var markerContent = '<div class="infoWindow" id="idPunktu-'+this.customProperties.i+'"></div>';
  41. infowindow.setContent(markerContent);
  42. infowindow.setZIndex(1);
  43. infowindow.open(map,this);
  44. })
  45. }
  46. var markerCluster = new MarkerClusterer(map, markers, {'zoomOnClick': false});
  47. google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
  48. cluster.getCenter(); // LatLng - środek klastra
  49. cluster.getMarkers(); // Tablica markerów, które zostały objęte przez klaster
  50. cluster.getSize(); // Rozmiar - chyba liczba markerów
  51. console.log(cluster)
  52. });
  53. }
  54. google.maps.event.addDomListener(window, 'load', initialize);
[JAVASCRIPT] pobierz, plaintext
czaj
Wielkie dzięki - działa.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.