Poznaj Google Maps API

Wyświetlanie polilinii na pewnym zoomie

« powrót do listy kategorii

Menedżer markerów (omówiony w tej części kursu) pozwala na stworzenie markerów, które będą widoczne na określonych poziomach przybliżenia mapy. W tej części kursu napiszemy prostą funkcję do wyświetlania jedynie tych polilinii, które powinny być widoczne na danym poziomie przybliżenia.

Zasada działania

Każdej polilinii przypiszemy dwie właściwości maxzoom i minzoom, które będą informować skrypt o odpowiednio największym i najmniejszym poziomie widoczności dla danej polilinii. Przypiszemy im wartości od 0 do 19, czyli dokładnie takie, jakie może przyjąć wartość zoomu mapy.

Następnie przeprowadzimy nasłuch zdarzenia zoomend, dzięki któremu będzie wiadomo, że zmieniony został poziom przybliżenia. Wówczas dla każdej z polilinii sprawdzimy, czy obecny poziom zoomu mapy zawiera się między jej właściwościami maxzoom i minzoom, i w zależności od rezultatu porównania albo ukryjemy polilinię (metoda hide()) lub ją pokażemy (metoda show()).

Funkcja ukrywająca/pokazująca linie

Poniższy listing zawiera kod, dzięki któremu polilinie są chowane/pokazywane:

GEvent.addListener(mapa,'zoomend',function()
{
	for(var i=0; i<sledzonePolilinie.length; i++)
	{
		if(sledzonePolilinie[i].maxzoom >= mapa.getZoom() && sledzonePolilinie[i].minzoom <= mapa.getZoom())
			sledzonePolilinie[i].show();
		else
			sledzonePolilinie[i].hide();
	}
});
GEvent.trigger(mapa,'zoomend');

Tablica sledzonePolilinie jest globalna, jej elementy reprezentują odwołania do konkretnej pollilinii na mapie. Na koniec symulujemy zmianę zoomu, by wykonać funkcją pokazującą / ukrywającą linie na początku.

Dodanie polilinii

Na potrzeby przykładu przygotowałem następującą z danymi polilinii:

var polilinie = [
{'minzoom': 2, 'maxzoom': 3, 'kolor': '#ff0000', 'punkty':[
new GLatLng(50.12057809796007,3.8671875),
new GLatLng(48.16608541901253,2.548828125),
new GLatLng(48.10743118848038,6.240234375),
new GLatLng(50.12057809796007,3.8671875)
]},
/* i tak dalej kolejne polilinie */
];

Tablica składa się z asocjacyjnych tablic z danymi o poliliniach, co widać po analizie jednego elementu. Aby dodać polilinie z tej tablicy, użyję następującej funkcji:

function rysujPolilinie(polilinia)
{
	var kolor	= polilinia['kolor'];
	var minzoom	= polilinia['minzoom'];
	var maxzoom	= polilinia['maxzoom'];
	var punkty 	= polilinia['punkty'];
	
	var polilinia = new GPolyline(punkty,kolor,4,0.8);
	polilinia.maxzoom = maxzoom;
	polilinia.minzoom = minzoom;
	mapa.addOverlay(polilinia);
	sledzonePolilinie.push(polilinia);
}

Proste i nie wymagające komentarza, poza ostatnią linią, w której dodajemy polilinię do globalnej tablicy z poliliniami.

Oto rezultat działania: przykład 1pokaż kod przykładu