www.gmapsapi.com

Kompleksowy kurs podstaw API, po którym mapowianie nie będzie miało przed Tobą żadnych tajemnic!

Setki przykładów, kursów i poradników z kodem gotowym do skopiowania i korzystania.

Największa strona o Google Maps API w Polsce, największe źródło informacji w języku polskim.

Podkręcanie menedżera markerów

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

W poradniku Kategorie markerów i polilinii pokazany został sposób na pokazywanie i ukrywanie całych grup markerów - w pokazanych tam przykładach pod mapą znajdowały się pola typu checkbox, zmiana ich wartości powodowała zmianę widoczności odpowiadających grup na ekranie.

Problem

Wszystko działało dobrze, ale miało istotną wadę - wydajność pojedynczego dodawania markerów nie jest najwyższa, szczególnie, jeśli na mapie ma się ich znaleźć kilkadziesiąt lub więcej. Wówczas naturalną odpowiedzią byłoby zastosowanie menedżera markerów (Optymalizacja wyświetlania dużej ilości znaczników). Co się jednak okazuje? Menedżer markerów nie pracuje poprawnie, jeżeli we własnym zakresie próbujemy ukrywać lub pokazywać markery. Przy każdej zmianie pola widzenia, wymagającej odświeżenia stanu widoczności markerów, wszelkie zmiany nadpisują ustawienia widoczności, wybrane przez użytkownika. Efekt jest taki, że jeśli jakaś grupa markerów zostanie wyłączona, to po np. zmianie poziomu zoom wszystkie zostaną pokazane, mimo, że powinny pozostać ukryte. Czy jest na to rada? Tak, ale wymaga wprowadzenia małych poprawek do samego managera...

Przykład niepoprawnego działania menedżera markerów jest tutaj: przykład 1pokaż kod przykładu

Open source

Google nie rozwija już klasy GMarkerManager, której to kod zresztą jest zaciemniony. Skorzystamy więc z oficjalnie wspieranego (i posiadającego otwarty kod) menedżera markerów, dostępnego na stronie: http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/1.1/docs/examples.html. Do pobrania są wersja spakowana i wersje niespakowana - ponieważ chcemy wprowadzić poprawki, to pobieramy wersję niespakowaną.

Poniższy fragment opisuje, jak i dlaczego dokonać poprawek. Jeśli chcesz pobrać gotowy poprawiony kod, czytaj następny akapit.

W kodzie znajduje się następujący fragment:

me.addOverlay_ = function (marker) {
if (me.show_) {
map.addOverlay(marker);
me.shownMarkers_++;
}

Jak widać, działanie menedżera markerów polega na dodawaniu markerów, kiedy mają być widoczne i usuwaniu, kiedy mają być niewidoczne. To właśnie z tego powodu tracona jest informacja o tym, czy marker jest ukryty czy też nie. Załóżmy, że we własności ukryty każdego markera będzie przechowywana informacja o tym, czy marker jest teraz ukryty (można byc korzystać z funkcji isHidden(), ale stosowanie jej pociąga za sobą pewne komplikacje, dla których wygodniej jest stosować jednak opisywaną tu metodę). Jeśli będzie ona wynosić true, to menedżer po wstawieniu markera będzie go ukrywał. A robi się to tak (patrz linijka 5):

me.addOverlay_ = function (marker) {
if (me.show_) {
map.addOverlay(marker);
me.shownMarkers_++;
if (marker.ukryty){marker.hide()} 
}
};

Teraz trzeba zapisać zmiany i dołączyć ten skrypt do strony z mapą. Plik z wprowadzonymi zmianami można też pobrać z jednego z poniższych adresów:

Zmiany w mapie

Ponieważ we właściwości ukryty markera ma być przechowywana informacja dla menedżera, warto napisać prototypy metod, które będą nadawały odpowiednią wartość tej własności:

GMarker.prototype.pokaz = function()
{
	this.show();
	this.ukryty = false;
}

GMarker.prototype.ukryj = function()
{
	this.hide();
	this.ukryty = true;
}

Teraz zamiast wywoływać metodę hide() lub show(), należy skorzystać analogicznie z funkcji ukryj() i pokaz(). Zasadniczo efekt będzie ten sam, ale na pewno nie zgubi się nigdzie zmiana krytycznej właściwości ukryty. Trzeba więc odświeżyć fragment pokazujący i ukrywający markery na:

// ta funkcja pokazuje lub ukrywa markery danej kategorii, zgodnie z przekazanymi argumentami
function ukryjPokazKategorie(kategoria,pokaz)
{
	// kategoria oznacza id kategorii której widzialność trzeba zmienić
	// jeśli pokaz = false, to znaczy że mamy ukryć, w przeciwnym wypadku pokazać
	
	// dla każdego z markerów
	for(var i=0; i<markery.length; i++)
	{
		// jeśli poszukiwana kategoria jest kategorią markera
		if(markery[i].kategoria==kategoria)
		{
			// to go ukrywamy lub pokazujemy, w zależności od argumetu pokaz
			if(pokaz==true)
				markery[i].pokaz();
			else
				markery[i].ukryj();
		}
	}
}

Teraz po wprowadzeniu modyfikacji mapa powinna działać zgodnie z oczekiwaniami! Przykłady 2 i 3 działają tak samo - różnica polega na tym, że pierwszy korzysta ze skryptu w wersji niespakowanej, a drugi w spakowanej.

przykład 2pokaż kod przykładu

przykład 3pokaż kod przykładu

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

Oto, co najczęściej czytają internauci, którzy przeczytali ten artykuł:

Optymalizacja wyświetlania dużej ilości znaczników

API v2

Kurs podstaw cz. XII: Optymalizacja wyświetlania markerów za pomocą menedżera


jQuery i Google Maps

API v2

Przyjemne dla oka animacje za pomocą bilbioteki jQuery uatrakcyjnią każdą mapę!


Prezentacja światła słonecznego na mapie

API v2

Za pomocą zewnętrznego rozszerzenia, pokazujemy aktualne oświetlenie Ziemi


Wyświetlanie wysokości nad poziomem morza

API v2

Poradnik pokazuje, jak w Google Maps wyświetlić przybliżoną wysokość nad poziomem morza dowolnego punktu