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.

Polilinie

Ten artykuł dotyczy najnowszej wersji API

« powrót do listy kategorii

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

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)


Kategorie markerów i polilinii

API v3

Stwórz markery/polilinie w kilku kategoriach, a następnie ukrywaj i pokazuj wybrane kategorie


Geokodowanie adresów

API v3

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