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.

Wyświetlanie polilinii na pewnym zoomie

Ten artykuł dotyczy najnowszej wersji API

« powrót do listy poradników

W typom poradniku napiszemy prostą funkcję do wyświetlania jedynie tych polilinii, które powinny być widoczne na danym poziomie przybliżenia. Przykładowe zastosowania: kształty o różnych precyzjach mogą być dynamicznie ukrywane i pokazywane w celu zachowania wysokiej precyzji na bliskim przybliżeniu i szybkiej wydajności w oddaleniu, itp.

Zobacz także:Polilinie

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 zoom_changed, 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 lub pokażamy polilinię (metoda setVisible(true/false))).

Funkcja ukrywająca/pokazująca linie

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

google.maps.event.addListener(mapa, 'zoom_changed', function () {
	for (var i = 0; i < sprawdzanePolilinie.length; i++) {
		sprawdzanePolilinie[i].setVisible(sprawdzanePolilinie[i].maxZoom >= mapa.getZoom() && sprawdzanePolilinie[i].minZoom <= mapa.getZoom());
	}
});

Tablica sprawdzanePolilinie 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 google.maps.LatLng(50.12057809796007, 3.8671875),
		new google.maps.LatLng(48.16608541901253, 2.548828125),
		new google.maps.LatLng(48.10743118848038, 6.240234375),
		new google.maps.LatLng(50.12057809796007, 3.8671875)
	]}, 
/* i tak dalej kolejne polilinie */
];

Tablica składa się z obiektów z danymi o poliliniach, co widać po analizie dowolnego elementu. Aby dodać polilinie z tej tablicy, użyję następującej pętli:

for (i = 0; i < polilinie.length; i++)
{
	var polilinia = new google.maps.Polyline({ path: polilinie[i].punkty, strokeColor: polilinie[i].kolor, strokeWeight: 3, map: mapa});
	polilinia.maxZoom = polilinie[i].maxZoom;
	polilinia.minZoom = polilinie[i].minZoom;
	sprawdzanePolilinie.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

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

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

Dodawanie znaczników na mapę

API v3

Kurs podstaw cz. II: Podstawowe informacje na temat wstawiania markerów (znaczników)


Kategorie markerów i polilinii

API v3

Stwórz markery/polilinie w kilku kategoriach, a następnie ukrywaj i pokazuj wybrane kategorie


Pogoda na mapie

API v3

Jak wyświetlić stan pogody przy użyciu Google Maps API?


Popularne, darmowe ikony dla markerów

API v3

Kurs podstaw cz. IV: Lista darmowych ikon do wykorzystania w Twojej aplikacji mapowej