Tutorial Google Maps API: Obliczenia

Obliczenia

Klasy GLatLng, GPolyline i GPolygon implementują kilka funkcji, dzięki którym możesz obliczać dystanse, długości, powierzchnie itp. W tym dziale zostaną zaprentowane przykłady, pokazujące jak je stosować i jak używać w praktyce.

Wyznaczanie długości / szerokości geograficznej punktu

Do wyznaczenia długości / szerokości geograficznej punktu klasy GLatLng służą funkcje lat() i lng(), zwracające odpowiednio szerokość i długość geograficzną.

var mapa = new GMap2(document.getElementById('mapka'));
var punkt = new GLatLng(55.456,14.3421);
mapa.setCenter(punkt,3);

// dodamy okienko informacyjne ze współrzędnymi punktu (55.456,14.3421)
var tresc 	=  'Punkt '+punkt+'<ul>';
tresc 		+= '<li>długość geograficzna: '+punkt.lng()+'</li>';
tresc		+= '<li>szerokość geograficzna: '+punkt.lat()+'</li>';
tresc		+= '</ul>';
mapa.openInfoWindowHtml(punkt,tresc);

Zobacz efekt w przykładzie 1 przykład 1 pokaż kod przykładu

Wyznaczenie współrzędnej środka i narożników ekranu

Wyznaczanie środka

Do wyznaczenia środka ekranu służy funkcja getCenter() obiektu mapy. Zwraca ona punkt typu GLatLng. Przykład użycia:

var mapa = new GMap2(document.getElementById('mapka'));

// losowa długość geograficzna
var lat=Math.random()*180-90+Math.random();

// losowa szerokość geograficzna
var lon=Math.random()*360-180+Math.random();
mapa.setCenter(new GLatLng(lat,lon),3);

// dodamy zdarzenie, które będzie wyświetlało współrzędne środka przy przesunięciu mapy
GEvent.addListener(mapa,'moveend',function()
{
	alert('Współrzędne środka: '+mapa.getCenter());
});

Przed wycentrowaniem mapy wyznaczone zostają losowa długość i szerokość geograficzna.

W przykładzie dodaliśmy też obsługę zdarzenia moveend. Po przesunięciu mapy zostanie wyświetlone okienko z współrzędnymi środka. przykład 2 pokaż kod przykładu

Zwróć uwagę, że metoda setCenter() zwraca punkt klasy GlatLng. Możesz więc również wyliczyć konkretną współrzędną metodą lat() bądź lng(). Zmieniony kod, wyświetlający przyjaźnie sformatowany komunikat ze współrzędnymi dostępny jest jako przykład 3 przykład 3 pokaż kod przykładu

Wyznaczenie narożników ekranu

API udostępnia funkcje do wyznaczenia współrzędnych narożników widocznej części mapy. Aby je wyliczyć, musimy najpierw użyć metody getBounds() obiektu mapy, która zwróci obiekt typu GLatLngBounds. Posiada on metodę getNorthEast() zwracającą punkt, będący prawym, górnym narożnikiem prostokąta, określającego widoczny obszar mapy. Metoda getSouthWest() zwraca punkt, będący lewym. dolnym narożnikiem prostokąta, określającego widoczny obszar mapy. Zwracana punkty są oczywiście klasy GLatLng, przez co możemy wyciągnąć z nich interesującą nas współrzędną. Napiszemy aplikację, która wyznaczy cztery punkty - narożniki widocznego obszaru, a następnie narysujemy prostokąt o wierzchołkach w tych punktach.

Wpierw wyznaczymy współrzędne lewego dolnego i prawego górnego wierzchołka:

var mapa = new GMap2(document.getElementById('mapka'));
var punkt = new GLatLng(55.456,14.3421);
mapa.setCenter(punkt,5);
				
// wyznaczamy widoczny obszar
var obszar = mapa.getBounds();

// wyznaczamy dwa przeciwległe wierzchołki
var lewyDolny = obszar.getSouthWest();
var prawyGorny = obszar.getNorthEast();

Do narysowania prostokąta brakuje tylko prawego dolnego i lewego górnego wierzchołka. Musimy utworzyć te punkty, dysponując współrzędnymi pozostałych dwóch wierzchołków:

var lewo 	= lewyDolny.lng();
var prawo 	= prawyGorny.lng();
var gora 	= prawyGorny.lat();
var dol		= lewyDolny.lat();

var prawyDolny 	= new GLatLng(dol,prawo);
var lewyGorny	= new GLatLng(gora,lewo);

Teraz stworzymy tablicę z punktami i narysujemy polilinię:

var punkty = [lewyGorny,prawyGorny,prawyDolny,lewyDolny,lewyGorny];
var polilinia = new GPolygon(punkty,'#ff0f00',0,0.3,'#ff0f00',0.4);
mapa.addOverlay(polilinia);

W tablicy punkty celowo punkt pierwszy i ostatni się pokrywają tak, by polilinia była zamknięta. Zobacz efekt działania kodu: przykład 4 pokaż kod przykładu

Spróbuj przesunąć odrobinę mapę, a przekonasz się, że prostokąt pokrywa się dokładnie z pierwotnym widokiem.

Wyznaczanie współrzędnych markera

Można również wyznaczyć współrzędne markera. Obiekty typu GMarker posiadają metodą getPoint(), zwracającą punkt GLatLng. Odpowiada on dokładnie punktowi, w którym zaczepiony jest marker (sprawdź trzecią część kursu nt. definiowania ikon po więcej szczegółów).

Napiszemy aplikację, która po kliknięciu na marker wyświetli dymek, a w nim współrzędne markera. Kluczowa część kodu wygląda następująco:

GEvent.addListener(marker,'click',function ()
{
	var lat = marker.getPoint().lat();
	var lon = marker.getPoint().lng();
	var tekst = '
 - długość: '+lat+'
 - szerokość: '+lon;
	marker.openInfoWindowHtml(marker.txt+tekst);
});

Wcześniej, przy tworzeniu markera właściwości .txt nadać należy nazwę markera. Zobacz pełną wersję kodu w przykładzie poniżej: przykład 5 pokaż kod przykładu

Wyznaczanie pola powierzchni polilinii

Dla zamkniętych polilinii z wypełnieniem możliwe jest policzenie pola powierzchni. Robi to za nas implementowana przez klasę GPolygon funkcja getArea(), która zwraca powierzchnię, wyrażoną w m². Przykład 6 pokazuje, jak wyświetlić pole powierzchni polilinii z przykładu z poprzedniej lekcji. przykład 6 pokaż kod przykładu

Zwróć uwagę, że powierzchnia została wyświetlona w km² przez podzielenie przez 1 000 000 i zaokrąglonie do jednego miejsa do przecinku

Wyznaczenie obwodu/długości polilinii

Dla polilinii bez wypełnienia możliwe jest policzenie obwodu/długości. Robi to za nas implementowana przez klasę GPolyline funkcja getLength(), która zwraca długość, wyrażoną w metrach. Przykład 7 pokazuje, jak wyświetlić obwód polilinii z poprzedniego przykładu. przykład 7 pokaż kod przykładu

Zwróć uwagę, że długość została wyświetlona w km przez podzielenie przez 1 000 i zaokrąglonie do jednego miejsa do przecinku

Prototypy

Nie wszystkie parametry można wyliczyć, korzystając z gotowych funkcji. W niektórych przypadkach trzeba "zaopatrzyć się" we własne prototypy, które uzupełnią brakującą funkcjonalność. Przykładem takiej sytuacji jest wyliczenie obwodu zamkniętej polilinii z wypełnieniem.

Wyznaczanie obwodu polilinii z wypełnieniem

Klasa GPolygon nie implementuje funkcji, umożliwiającej policzenie obwodu polilinii. Musimy napisać ją sami, opierając się na prototypach:

GPolygon.prototype.getLength = function()
{
	var odleglosc = 0;
	for (var j=0;j<this.getVertexCount()-1;j++)
	{
		odleglosc+=this.getVertex(j+1).distanceFrom(this.getVertex(j));
	}
	return odleglosc;
};

Działanie funkcji jest nadzwyczaj proste - dla każdego boku (jest ich o 1 mniej niż wierzchołków) zostaje obliczona jego długość, a suma tych wszystkich długości jest zwracana jako łączna długość polilinii. W celu zachowania podobnie brzmiących nazw, prototypowana funkcja nazywa się getLength. Zobacz przykład, w którym policzony zostanie obwód polilinii z wypełnieniem: przykład 8 pokaż kod przykładu

Przejdź do kolejnej części kursu

Tytuł następnej części kursu to Wczytywanie danych z pliku XML

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

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

Poznaj Google Maps API

Mapa Google Maps na Twojej stronie www!

www.gmapsapi.com

Informacje o artykule