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.

Obliczenia

Ten artykuł dotyczy najnowszej wersji API

« powrót do listy poradników

Klasy LatLng, LatLngBounds, Polyline i Polygon implementują kilka funkcji, dzięki którym możesz obliczać współrzędne, 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 LatLng służą funkcje lat() i lng(), zwracające odpowiednio szerokość i długość geograficzną.

var tresc 	=  'Punkt '+wspolrzedne+'<ul>';
tresc 		+= '<li>długość geograficzna: '+wspolrzedne.lng()+'</li>';
tresc		+= '<li>szerokość geograficzna: '+wspolrzedne.lat()+'</li>';
tresc		+= '</ul>';

dymek.open(mapa);
dymek.setPosition(wspolrzedne);
dymek.setContent(tresc);

Zobacz efekt w przykładzie 1 przykład 1pokaż 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 LatLng. Przykład użycia:

mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy); 			

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

W przykładzie dodaliśmy też obsługę zdarzenia idle. Zdarzenie to jest odpalane po zakończeniu przesuwania lub zmianie przybliżenia mapy. W każdej z tych sytuacji, wyświetlone zostanie okienko z współrzędnymi środka. przykład 2pokaż kod przykładu

Zwróć uwagę, że metoda setCenter() zwraca punkt klasy LatLng. 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 3pokaż 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 LatLngBounds. 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 pięć punktów - narożniki widocznego obszaru oraz jego środek i wyświetli je na ekranie.

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

// wyznaczamy widoczny obszar
var obszar = mapa.getBounds();
if(!obszar)
	return;
// 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:

// pomocnicze współrzędne
var lewo 	= lewyDolny.lng();
var prawo 	= prawyGorny.lng();
var gora 	= prawyGorny.lat();
var dol		= lewyDolny.lat();

// brakujące wierzchołki
var prawyDolny 	= new google.maps.LatLng(dol,prawo);
var lewyGorny	= new google.maps.LatLng(gora,lewo);

Środek wyznacza się analogicznie jak w przykładzie 2 i 3. Zaprezentowanie współrzędnych to kwestia czysto estetyczna, w przykładzie 4 pokazano je w tabelce, symbolizującej ekran: przykład 4pokaż kod przykładu

Uwaga! Wyświetlenie dużego okna infoWindow powoduje częściowe przesunięcie mapy, aby skompensować wystające poza granice części okna. Z tego względu, współrzędne jakie widzisz w tabelce mogą odbiegać od tego, co w danej chwili widać na ekranie.

Wyznaczanie współrzędnych markera

Można również wyznaczyć współrzędne markera. Obiekty typu Marker posiadają zaimplementowaną metodą getPosition(), zwracającą punkt LatLng. 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:

google.maps.event.addListener(marker,'click',function()
{
	var lat = marker.getPosition().lat();
	var lon = marker.getPosition().lng();
	var tekst = '<small> - długość: '+lat+'<br /> - szerokość: '+lon+'</small>';
	dymek.setContent('<strong>'+marker.nazwa+'</strong><br />'+tekst);
	dymek.setPosition(marker.getPosition());
	dymek.open(mapa);
});		

W tym przykładzie, przy tworzeniu markera należy określić we własności .nazwa nazwę markera. Zobacz pełną wersję kodu: przykład 5pokaż kod przykładu

Wyznaczanie pola powierzchni polilinii

W czystym API nie ma możliwości prostego wyznaczenia powierzchni ani długości polilinii. Aby obliczyć te wartości, należy skorzystać z oficjalnej biblioteki Geometry Library. W tym celu, należy nieco zmodyfikować postać dołączanego skryptu API, dodając na końcu &libraries=geometry, na przykład:

http://maps.google.com/maps/api/js?sensor=false&libraries=geometry

Biblioteka udostępnia kilka przydatnych funkcji, dostępnych w przestrzeni nazw google.maps.geometry.spherical - w tym przykładzie wykorzystamy dwie z nich: computeLength() i computeArea(). Obie wymagają jednego argumentu - tablicy MVCArray współrzędnych LatLng. Można je łatwo wydobyć z polilinii, używając funkcji getPath() (dla wielokąta otwartego) lub getPaths() (dla wielokąta zamkniętego). Funkcje te zwracają wartości w systemie metrycznym - metrach lub metrach kwadratowych. Aby skonwertować to na km (km2) należy pomnożyć otrzymaną wartość przez 10-3 (10-6).

Przykład 6 pokazuje, jak wyświetlić pole powierzchni polilinii z przykładu z poprzedniej lekcji. przykład 6pokaż kod przykładu

Wyznaczenie obwodu/długości polilinii

Analogicznie działa przykład 7, w którym obliczane jest pole (zwróć uwagę na niewielkie różnice, wynikające z nieco innej konstrukcji wielokątów zamkniętych: przykład 7pokaż kod przykładu

Wyznaczanie azymutu pomiędzy dwoma punktami

Do wyznaczania azymutu pomiędzy dwoma punktami służy funkcja computeHeading() z przestrzeni nazw google.maps.geometry.spherical, przyjmująca dwa argumenty LatLng, pomiędzy którymi ma zostać wyznaczony azymut. Przykładowo:

var szczecin = new google.maps.LatLng(53.4200000, 14.5877800);
var warszawa = new google.maps.LatLng(52.2604880, 21.0210514);

dymek1.setPosition(szczecin);
dymek1.setContent('SZCZECIN - WARSZAWA<br />Azymut: '+google.maps.geometry.spherical.computeHeading(szczecin,warszawa).toFixed(2)+'<sup>o</sup>');
dymek1.open(mapa);

Pamiętaj, że by korzystać z tej funkcji, konieczna jest zmiana dołączanego skryptu API (patrz poprzedni punkt): przykład 8pokaż 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ł:

Pierwsza mapa

API v3

Kurs podstaw cz. I: Witaj świecie, czyli jak wstawić mapę na stronę i zacząć programować


Dodawanie znaczników na mapę

API v3

Kurs podstaw cz. II: Podstawowe informacje na temat wstawiania markerów (znaczników)


Geokodowanie adresów

API v3

Kurs podstaw cz. XI: Proste i szybkie geokodowanie adresów (zamiana adresu na współrzędne)


Wczytywanie danych z pliku XML

API v3

Kurs podstaw cz. X: Omówienie wczytywania danych z pliku XML za pomocą AJAXa