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
Zanim zaczniemy rysować...
Jeśli twoja mapa ma umożliwiać wstawianie polilinii, musisz zmienić trochę zawartość nagłówka strony. Do tagu <html> należy dodać następujący ciąg: xmlns:v="urn:schemas-microsoft-com:vml" tak, by po tej operacji nagłówek strony przypominał ten poniżej:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
Krokiem drugim jest dodanie w sekcji HEAD deklaracji stylu CSS:
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
Dzięki tym zabiegom, wyświetlanie polilinii będzie również możliwe w najpopularniejszej (jak widać, nie zawsze znaczy to najlepszej) przeglądarce świata - Internet Explorer. Mając za sobą ten krok, możemy przejść do części właściwej.
Pierwsza polilinia
Polilinia reprezentowana jest jako obiekt klasy GPolyline. Ogólna składnia przy tworzeniu wygląda następująco:
var polilinia = new GPolyline(punkty,kolor,grubość,przezroczystość)
gdzie:
- punkty - tablica, zawierająca punkty odpowiadające kolejnym wierzchołkom (punkty muszą być przekazywane jako obiekty GLatLng())
- kolor - string, reprezentujący kolor rysowanej polilinii w formacie RGB i HTMLowskim zapisie #rrggbb
- grubość - grubość, wyrażona w całkowitej liczbie pikselów
- przezroczystość - liczba z przedziału 0 - 1, określająca stopnień przezroczystości polilinii (0- całkowicie przezroczysta, 1 - całkowicie nieprzezroczysta)
Wszystkie parametry poza pierwszym są opcjonalne i można je pominąć. Poniżej fragment przykładu 1, pokazującego wstawianie poliliniii:
if(GBrowserIsCompatible())
{
var mapa = new GMap2(document.getElementById('mapka'),{mapTypes: [G_NORMAL_MAP]});
mapa.setCenter(new GLatLng(53.31,17.8),10);
// współrzędne Szczecina
// B = 53.4200000, L = 14.5877800
var szczecin = new GLatLng(53.4200000, 14.5877800);
// współrzędne Warszawy
// B = 52.2604880, L = 21.0210514
var warszawa = new GLatLng(52.2604880, 21.0210514);
var punkty = [szczecin,warszawa];
var polilinia = new GPolyline(punkty,'#ff0000',3);
mapa.addOverlay(polilinia);
}
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(zwróć uwagę na zmienione fragmenty w sekcji HEAD)
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 GPolygon, w stosunku do GPolyline posiada ona o dwa argumenty więcej:
var polilinia = new GPolygon(punkty,linia_kolor,linia_grubość,linia_przezroczystość,wypełnienie_kolor,wypełnienie_przezroczystość)
gdzie:
- punkty - tablica, zawierająca punkty odpowiadające kolejnym wierzchołkom (punkty muszą być przekazywane jako obiekty GLatLng())
- linia_kolor - string, reprezentujący kolor rysowanej polilinii w formacie RGB i HTMLowskim zapisie #rrggbb
- linia_grubość - grubość, wyrażona w całkowitej liczbie pikselów
- linia_przezroczystość - liczba z przedziału 0 - 1, określająca stopnień przezroczystości polilinii (0- całkowicie przezroczysta, 1 - całkowicie nieprzezroczysta)
- wypełnienie_kolor - string, reprezentujący kolor wypełnienia rysowanej polilinii w formacie RGB i HTMLowskim zapisie #rrggbb
- wypełnienie_przezroczystość - liczba z przedziału 0 - 1, określająca stopnień przezroczystości wypełnienia polilinii (0- całkowicie przezroczysta, 1 - całkowicie nieprzezroczysta)
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:
if(GBrowserIsCompatible())
{
var mapa = new GMap2(document.getElementById('mapka'),{mapTypes: [G_NORMAL_MAP]});
mapa.addControl(new GLargeMapControl());
mapa.addControl(new GOverviewMapControl());
mapa.addControl(new GScaleControl());
mapa.setCenter(new GLatLng(52.119998657638156,19.599609375),6);
// 90 punktów, w przybliżeniu pokrywających się z granicą Polski
var punkty=[/*tutaj tablica z punktami, zobacz kod źródłowy przykładu*/];
var polilinia = new GPolygon(punkty,'#ff0000',4,0.7,'#ff0000',0.2);
mapa.addOverlay(polilinia);
}
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ęć
Od wersji 2.88, API obsługuje zdarzenie kliknięcia na polilinię. Przykład, wyświetlający dane punktu polilinii, który został kliknięty przedstawiony został poniżej: przykład 3pokaż kod przykładu
Pytania czytelników
- Polilinie nie wyświetlają się w Internet Explorer, co robić?
Nie zapomnij o dodaniu do nagłówka odpowiedniego kodu, dzięki któremu Internet Explorer będzie wyświetlał linie w technologii VML. Szczegóły we wprowadzeniu do tej części kursu.
Przejdź do kolejnej części kursu
Tytuł następnej części kursu to Obliczenia
- 1.Pierwsza mapa
- 2.Dodawanie znaczników na mapę
- 3.Zmiana domyślnej ikony znacznika
- 4.Popularne, darmowe ikony dla markerów
- 5.Wyświetlanie informacji na mapie
- 6.Wbudowane kontrolki i sterowanie
- 7.Zdarzenia
- jesteś tu!Polilinie
- 9.Obliczenia
- 10.Wczytywanie danych z pliku XML
- 11.Geokodowanie adresów
- 12.Optymalizacja wyświetlania dużej ilości znaczników
- 13.Debugowanie skryptów dla początkujących