Poznaj Google Maps API

Podświetlanie ikonek po najechaniu myszą

« powrót do listy kategorii

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":

	marker1	marker2
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