Warstwy map Google

Google Maps - Nakładki

Nakładka to obiekt powiązany z współrzędnymi szerokości/ długości geograficznej na mapie.

Google Maps ma wiele rodzajów nakładek:

• Znacznik (Marker) - Pojedyncza pozycja na mapie. Znacznik może również wyświetlać niestandardowe obrazy ikon
• Krzywa linii (Polyline) - Szereg linii na mapie
• Wielokąt (Polygon) - Szereg linii na mapie, który ma kształt 'zamknięty'
• Kółko i prostokąt (Circle i Rectangle)
• Okna informacyjne (Info Windows) - Wyświetlanie treści w balonie na górze mapy
• Własne nakładki (Custom overlays)

Google Maps - Dodawanie znacznika

Konstruktor znacznika tworzy znacznik. Proszę zauważyć, że musi być ustawiona właściwość position, aby znacznik był widoczny.

Użyj metody setMap() do dodania znacznika do mapy:

przykładowa

var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);

Google Maps - Animacja znacznika

Poniższy przykład pokazuje, jak ustawić animację za pomocą atrybutu animation dla znacznika:

przykładowa

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

Google Maps - Zastąpienie znacznika ikoną

Poniższy przykład określa używane obrazy (ikony) do zastąpienia domyślnego znacznika:

przykładowa

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});
marker.setMap(map);

Google Maps - Krzywa linii

Krzywa linii jest linią rysowaną przez sekwencję współrzędnych uporządkowanych kolejno.

Krzywa linii obsługuje następujące atrybuty:

• path - Określenie kilku współrzędnych szerokości/ długości geograficznej
• strokeColor - Określenie szesnastkowego koloru linii (format: "#FFFFFF")
• strokeOpacity - Określenie przezroczystości linii (wartość z zakresu 0.0 do 1.0)
• strokeWeight - Określenie grubości pociągnięcia linii (w pikselach)
• editable - Definiowanie, czy linia może być edytowana przez użytkownika (true/false)

przykładowa

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});

Google Maps - Wielokąt

Wielokąt jest podobny do krzywej, składa się z serii uporządkowanych współrzędnych. Jednak wielokąt jest zaprojektowany, aby zdefiniować obszar zamknięty.

Wielokąt składa się z prostych linii i ma kształt "zamknięty" (wszystkie linie są połączone).

Wielokąt obsługuje następujące atrybuty:

• path - Określenie kilku współrzędnych szerokości/łuku (pierwszy i ostatni współrzędny są takie same)
• strokeColor - Określenie szesnastkowego koloru linii (format: "#FFFFFF")
• strokeOpacity - Określenie przezroczystości linii (wartość z zakresu 0.0 do 1.0)
• strokeWeight - Określenie grubości pociągnięcia linii (w pikselach)
• fillColor - Określenie szesnastkowego koloru obszaru wewnętrznego (format: "#FFFFFF")
• fillOpacity - Określenie przezroczystości koloru wypełnienia (wartość z zakresu 0.0 do 1.0)
• editable - Definiowanie, czy linia może być edytowana przez użytkownika (true/false)

przykładowa

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

Google Maps - Okrąg

Okrąg obsługuje następujące atrybuty:

• center - Określenie google.maps.LatLng serca okręgu
• radius - Określenie promienia okręgu w metrach
• strokeColor - Określenie szesnastkowego koloru linii otaczającej okrąg (format: "#FFFFFF")
• strokeOpacity - Określenie przezroczystości koloru pociągnięcia (wartość z zakresu 0.0 do 1.0)
• strokeWeight - Określenie grubości pociągnięcia linii (w pikselach)
• fillColor - Określenie szesnastkowego koloru obszaru wewnętrznego (format: "#FFFFFF")
• fillOpacity - Określenie przezroczystości koloru wypełnienia (wartość z zakresu 0.0 do 1.0)
• editable - Definiowanie, czy użytkownik może edytować okrąg (true/false)

przykładowa

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

Google Maps - Okno Informacyjne

wyświetlać informacyjne okno z tekstem dla znacznika:

przykładowa

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});
infowindow.open(map,marker);