Překryvné vrstvy v Mapách Google
Mapy Google – překryvné vrstvy
Překryvy jsou objekty na mapě, které jsou vázány na souřadnice zeměpisné šířky/délky.
Mapy Google mají několik typů překryvných vrstev:
- Značka – Jednotlivá místa na mapě. Značky mohou také zobrazovat vlastní obrázky ikon
- Polyline – řada přímých čar na mapě
- Mnohoúhelník – řada rovných čar na mapě a tvar je „uzavřený“
- Kruh a obdélník
- Informační okna – zobrazuje obsah ve vyskakovací bublině v horní části mapy
- Vlastní překryvy
Mapy Google – Přidejte značku
Konstruktor Marker vytvoří značku. Všimněte si, že pro zobrazení značky musí být nastavena vlastnost position.
Přidejte značku do mapy pomocí metody setMap():
Příklad
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
Mapy Google – Animujte značku
Níže uvedený příklad ukazuje, jak animovat značku pomocí vlastnosti animation:
Příklad
var
marker = new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Mapy Google – ikona místo značky
Níže uvedený příklad určuje obrázek (ikonu), který se má použít místo výchozí značky:
Příklad
var marker = new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Google Maps – Polyline
Polyline je čára, která je nakreslena řadou souřadnic v uspořádané sekvenci.
Křivka podporuje následující vlastnosti:
- cesta - určuje několik souřadnic zeměpisné šířky/délky pro linii
- strokeColor - určuje hexadecimální barvu řádku (formát: "#FFFFFF")
- strokeOpacity – určuje neprůhlednost čáry (hodnota mezi 0,0 a 1,0)
- strokeWeight - určuje váhu tahu řádku v pixelech
- editovatelné - určuje, zda je řádek upravitelný uživateli (true/false)
Příklad
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Mapy Google – mnohoúhelník
Polygon je podobný křivce v tom, že se skládá z řady souřadnic v uspořádané sekvenci. Polygony jsou však navrženy tak, aby definovaly oblasti v uzavřené smyčce.
Polygony jsou tvořeny rovnými čarami a tvar je "uzavřený" (všechny čáry se spojují).
Polygon podporuje následující vlastnosti:
- cesta - určuje několik souřadnic LatLng pro čáru (první a poslední souřadnice jsou stejné)
- strokeColor - určuje hexadecimální barvu řádku (formát: "#FFFFFF")
- strokeOpacity – určuje neprůhlednost čáry (hodnota mezi 0,0 a 1,0)
- strokeWeight - určuje váhu tahu řádku v pixelech
- fillColor - určuje hexadecimální barvu pro oblast v rámci uzavřené oblasti (formát: "#FFFFFF")
- fillOpacity – určuje neprůhlednost barvy výplně (hodnota mezi 0,0 a 1,0)
- editovatelné - určuje, zda je řádek upravitelný uživateli (true/false)
Příklad
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
});
Mapy Google – kruh
Kruh podporuje následující vlastnosti:
- střed – určuje google.maps.LatLng středu kruhu
- poloměr - udává poloměr kruhu v metrech
- strokeColor - určuje hexadecimální barvu pro čáru kolem kruhu (formát: "#FFFFFF")
- strokeOpacity – určuje neprůhlednost barvy tahu (hodnota mezi 0,0 a 1,0)
- strokeWeight - určuje váhu tahu řádku v pixelech
- fillColor - určuje hexadecimální barvu pro oblast v kruhu (formát: "#FFFFFF")
- fillOpacity – určuje neprůhlednost barvy výplně (hodnota mezi 0,0 a 1,0)
- upravitelné – určuje, zda je kruh upravitelný uživateli (pravda/nepravda)
Příklad
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Mapy Google - InfoWindow
Zobrazit InfoWindow s nějakým textovým obsahem pro značku:
Příklad
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);