Poznaj Google Maps API

Własna obsługa zIndex

« powrót do listy kategorii

Domyślnie, mapa wyświetla obiekty w kolejności odwrotnej do szerokości geograficznej, tzn. markery, znajdujące się niżej będą wyświetlane na wierzchu tych, które znajdują się powyżej. Kolejność ta może być zmieniona, jedyne czego potrzebujemy to napisanie funkcji, zwracającej parametr z-Index (mówi on przeglądarce o tym, który z markerów ma być wyżej - markery o wyższym parametrze z-Index będą wyświetlone wyżej).

Przykładowa funkcja

Funkcja do obliczania parametru zIndex musi przyjąć co najmniej jeden argument - marker, którego parametr zIndex ma być zwrócony. Zwracana wartość powinna być liczbą całkowitą. Poniższa funkcja zwróci losowy parametr zIndex:

function losowaKolejnosc(marker)
{
	return Math.floor(Math.random()*10000);
}

Aby teraz podpiąć tę funkcję do markera, należy jako opcjonalny, drugi argument podać jej nazwę w postaci tablicy, przypisując ją do klucza: zIndexProcess. W praktyce:

var punkt = new GLatLng(lat,lon);
var marker = new GMarker(punkt,{zIndexProcess: losowaKolejnosc});
mapa.addOverlay(marker);

Inne przykłady funkcji zwracającej zIndex

Kolejność tworzenia

function kolejnoscTworzenia(marker)
{
	return 0;
}

Ta funkcja musi zwracać stałą liczbę (np. 0)

Odwrotna kolejność

function odwroconaKolejnosc(marker)
{
	return -GOverlay.getZIndex(marker.getPoint().lat());
}

Funkcja GOverlay.getZIndex() przyjmuje jeden argument w postaci szerokości geograficznej, i zwraca odpowiadającej jej parametr zIndex. My dodatkowo mnożymy ją przez -1, aby uzyskać kolejność odwrotną.

Stopień ważności

Jeśli pewne markery mają być wyróżnione, a o tym które to markery chcemy decydować sami, musimy wpierw ustawić dowolnie nazwaną własność na stopień ważności markera. Umówmy się, że im wyższy stopień ważności tym marker ma być widoczny bardziej na górze:

var marker=new GMarker(new GLatLng(lat,lon),{icon: ikony[0], zIndexProcess: stopienWaznosci});
marker.istotnosc = 3;
mapa.addOverlay(marker);

Funkcja stopienWaznosci():

function stopienWaznosci(marker)
{
	return marker.istotnosc*1000000;
}

Duży mnożnik powoduje, że markery z niższych szerokości geograficznych nie będą miały wyższego zIndex nawet na dużych oddaleniach.

Działanie wszystkich powyższych funkcji możesz sprawdzić w przykładzie 1: przykład 1pokaż kod przykładu