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.

Menu kontekstowe

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

W tej części kursu dowiesz się, jak zrobić menu podręczne, które pojawia się na mapie po kliknięciu prawego przycisku myszy.

Nasłuch na kliknięcie prawym przyciskiem myszy

API umożliwia zarówno przechwycenie kliknięcia lewym przyciskiem myszy, jak i prawym. Różnica polega na innych parametrach, jakie są przekazywane dalej. Kliknięcie lewym przyciskiem myszy przekazuje współrzędne w postaci GLatLng, podczas gdy kliknięcie prawym przyciskiem - współrzędne XY (GPoint).

Aby przechwycić zdarzenie kliknięcia prawym przyciskiem myszy, należy zastosować poniższą konstrukcję:

GEvent.addListener(mapa,"singlerightclick",function(p)
{
	// tutaj kod
}

Zanim napiszemy kod, stwórzmy kod HTML dla menu podręcznego i zadeklarujmy kilka zmiennych globalnych:

var mapa;
var menu;
var klikniety;

var menuHTML = '<div>MENU</div>'
	+ '<a href="#" onclick="przybliz(); return false;">przybliż</a>'
	+ '<a href="#" onclick="oddal(); return false;">oddal</a>'
	+ '<a href="#" onclick="dodaj(); return false;">dodaj marker</a>'
	+ '<a href="#" onclick="usun(); return false;">usuń markery</a>'
	+ '<a href="#" onclick="poczatkowy(); return false;">widok początkowy</a>';

Globalna zmienna klikniety będzie potrzeba do przechowywania ostatnio klikniętego punktu. Przyda się później dla potrzeb realizacji określonych funkcji menu.

Teraz stwórzmy obiekt DOM, zawierający menu w elemencie DIV:

menu = document.createElement("div");
menu.style.display = "none"; 	// niech menu początkowo będzie niewidoczne
menu.className = "menu"; 		// za pomocą arkusza CSS nadamy odpowiedni wygląd
menu.innerHTML = menuHTML;

Tak utworzone menu dołączymy do mapy. Zakładając, że zdefiniowaliśmy wcześniej obiekt mapa klasy GMap2, następujący fragment kodu posłuży za dołączenie obiektu menu do mapy:

mapa.getContainer().appendChild(menu);

Otworzenie menu po kliknięciu

GEvent.addListener(mapa,"singlerightclick",function(p)
{
	klikniety = mapa.fromDivPixelToLatLng(p);
	var menu_x = p.x;
	var menu_y = p.y;
	
	// jeśli kliknięto zbyt blisko brzegu ekranu
	if(p.x > mapa.getSize().width - 132)
		menu_x = mapa.getSize().width - 132;
	
	if(p.y > mapa.getSize().height - 140)
		menu_y = mapa.getSize().height - 140;
	
	var pozycja = new GSize(menu_x,menu_y);
	
	var pokazMenu = new GControlPosition(G_ANCHOR_TOP_LEFT, pozycja);
	pokazMenu.apply(menu);
	menu.style.display = "block";
});

Powyższy kod odpowiada za obługę zdarzenia singlerightclick. Najpierw zapisujemy aktualnie kliknięty punkt po konwersji na współrzędne geograficzne do globalnej zmiennej klikniety. Następnie sprawdzamy, czy kliknięcie nastąpiło w odpowiedniej odległości od prawej i dolnej granicy ekranu - wartości to dobieramy tak, by menu nigdy nie było schowane za brzegiem mapy. W razie potrzeby, odpowiednio poprawiamy wartości współrzędnych (linie 8 i 12) a następnie ustawiamy pozycję elementu menu na wyznaczone koordynaty XY (linia 14), przyjmując za punkt zaczepienia lewy, górny róg (linia 16). Pozostaje tylko pokazać menu (linia 18).

W kodzie musisz również napisać funkcje, które są wywoływane z menu podręcznego, a także zadbać o jego ukrywanie po kliknięciu. Musisz również zadbać o odpowiednie stylowanie CSS, by menu dobrze się wyświetlało. Zobacz przykład 5.1, aby zobaczyć, jak działa menu kontekstowe, oraz jak wygląda pełny kod, potrzebny do jego realizacji: przykład 1pokaż kod przykładu

Pytania czytelników

  • W przeglądarce Opera menu kontekstowe nie działa, nawet pomimo zaznaczonej odpowiedniej opcji w konfiguracji!
    Niestety, w Operze nie da się uzyskać efektu menu kontekstowego. Nie istnieje w tej chwili obejście tego problemu, być może przełomowe będzie wydanie wersji 10 Opery, na które trzeba jeszcze trochę poczekać.

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

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

Dodawanie markerów przez użytkownika

API v2

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


Kategorie markerów i polilinii

API v2

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


jQuery i Google Maps

API v2

Przyjemne dla oka animacje za pomocą bilbioteki jQuery uatrakcyjnią każdą mapę!


Wyszukiwanie markerów as-you-type

API v2

Jak stworzyć wyszukiwanie i filtrowanie markerów as-you-type przy użyciu bazy danych