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.

Tworzenie własnych obiektów GOverlay

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

Dotychczas, aby wstawić obrazek na mapę posługiwaliśmy się obiektem GMarker. Wstawienie tekstu dotąd nie było możliwe. W tej części kursu zapoznasz się z klasą GOverlay(), dzięki której będziemy w stanie wstawić bezpośrednio na mapę dowolny element, np. tekst lub obrazek.

Implementacja

Na mapę można wstawić dowolny element DOM. W tym celu musimy się posłużyć klasą GOverlay(), która zrealizuje dla nas pewne funkcjonalności, związane z odświeżaniem, kopiowaniem i usuwaniem elementu:

function Obiekt() {};
Obiekt.prototype = new GOverlay();

Następnie jesteśmy zobligowani do napisania czterech metod, które API będzie wywoływało w czasie różnych operacji:

  • metoda initialize() zostanie wywołana w momencie wstawienia obiektu na mapę. Tutaj musimy stworzyć obiekt DOM, i dołączyć go do elementu, w którym znajduje się mapa
  • metoda redraw() będzie wywoływana za każdym razem, gdy przesuniemy mapę, lub zmienimy poziom zoom. W tej metodzie musimy zadbać o odświeżanie położenia obiektu, za pomocą właściwości style.top i style.left
  • metoda remove() będzie wywoływana przy usuwaniu obiektu. Musimy tu napisać kod, który usunie odpowiedni obiekt w strukturze DOM
  • metoda copy() będzie wywoływana przy kopiowaniu obiektu. Musimy w niej stworzyć nowy obiekt tej samej klasy z odpowiednim konstruktorem i argumentami.

W praktyce jest to znacznie prostsze. Zobaczmy, jak przykładowo stworzyć etykietkę tekstową, używając klasy GOverlay():

Wstawienie etykietki tekstowej

Najpierw stworzymy obiekt etykietki:

function Etykietka(punkt,tekst,klasa)
{
	this.tekst = tekst;
	this.punkt = punkt;
	this.klasa = klasa;
};

Etykietka.prototype = new GOverlay();

Własnościami będą tekst (czyli tekst, który pojawi się w etykietce), punkt (obiekt klasy GLatLng, określający położenie etykietki) oraz klasa (nazwa klasy CSS, użyta do odpowiedniego stylowania wyglądu).

Teraz zajmiemy się po kolei czterema metodami, omówionymi przed chwilą:

Etykietka.prototype.initialize = function(mapa)
{
	var kontener = document.createElement("div");
	kontener.className = this.klasa;
	kontener.style.position = 'absolute';
	var span = document.createElement("span");
	span.innerHTML = this.tekst;
	kontener.appendChild(span);
	mapa.getPane(G_MAP_MAP_PANE).appendChild(kontener);
	
	this.mapa = mapa;
	this.kontener = kontener;	
};

W linii 3 tworzymy obiekt typu div, nadajemy mu odpowiednią nazwę klasy w linii 4, oraz pozycjonujemy go bezwzględnie (linia 5). W kolejnych trzech linijkach tworzymy liniowy element span, ustawiamy jego zawartość na pożądany tekst, i dodajemy go jako element - dziecko kontenera, który stworzyliśmy przed chwilą. Wreszcie kontener dołączamy do obiektu mapy (map.getPane(G_MAP_MAP_PANE) zwraca odwołanie do niego w strukturze DOM). Ostatnie dwie linijki to zapisanie we właściwościach odwołania do obiektu mapy (przekazywane jako jedyny argument metody initialize() - przyda się przy przerysowywaniu etykietki) oraz odwołanie do kontenera, które będziemy wykorzystywać przy metodzie remove().

Etykietka.prototype.remove = function()
{
	this.kontener.parentNode.removeChild(this.kontener);
};

Etykietka.prototype.copy = function()
{
	return new Etykietka(this.punkt,this.tekst,this.klasa);
};

Etykietka.prototype.redraw = function(wymus)
{
	if (!wymus)
		return;
	this.kontener.style.top = (mapa.fromLatLngToDivPixel(this.punkt).y+3)+'px';
	this.kontener.style.left = mapa.fromLatLngToDivPixel(this.punkt).x+'px';
}

Metoda remove() usuwa kontener, do którego odwołanie wskazywała właściwość this.kontener. Metoda copy() tworzy identyczny obiekt etykietki. Najważniejsza jest metoda redraw() - jeśli API wywoła ją z argumentem, wymuszającym przerysowanie (true), to należy uaktualnić położenie (za pomocą style.top i style.left), wcześniej konwertując współrzędne geograficzne na współrzędne XY (w tym momencie przydało się odwołanie do mapy, na której znajduje się etykietka).

Wystarczy teraz storzyć nowy obiekt klasy Etykietka, by na mapie pojawił się tekst. W przykładzie 19.1 zastosowano dodatkowo nieomówiony w tym tutorialu arkusz CSS, dzięki któremu tekst jest ładnie stylowany i wycentrowany względem punktu zaczepienia: przykład 1pokaż kod przykładu

Wstawianie markera z etykietką tekstową

Wiedząc, w jaki sposób dodaje się zwykłą etykietkę można w prosty sposób napisać własną klasę obiektów, które wyświetlają marker z etykietką. Różnica polegać będzie jedynie na tym, że musimy zapamiętać w odpowiedniej właściwości dodany przez metodą initialize() marker, a przy usuwaniu obiektu zadbać o usunięcie markera z mapy. W celu uatrakcyjnienia przykładu, zakodowałem również funkcję, która przenosi etykietkę razem z markerem, gdy ten jest przeciągany za pomocą myszy. Sprawdź sposób w jaki to osiągnąłem w przykładzie: przykład 2pokaż kod przykładu

Dodanie obrazka na mapę

W równie prosty sposób można na mapę dodać obrazek:

function Obraz(punkt,obrazURL,szerokosc)
{
	this.punkt = punkt;
	this.obrazURL = obrazURL;
	this.szerokosc = szerokosc || 128;
};

Obraz.prototype = new GOverlay();

Przy tworzeniu obiektu należy podać punkt zaczepienia, adres URL do obrazka oraz jego szerokość, w jakiej ma się pojawić na mapie.

Obraz.prototype.initialize = function(mapa)
{
	var obraz = document.createElement("img");
	obraz.src = this.obrazURL;
	obraz.className = 'obrazek';
	obraz.style.position = 'absolute';
	obraz.onclick = info;
	obraz.style.width = this.szerokosc+'px';
	mapa.getPane(G_MAP_MAP_PANE).appendChild(obraz);
	
	this.mapa = mapa;
	this.obraz = obraz;	
};

Tutaj również bez wielkiej filozofii, najważniejsze jest stworzenie obiektu img i ustawienie odpowiedniego adresu URL do właściwości src. Zwróć uwagę na linię 7, w której określamy, jaka funkcja ma zostać wywołana po kliknięciu na obrazek. Wcześniej musisz ją napisać, może to wyglądać np. tak:

function info()
{
	alert('Kliknąłeś na obrazek!');
}

Teraz czas dodać obraz na mapę:

mapa.addOverlay(new Obraz(mapa.getCenter(),'http://gmapsapi.com/examples/019/03/szczecin.jpeg',128));

W przykładzie 3 obrazek jest odpowiednio stylowany za pomocą arkusza CSS, po najechaniu myszą podświetla się na czerwono, a po kliknięciu wyświetla alert z informacją: przykład 3pokaż kod przykładu

Dodanie skalowanego obrazka

Za pomocą nieco zmodyfikowanej metody dodawania obrazków, przedstawionej w przykładzie 4 można pokusić się o dodanie do mapy obrazu, który skaluje się wraz ze zmianami poziomu zoom tak, by np. imitować fragment mapy. W przykładzie 4 dodałem do mapy przezroczysty obraz PNG:

Obraz ten skopiowałem i w programie graficznym przeskalowałem go dla niższych poziomów zoom, nakazując przeglądarce wyświetlanie odpowiedniego obrazka na odpowiednim poziomie zoom (wyświetlanie ciągle tego samego spowodowałoby, że byłby niewygładzony). Metoda działania opiera się na przeliczaniu współrzędnych dwóch przeciwległych narożników obrazka na współrzędne XY kontenera z mapą - ich różnice pozwalają obliczyć szerokość i wysokość obrazka, dzięki czemu powstaje efekt skalowania. Uwaga! Przykład 4 nie działa poprawnie w Internet Explorer 6 (brak obsługi przezroczystości PNG)przykład 4pokaż 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