Obliczenia
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