Google Maps API - kursy, przykłady, tutoriale i porady

kontakt | mapa strony

Kategorie markerów i polilinii (uaktualnione)

« powrót do listy kategorii

Czy na Twojej mapie znajduje się zbyt dużo markerów, lub są one zbyt blisko siebie, czyniąc mapę nieczytelną? A może chcesz udostępnić inernaucie eleganckie rozwiązanie kategoryzacji markerów? Nieważne, którą z powyższych motywacji się kierujesz, gdyż rozwiązanie jest jedno. W tej części kursu napiszemy aplikację, która wyświetla skategoryzowane markery, i umożliwia na pokazywanie/ukrywanie poszczególnych grup.

Idea

Przy tworzeniu każdego markera, nadamy mu właściwość kategoria. Jej wartością będzie jakiś identyfikator kategorii. Odwołanie do tak utworzonego markera dodajemy do globalnej tablicy markery.

Następnie przy wywołaniu funkcji pokazującej / ukrywającej wybrane kategorie, należy dla każdego markera z tablicy markery sprawdzić wartość właściwości kategoria. Jeśli jest ona równa kategorii, którą ukrywamy/pokazujemy, należy odpowiednio ukryć/pokazać marker za pomocą funkcji show() i hide().

Schemat kodowania

Dodawanie markera (nic nadzwyczajnego poza ustawieniem kategorii w linii 10)

function dodajMarker(lat,lon,tytul,opis,kategoria,ikona_url)
{
	var punkt = new GLatLng(lat,lon);
	var ikona = new GIcon(domyslna_ikona);
	ikona.image = ikona_url;
	
	var marker = new GMarker(punkt,{icon: ikona, title: tytul});
	
	// przypisujemy markerowi ID kategorii
	marker.kategoria = kategoria;
	markery.push(marker);
	mapa.addOverlay(marker);
	GEvent.addListener(marker,'click',function()
	{
		marker.openInfoWindowHtml(zawartoscOkna(tytul,opis));
	});
}

Pokazywanie / ukrywanie kategorii:

function ukryjPokazKategorie(kategoria,pokaz)
{
	// jeśli pokaz = false, to znaczy że mamy ukryć, w przeciwnym wypadku pokazać
	for(var i=0; i<markery.length; i++)
	{
		if(markery[i].kategoria==kategoria)
		{
			if(pokaz==true)
				markery[i].show();
			else
				markery[i].hide();
		}
	}
}

function przerysuj(checkbox,kategoria)
{		
	if(document.getElementById(checkbox).checked)
		ukryjPokazKategorie(kategoria,true);
	else
		ukryjPokazKategorie(kategoria,false);
}

Funkcja przerysuj() przyjmuje dwa argumenty - id checkboxa oraz string z identyfikatorem kategorii. Jej działanie polega na sprawdzeniu, czy checkbox jest w(y)łączony i wywołaniu funkcji właściwej z odpowiednim parametrem.

Oczywiście, dwa powyższe fragmenty kodu to nie wszystko - należy jeszcze stworzyć pole z checkboxami i nadać im odpowiednie zdarzenia onclick. Ze względu na dość prosty poziom zadania nie będę omawiał tych rzeczy szczegółowo - kod wraz z komentarzami dostępny jest w przykładzie 1: przykład 1pokaż kod przykładu

Dodanie paska bocznego

Dodamy pasek boczny, który będzie wyświetlał widoczne na mapie markery. Markery ukryte nie będą pokazywane.

Sidebar będzie w rzeczywistości komórką tabeli, do której wstawiana będzie lista markerów z linkami do otwarcia okien informacyjnych.

W momencie kliknięcia na wybór kategorii oraz załadowania się strony wykonamy funkcję odswiezSidebar(), która uaktualni listę markerów.

function odswiezSidebar()
{
	var html='<ul style="height: 364px; overflow: auto;">'
	var licznik=0;
	for(i=0; i<markery.length; i++)
	{
		if(!markery[i].isHidden())
		{
			html+='<li><a href="#" onclick="markery['+i+'].pokazInfo(); return false;">'+markery[i].tytul+'</a><br/>'+markery[i].opis+'</li>';
			licznik++;
		}
	}
	html+='</ul>';
	if(licznik!=i)
		html='<h2>Obiekty</h2>Wyświetlono <strong>'+licznik+'</strong> z <strong>'+i+'</strong> obiektów'+html;
	else
		html='<h2>Obiekty</h2>'+html;
	document.getElementById('sidebar').innerHTML=html;
}

Jeśli nie wyświetlono wszystkich markerów (i!=licznik) to wyświetla się stosowny napis. Do sprawdzenia, czy marker jest ukryty użyto funkcji isHidden(), która - zgodnie z nazwą - zwraca true jeśli marker jest ukryty i false jeśli nie jest.

Z powodu konieczności wprowadzenia oznaczeń markerów, wprowadziłem drobne zmiany w porównaniu z poprzednim przykładem: oprócz właściwości kategoria, markery mają jeszcze właściwości tytul oraz opis (ich zawartość jest zgodna z nazwą). Otwieranie okien informacyjnych zebrałem w prototypowanej funkcji pokazInfo() klasy GMarker.

GMarker.prototype.pokazInfo=function()
{
	this.openInfoWindowHtml(zawartoscOkna(this.tytul,this.opis));
};

Aby całość wyglądała milej dla oka, dodałem odrobinę CSS. Cały efekt wygląda następująco (kod źródłowy zawiera komentarze, wyjaśniające działanie): przykład 2pokaż kod przykładu

Uwaga

Metody hide() i show() nie będą działać poprawnie w odniesieniu do markera, o którego widoczności decyduje manager markerów (GMarkerManager). Jest to działanie zamierzone przez programistów, ale nie do końca oczekiwane od strony użytkownika API. Sposób na obejście tego problemu przedstawiono w poradniku: Podkręcanie menedżera markerów.

Kategorie polilinii i polygonów

Na podobnej zasadzie można zaprogramować pokazywanie/ukrywanie polilinii, należących do wybranych kategorii. Obiekty GPolyline i GPolygon posiadają metody show() i hide(), które można wykorzystać analogicznie jak w przypadku markerów: przykład 3pokaż kod przykładu

Feedback

Dziękujemy za podzielenie się opinią.

Prosimy o podzielenie się swoją opinią o tym artykule.
Oceń ten artykuł w skali 1-7, gdzie 1 to zupełnie się nie zgadzam, a 7 to całkowicie się zgadzam.

	1	2	3	4	5	6	7
Artykuł jest przydatny
Artykuł jest zrozumiały
Artykuł rozwiązał mój problem

Dodatkowe komentarze

Wpisz w poniższe pole 4 znaki, widoczne na obrazku:

Jeśli chcesz otrzymać odpowiedź, nie zapomnij podać swojego adresu e-mail w powyższym polu.

---

Nazw zastrzeżonych użyto w celu identyfikacji produktu oraz w celach informacyjnych. Autor strony nie jest związany z firmą Google. Zawartość strony, w tym teksty i obrazki są chronione prawem autorskim, i należą do autora strony, o ile nie stwierdzono inaczej. Autor nie odpowiada za straty, jakie może nieść szczególnie niewłaściwe użycie API. Strona używa poprawnego języka XHTML STRICT i CSS. Autor dołożył wszelkich starań w celu zapewnienia poprawności działania skryptów, lecz nie może zapewnić, że są one wolne od błędów. Strona jest monitorowana przez oprogramowanie do generowania statystyk Piwik. Copyright © 2007-2009 Poznaj Google Maps API