Poznaj Google Maps API

Ograniczanie zakresu mapy

« powrót do listy kategorii

Za pomocą obsługi zdarzenia move oraz paru prostych skryptów można w dość prosty sposób ograniczyć obszar, po którym użytkownik mapy będzie mógł się poruszać. Równie proste jest ograniczenie dostępnych poziomów przybliżenia. Obie metody będą tematem tego poradnika.

Ograniczenie poziomu zoom

Zaczniemy od rzeczy prostszej. Ustawienie minimalnego oraz maksymalnego dostępnego poziomu powiększenia można zapisać w pięciu linijkach kodu:

var ograniczenieZoom = [6,9];
var mapy = mapa.getMapTypes();
for (var i=0; i<mapy.length; i++)
{
	mapy[i].getMinimumResolution = function() {return ograniczenieZoom[0];}
	mapy[i].getMaximumResolution = function() {return ograniczenieZoom[1];}
}

Dla każdego typu mapy (np. G_HYBRID_MAP lub G_SATELLITE_MAP) piszemy własną funkcję, zwracającą maksymalny i minimalny dostępny zoom za pomocą odpowiednich metod getMaximumResolution() oraz getMinimumResolution(). Nienazwana funkcja musi zwracać liczbę naturalną, gdzie 0 to najdalsze możliwe oddalenie, a 19 to standardowo najbliższe możliwe przybliżenie. Kod powyżej spowoduje, że mapa będzie posiadać jedynie 4 stopnie przybliżenia: 6, 7, 8 i 9

Uwagi

• powyższy kod musi znaleźć się za inicjalizacją mapy
• maksymalny poziom zoom dla mapy fizycznej wynosi 15, dla mapy zwykłej 17, a dla map hybrydowych i satelitarnych wynosi on 19
• początkowy poziom przybliżenia powinien zawierać się w ustalonym przedziale (w przykładzie powyżej od 6 - 9)

Ograniczenie obszaru przesuwania

Nieco trudniejsze jest ograniczenie obszaru, który można oglądać na mapie. Na potrzeby przykładu przyjmiemy obszar, określony narożnymi punktami o współrzędnych (49.49667452747044,13.88671875) i (54.53223884916208,23.46679687). Taki prostokąt pokrywa mniej więcej powierzchnię Polski. W trakcie przesuwania będziemy badać, czy środek mapy znajduje się w dozwolonym przedziale, i jeśli tak nie jest, to obliczymy współrzędne punktu, który w obszarze będzie się mieścił, i na nim wycentrujemy mapę. Stworzy to efekt złudzenia, że faktycznie mapa nie może zostać przesunięta dalej.

Dozwolony obszar będziemy przechowywać w odpowiedniej zmiennej typu GLatLngBounds():

var ograniczenieObszar = new GLatLngBounds();
ograniczenieObszar.extend(new GLatLng(49.49667452747044,13.88671875));
ograniczenieObszar.extend(new GLatLng(54.53223884916208,23.46679687));

Zaczynamy od obsługi odpowiedniego zdarzenia - po jego wystąpieniu wykonana zostanie funkcja sprawdz():

GEvent.addListener(mapa,'move',sprawdz);

Wygląda ona następująco:

function sprawdz()
{
	if(!ograniczenieObszar.contains(mapa.getCenter())) // czy środek mapy jest poza dozwolonym obszarem?
	{
		var lat = mapa.getCenter().lat();
		var lng = mapa.getCenter().lng();
		
		// minimalne i maksymalne wartości, pobrane z dozwolonego obszaru
		var minlat = ograniczenieObszar.getSouthWest().lat();
		var maxlat = ograniczenieObszar.getNorthEast().lat();
		var minlng = ograniczenieObszar.getSouthWest().lng();
		var maxlng = ograniczenieObszar.getNorthEast().lng();
		
		// jeśli szerokość geograficzna jest większa niż maksimum, to zmieniamy jej wartość na to maksimum
		if(lat > maxlat)
			lat = maxlat;
		
		// jeśli szerokość geograficzna jest mniejsza niż minimum, to zmieniamy jej wartość na to minimum
		else if(lat < minlat)
			lat = minlat;
			
		// analogicznie dla długości geograficznej
		if(lng > maxlng)
			lng = maxlng;
		else if(lng < minlng)
			lng = minlng;
		
		// centrujemy mapę w poprawnych współrzędnych
		mapa.setCenter(new GLatLng(lat,lng));
	}
}

I to tyle, oto efekt: przykład 1pokaż kod przykładu

Uwagi

• zadbaj, by punkt startowy zawierał się w dozwolonym obszarze
• jeśli na mapę dodajesz markery z oknami typu infoWindow, to upewnij się, że z góry, z lewej oraz z prawej strony jest wystarczająco dużo miejsca w dozwolonym obszarze - w trakcie otwierania dymka mapa automatycznie centruje się tak, by jego treść była widoczna w pełni - jeśli któryś punkt będzie wystawał poza dozwolony obszar, mogą wystąpić nieoczekiwane błędy