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 = 'https://gmapsapi.com/examples/026/'+obraz1;
		ikona.iconSize = new GSize(24,38);
		ikona.shadowSize = new GSize(37,34);
		ikona.shadow = 'https://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 = 'https://gmapsapi.com/examples/026/'+obraz1;
	marker.obraz2 = 'https://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: