Polilinie
Jedną z bardziej nowatorskich opcji, jakie oferuje API Google Maps, jest możliwość rysowania polilinii i poligonów (zamkniętych poliliniii z wypełnieniem). Dzięki temu mapa może wzbogacić się o narysowany przez nas szlak, obrys państwa, zaznaczenie drogi dojazdu - lista możliwości się na tym nie wyczerpuje
Pierwsza polilinia
Polilinia reprezentowana jest jako obiekt klasy Polyline z głównej przestrzeni nazw. Ogólna składnia przy tworzeniu wygląda następująco:
var polilinia = new google.maps.Polyline({opcje}). Za pomocą literału obiektu opcje można ustawić pożądane parametry, takie jak:
- map - na której mapie wyświetlić polilinię
- path - tablica współrzędnych LatLng, odpowiadających kolejnym wierzchołkom
- strokeColor - kolor polilinii, w postaci #rrggbb
- strokeOpacity - liczba z przedziału 0 - 1, określająca stopnień przezroczystości polilinii (0- całkowicie przezroczysta, 1 - całkowicie nieprzezroczysta)
- strokeWeight - liczba całkowita, określająca grubość linii
Poniżej fragment przykładu 1, pokazującego wstawianie poliliniii:
// współrzędne Szczecina
var szczecin = new google.maps.LatLng(53.4200000, 14.5877800);
// współrzędne Warszawy
var warszawa = new google.maps.LatLng(52.2604880, 21.0210514);
var punkty = [szczecin,warszawa];
var polilinia = new google.maps.Polyline({
map: mapa,
path: punkty,
strokeColor: '#ff0000',
strokeWeight: 3
});
Efektem działanie będzie wyświetlenie na mapie lini prostej, łączącej Szczecin z Warszawą. Linia ta będzie czerwona (#ff0000) o grubości 3 px.
Zobacz pełny kod i jego działanie w przykładzie 1 przykład 1pokaż kod przykładu
Polilinie z wypełnieniem
APi umożliwia również narysowanie zamkniętej polilinii wraz z zdefiniowanym wypełnieniem. Sposób tworzenia jest identyczny jak w przypadku zwykłej polilinii z dwiema różnicami - nazwa klasy dla polilinii z wypełnieniem to Polygon. Za pomocą literału obiektu, można określić następujące opcje:
- map - na której mapie wyświetlić polilinię
- paths - tablica, zawierająca zagnieżdżone tablice współrzędnych LatLng (dla kolejnych wierzchołków), odpowiadających kolejnym poliliniom
- strokeColor - kolor obramowania, w postaci #rrggbb
- strokeOpacity - liczba z przedziału 0 - 1, określająca stopnień przezroczystości obramowania (0- całkowicie przezroczyste, 1 - całkowicie nieprzezroczyste)
- strokeWeight - liczba całkowita, określająca grubość obramowania
- fillColor - kolor wypełnienia, w postaci #rrggbb
- fillOpacity - liczba z przedziału 0 - 1, określająca stopnień przezroczystości wypełnienia (0- całkowicie przezroczyste, 1 - całkowicie nieprzezroczyste)
W przykładzie 2.1 pokazano polilinię z wypełnieniem, pokazującą przybliżony obszar Polski. Fragment kodu, odpowiedzialnego za stworzenie linii:
Wszystkie parametry poza pierwszym są opcjonalne i można je pominąć. Poniżej fragment przykładu 1, pokazującego wstawianie poliliniii:
var punkty = [
new google.maps.LatLng(53.748711,14.238281),
new google.maps.LatLng(53.258641,14.425049),
/*tutaj dalsza część tablicy z punktami, zobacz kod źródłowy przykładu*/
];
var polilinia = new google.maps.Polygon({
map: mapa,
paths: [punkty],
strokeColor: '#ff0000',
strokeWeight: 4,
strokeOpacity: 0.7,
fillColor: '#ff0000',
fillOpacity: 0.2
});
Zwróć uwagę, że jako paths przekazano jednoelementową tablicę punkty - w przypadku, gdyby wypełniony kształt miał się składać z większej ilości linii, tablica ta będzie odpowiednio większa. Efektem działanie będzie wyświetlenie na mapie polilinii o kolorze czerwonym, z linią grubości 4px i przezroczystości 70%, oraz z 20% wypełnieniem w kolorze czerwonym
Zobacz pełny kod i jego działanie w przykładzie 2 przykład 2pokaż kod przykładu
Obsługa kliknięć
API obsługuje kilka zdarzeń, które można podpiąć do akcji takich jak kliknięcie lewym lub prawym przyciskiem myszy, dwuklik itp. W przykładzie 3 dodano kod, odpowiedzialny za wyświetlenie dymka z informacją o współrzędnych klikniętego miejsca i o ilości wierzchołków, jakie posiada kliknięta polilinia:
google.maps.event.addListener(polilinia, 'click', function(zdarzenie)
{
var tekst = 'Kliknąłeś na polilinię w '+zdarzenie.latLng;
var licznik = 0;
for(var i=0; i<polilinia.getPaths().getLength(); i++)
{
var p = polilinia.getPaths().getAt(i);
licznik += p.getLength();
}
tekst += '<br />Ta polilinia ma '+licznik+' wierzchołków';
dymek.setContent(tekst);
dymek.setPosition(zdarzenie.latLng);
dymek.open(mapa);
});
Metoda getPaths() zwraca tablicę MVCArray, zawierającą kolejne polilinie, składające się na wypełniony wielokąt (w tym przykładzie jest tylko jedna polilinia). Każda z tych linii reprezentowana jest tablicą MVCArray kolejnych współrzędnych - długość takiej tablicy wyznaczamy za pomocą metody getLength(). Do wybrania i-1-tego elementu tablicy MVCArray służy funkcja getAt(i). Przykład działa następująco: przykład 3pokaż kod przykładu
Rysowanie prostokątów
Jeśli konieczne jest narysowanie prostokąta o bokach równoległych do krawędzi mapy, rozsądne jest korzystanie z wbudowanej klasy Rectangle, która tworzy prosokąt, pokrywający dany obszar LatLngBounds. Parametry opcjonalne są podobne do parametrów dla klasy Polygon:
var punkt1 = new google.maps.LatLng(53.4200000, 14.5877800);
var punkt2 = new google.maps.LatLng(52.2604880, 21.0210514);
var zakres = new google.maps.LatLngBounds();
zakres.extend(punkt1);
zakres.extend(punkt2);
var prostokat = new google.maps.Rectangle({
map: mapa,
bounds: zakres,
strokeColor: '#ff0000',
strokeWeight: 3,
strokeOpacity: 0.8,
fillColor: '#ff0000',
fillOpacity: 0.4
});
W powyższym przykładzie, określono dwa przeciwległe narożniki prostokąta, dodano je do zakresu obszaru za pomocą metody extend(). Prostokąt będzie czerwony, o grubości obramowania 3 piksele i przezroczystości 20%, oraz przezroczystości wypełnienia 60%: przykład 4pokaż kod przykładu
Rysowanie okręgu z wypełnieniem
API3 pozwala rysować polilinie w kształcie okręgu, przy zadanym środku (określonym współrzędnymi LatLng) oraz promieniowi, wyrażonemu w metrach. W ten sposób można łatwo zaimplementować na przykład obszar dostaw, zakres działalności itp.
Do wstawienia okręgu korzystamy z klasy Circle. Opcjonalne parametry są identyczne jak w przypadku poprzednio używanej klasy Polygon, lecz dochodzą dwie nowe wymagane wartości:
var srodek = mapa.getCenter();
var kolo = new google.maps.Circle({
map: mapa,
center: srodek,
radius: 100000,
strokeColor: '#ff0000',
strokeWeight: 3,
strokeOpacity: 0.8,
fillColor: '#ff0000',
fillOpacity: 0.4
});
W powyższym przykładzie zostanie narysowane koło o promieniu 100 000 metrów (100 kilometrów), w środku mapy. Parametry wizualne ustawiono tak, by przezroczystości linii i powierzchni wynosiły odpowiednio 20% i 60%, grubość obramowania 3 piksele, kolor obramowania i wypełnienia: czerwony. przykład 5pokaż kod przykładu
Przejdź do kolejnej części kursu
Tytuł następnej części kursu to Obliczenia