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.

Zoom do zaznaczonego obszaru

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

Profesjonalne aplikacje, służące do prezentacji danych kartograficznych (np. MapGuide Open Source) posiadają przydatne narzędzie, pozwalające na zaznaczenie pewnego obszaru, a następnie takim ustawieniu parametrów mapy, by widoczny obszar idealnie pokrywał się z zaznaczeniem. W praktyce wygląda to tak, że za pomocą myszy możemy zaznaczyć obszar np. miasta, a mapa zostanie tak wyśrodkowana i przybliżona, by pokazać zaznaczony obszar.

Jak to zrobić w Google Maps API?

Nie ma sensu pisania od nowa czegoś, co ktoś już wymyślił, i w dodatku działa bez zarzutu. W tym przykładzie będę opierał się o darmowe, open-sourcowe rozszerzenie DragZoom, dodające do mapy nową kontrolkę typu DragZoomControl().

Aby korzystać z rozszerzenia, wystarczy dołączyć do kodu strony plik javascript z poniższego adresu:

http://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/1.2/src/dragzoom.js - wersja normalna

lub

http://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/1.2/src/dragzoom_packed.js - wersja skompresowana

Skrypt należy dołączyć do strony tak samo, jak skrypt samego API. Polecam ściągnięcie pliku ze skryptem i załadowanie na własny serwer, a następnie podlinkowanie do tak przesłanego pliku

Dodanie kontrolki

Dodanie kontrolki jest ekstremalnie proste - tworzymy nowy obiekt klasy DragZoomControl(), a następnie dodajemy go do mapy za pomocą metody addControl():

mapa.addControl(new DragZoomControl());

Zwróć uwagę, że do strony koniecznie musi być dołączony skrypt rozszerzenia. Oto fragment nagłówka, pokazującego linkowanie (w przykładzie tym plik ze skryptem został skopiowany na własny serwer):

<script src='/examples/054/dragzoom.js' type='text/javascript'></script> 

Tylko tyle kodu wystarczy, by umożliwić efektowną interakcję: przykład 1pokaż kod przykładu

Dostosowanie

W przykładzie 1 kontrolka kosztem prostego dodania nie jest zbyt dobrze wpasowana w mapę, a dodatkowo zawiera teksty po angielsku. Aby dostosować kontrolkę do własnych potrzeb, należy posłużyć się opcjonalnymi argumentami. Pierwszy z nich odpowiada za wygląd prostokąta, oznaczającego zaznaczenie użytkownika, drugi argument odpowiada za wygląd przycisku.

var zoomOkno = new DragZoomControl(opcjeRamki,opcjeWygladu);

Oczywiście, wcześniej trzeba odpowiednio ustawić obie zmienne, jakie są tu przekazywane. Oto pierwsza z nich:

var opcjeRamki = {
	opacity: 0.3,
	border: '1px solid red'
}

Dzięki takiemu zapisowi, ramka będzie miała obramowanie o grubości 1 piksela w kolorze czerwonym, a czarny obszar poza nią będzie przezroczysty w 70%.

var opcjeWygladu = {
	overlayRemoveTime: 0,
	buttonHTML: 'zoom okno',
	buttonZoomingHTML: 'zaznacz obszar',
	buttonStyle: {
		textAlign: 'center',
		background: '#fff',
		font: '11px Verdana',
		width: '90px'
	},
	buttonZoomingStyle: {
		background: '#00ffff',
		width: '90px'
	}
}

Tutaj sytuacja jest trochę bardziej skomplikowana:

  • Ustawienie overlayRemoveTime na 0 spowoduje, że od razu po przybliżeniu obszaru do zaznaczenia zniknie ramka, co w większości przypadków jest najbardziej pożądaną akcją. Jeśli chcesz, by przez pewien okres czasu ramka pozostawała wyświetlana, ustaw tę wartość na odpowiednią liczbę milisekund.
  • Ustawienie buttonHTML na 'zoom okno' spowoduje, że zawartością przycisku w stanie spoczynku będzie 'zoom okno'. Dozwolony jest również kod HTML (można wstawić np. obrazek).
  • Analogicznie ma się sprawa z buttonZoomingHTML, tylko że tutaj sytuacja tyczy się przycisku aktywowanego (w trakcie zaznaczania obszaru).
  • W buttonStyle ustawiamy wizualne atrybuty przycisku (w przykładzie tekst wewnątrz jest wycentrowany, tło białe, czcionka to Verdana o rozmiarze 11px, a szerokość przycisku 90px. Podobnie ma się sprawa z buttonZoomingStyle, tylko że tu podajemy własności dla przycisku aktywowanego.

Aby zmienić pozycję kontrolki na mapie, wystarczy użyć opcjonalnego drugiego argumentu funkcji addControl(), np:

var zoomOkno = new DragZoomControl(opcjeRamki,opcjeWygladu);
mapa.addControl(zoomOkno,new GControlPosition(G_ANCHOR_TOP_LEFT,new GSize(90,10)));

Efekty modyfikacji są przekonujące: przykład 2pokaż kod przykładu

Inne konfigurowalne własności

Własności dla opcji wyglądu ramki /pierwszy argument DragZoomControl()/

własnośćtypopis
opacity liczba liczba z zakresu 0-1, odpowiadająca za stopień przezroczystości zaciemnionego obszaru. Domyślnie 0.2
fillColor string kolor zaciemnienia w formacie szesnastkowym. Domyślnie #000
border string styl dla obramowania. Domyślnie 2px solid blue

Własności dla opcji wyglądu przycisku /drugi argument DragZoomControl()/

własnośćtypopis
buttonHTML string zawartość przycisku przybliżania w stanie spoczynku. Domyślnie 'zoom...'
buttonZoomingHTML string zawartość przycisku przybliżania w trakcie zaznaczania obszaru. Domyślnie 'Drag a region on the map'
buttonStartingStyle obiekt własności CSS, określające ogólny wygląd przycisku. Domyślnie {width: '52px', border: '1px solid black', padding: '2px'}
buttonStyle obiekt własności CSS, określające ogólny wygląd przycisku. Domyślnie {background: '#FFF'}
buttonZoomingStyle obiekt własności CSS, określające wygląd przycisku w trakcie zaznaczania. Domyślnie {background: '#FF0'}
buttonZoomingStyle obiekt własności, odpowiadające za przycisk w trakcie zaznaczania obszaru. Domyślnie {background: '#FF0'}
overlayRemoveTime liczba czas w milisekundach, przez jaki na mapie pokazywany jest obszar zaznaczenia po dokonaniu przybliżenia do zaznaczonego obszaru. Domyślnie 6000 (6 sekund)
stickyZoomEnabled logiczna jeśli ustawiona na 1, to po dokonaniu zbliżenia program utrzymuje cały czas tryb przybliżania, pozwalając na dalsze zaznaczanie obszaru. Domyślnie 0

Sposób użycia identyczny jak w przykładzie 2.

Uwagi

Ze względu na skokowy sposób przybliżania w Google Maps (każdy zoom to około 2x powiększenie) zaznaczenie może nie pokrywać się dokładnie z faktycznym rezultatem. W pewnych przypadkach wynikowy obszar, który widać po przybliżeniu może być niewiele większy niż zaznaczenie.

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