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.

Podświetlanie ikonek po najechaniu myszą

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

Za pomocą obsługi zdarzeń i metody setImage() obiektów GMarker można zaprogramować ciekawy efekt hover dla markera. W tym tutorialu napiszemy aplikację, w której po najechaniu na marker kursorem myszy zostanie on elegancko podświetlony.

Przygotowanie

W dowolnym programie graficznym należy wpierw przygotować odpowiednie obrazki. Na potrzeby tego kursu przygotowałem dwa komplety - marker zielony i czerwony - wraz z odpowiadającymi im obrazkami "podświetlonymi":

marker1marker2
normalny
podświetlony

Kod

Kluczową częścią aplikacji będzie zamiana ikonki markera. Wykorzystamy do tego metodę setImage(), której pierwszym argumentem jest adres URL nowej ikonki. Idealnie, gdy ma ona takie same rozmiary jak ikona pierwotna, gdyż wygląda to estetyczniej. Napiszmy następującą funkcję do dodawania markerów:

function dodajMarker(punkt,opcje)
{
	var obraz1 = opcje['obraz1'];
	var obraz2 = opcje['obraz2'];

Dane o ikonach pobieramy z asocjacyjnej tablicy, przekazywanej w drugim argumencie. Na ich podstawie tworzymy ikonę:

	if(obraz1 && obraz2)
	{
		var ikona = new GIcon();
		ikona.image = 'http://gmapsapi.com/examples/026/'+obraz1;
		ikona.iconSize = new GSize(24,38);
		ikona.shadowSize = new GSize(37,34);
		ikona.shadow = 'http://www.google.com/intl/en_ALL/mapfiles/shadow50.png';
		ikona.iconAnchor = new GPoint(12,35);
		ikona.infoWindowAnchor = new GPoint(12,35);
	}
	else
	{
		var ikona = G_DEFAULT_ICON;
	}
	var marker = new GMarker(punkt,{icon: ikona});

W kolejnych liniach zapamiętujemy adresy URL do odpowiednich ikon jako własności markera - zostaną użyte kilka linijek dalej.

	marker.obraz1 = 'http://gmapsapi.com/examples/026/'+obraz1;
	marker.obraz2 = 'http://gmapsapi.com/examples/026/'+obraz2;

I wreszcie najważniejszy moment - obsługa zdarzeń mouseover i mouseout, w których to zmieniamy ikonę na żądany obrazek.

	if(obraz1 && obraz2)
	{
		GEvent.addListener(marker,'mouseover',function()
		{
			marker.setImage(marker.obraz2);
		});
		GEvent.addListener(marker,'mouseout',function()
		{
			marker.setImage(marker.obraz1);
		});
	}
	mapa.addOverlay(marker);
	return marker;
}

Przykładowe wywołanie funkcji rozbitej na powyższe 4 listingi:

dodajMarker(new GLatLng(53.43254894015444,14.540748596191406),{'obraz1': 'marker-zwykly-1.png', 'obraz2': 'marker-zwykly-2.png'});

Sprawdź działanie przykładu: 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 v2

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


Dodawanie markerów przez użytkownika

API v2

Poradnik pokazuje, w jaki sposób stworzyć formularz, pozwalający na dodawanie markerów


Popularne, darmowe ikony dla markerów

API v2

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


Kategorie markerów i polilinii

API v2

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