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.

Skokowy kursor

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

Z tej części kursu dowiesz się, jak zrobić półprzezroczysty kwadracik, poruszający się skokowo za kursorem myszy. Po kliknięciu myszą, mapa zostanie przybliżona tak, by pokazać przybliżony obszar, wskazywany przez kwadracik.

Przygotowanie

Na potrzeby tego kursu przygotowałem obrazek w formacie PNG, z zapisanym kanałem alpha:

obrazek

Obrazek ma wymiary 95x95, składa się z nieprzezroczystej ramki oraz częściowo (30%) przezroczystego wypełnienia.

Trochę kodu na początek

Będziemy potrzebować kilku zmiennych globalnych, które należy zadeklarować:

var wspX = 0;
var wspY = 0;
var marker;

Zmienne wspX i wspY będą przechowywały współrzędne kwadratu, wyrażone w pikselach.

Czas na dodanie markera na mapę:

var ikona = new GIcon();
ikona.iconSize = new GSize(95,95);
ikona.shadowSize = new GSize(0,0);
ikona.shadow = '';
ikona.image = 'http://gmapsapi.com/examples/014/kwadrat.png';
ikona.iconAnchor = new GPoint(47,47);
ikona.infoWindowAnchor = new GPoint(47,47);

marker = new GMarker(new GLatLng(53.429805, 14.537883),{icon: ikona, clickable: false});
mapa.addOverlay(marker);

Pierwsze 7 linijek odpowiada za zdefiniowanie ikony markera. Ma ona wymiary 95 x 95, punkty zaczepienia w środku (47 x 47) oraz adres URL do półprzezroczystego obrazka. Zwróć uwagę, że w linijce 9 wyłączamy możliwość klikania na marker, by kursor miał cały czas stały wygląd, a klikanie na marker (który będzie zawsze pod nim) było niemożliwe.

Esencja

Przechodzimy do głównej rzeczy - napiszemy taki kod, który pozwoli na sprawdzanie przy poruszaniu myszą, czy kwadrat musi zostać przesunięty. Jeśli zajdzie potrzeba - przesuniemy go.

GEvent.addListener(mapa,'mousemove',function(wsp)
{
	var wspXY = mapa.fromLatLngToDivPixel(wsp);	// konwertujemy współrzędne z LatLng na XY
	var pixel_x = wspXY.x;
	var pixel_y = wspXY.y;
	
	// obliczamy współrzędne XY, w które należy przesunąć marker (kwadrat ma szerokość 95px, aby zrobić skok co 1/2 użyłem wartości 47px)
	var nx = 47 + 47 * Math.floor(pixel_x/47);
	var ny = 47 + 47 * Math.floor(pixel_y/47);
	
	// jeśli nowoobliczone współrzędne są różne od globalnych wspX i wspY, to wykonamy przesunięcie markera oraz uaktualniymi wartości wspX i wspY
	if(nx != wspX || ny != wspY)
	{
		wspX = nx;
		wspY = ny;
		var np = mapa.fromDivPixelToLatLng(new GPoint(wspX,wspY));
		marker.setPoint(np);
	}
});

Kod powyżej zawiera komentarze, objaśniające działanie. Na uwagę zasługuje metoda fromLatLngToDivPixel(), która konwertuje współrzędną typu GLatLng na koordynaty wyrażone w pikselach (GPoint). Po przeliczeniach (dzielimy współrzędną przez 47 bez reszty, następnie mnożymy razy 47 i dodajemy 47, by uzyskać skokowy ruch kwadratu) sprawdzamy, czy tak ustalone współrzędne zgadzają się z obecnymi wartościami zmiennych wspX i wspY. Jeśli nie, to uaktualniamy je, a następnie metodą setPoint() markera zmieniamy jego punkt zaczepienia na nowy, wyznaczony przed chwilą (wcześniej z powrotem trzeba skonwertować współrzędne klasy GPoint na GLatLng, służy do tego metoda fromDivPixelToLatLng() obiektu mapy).

Pozostało sprawdzenie, czy użytkownik kliknął lewym przyciskiem myszy. Jeśli tak, to przybliżymy mapę to obszaru, wskazywanego przez kwadrat:

GEvent.addListener(mapa,'click',function(p)
{
	// tworzymy nowy obszar GLatLngBounds, dodajemy do niego narożniki kwadratu, a następnie wyciągamy z niego środek i poziom zoom tak, by dopasować odpowiednie przybliżenie
	var obszar = new GLatLngBounds();
	obszar.extend(mapa.fromDivPixelToLatLng(new GPoint(wspX-47,wspY-47)));
	obszar.extend(mapa.fromDivPixelToLatLng(new GPoint(wspX+47,wspY+47))); 
	mapa.setCenter(obszar.getCenter(),mapa.getBoundsZoomLevel(obszar));   
});

Pełny, skomentowany kod można zobaczyć w źródle poniższego przykładu: przykład 1pokaż kod przykładu

Wersja "płynna"

Aby zmienić typ poruszania się kwadratu ze skokowego na bardziej płynny, wystarczy zmienić sposób obliczania zmiennych nx i ny na następujący:

var nx = pixel_x;
var ny = pixel_y;

Efekt i pełny kod w przykładzie 2 przykład 2pokaż 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 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