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 poradników

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