Značky
Úvod
Značka označuje umístění na mapě. Ve výchozím nastavení používá značka standardní obrázek. Značky mohou zobrazovat vlastní obrázky, v takovém případě se obvykle označují jako „ikony“. Značky a ikony jsou objekty typu Marker
. Vlastní ikonu můžete nastavit v konstruktoru značky nebo voláním setIcon()
na značce. Další informace o přizpůsobení obrázku značky naleznete níže.
Obecně řečeno , značky jsou typem překrytí. Informace o dalších typech překrytí najdete v části Kreslení na mapě.
Značky jsou navrženy tak, aby byly interaktivní. Ve výchozím nastavení například dostávají "click"
události, takže můžete přidat posluchače událostí a vyvolat informační okno s vlastními informacemi. Můžete povolit uživatelům přesouvat značku na mapě nastavením značky „s draggable
vlastnost true
. Další informace o přetahovatelných značkách najdete níže.
Přidat značku
Konstruktor google.maps.Marker
trvá jeden Marker options
objekt doslovný, určující počáteční vlastnosti značky.
Následující pole jsou zvláště důležitá a běžně se nastavují při konstrukci značky:
-
position
(povinné) určujeLatLng
identifikující počáteční umístění značky. Jedním ze způsobů získáníLatLng
je použití služby Geokódování. -
map
(volitelně) určujeMap
, na který se má značka umístit. Pokud neurčíte mapu na konstrukci značky, značka se vytvoří, ale nebude připojena (nebo zobrazena) na mapě. Značku můžete přidat později voláním značky „ssetMap()
metoda.
Následující příklad přidá jednoduchou značku na mapu v Uluru ve středu Austrálie:
Ve výše uvedeném příkladu je značka umístěn na mapě při konstrukci značky pomocí vlastnosti map
v možnostech značky. Alternativně můžete značku přidat na mapu přímo pomocí značky „s setMap()
metoda, jak je znázorněno v následujícím příkladu:
Značka „s title
se zobrazí jako popis.
Pokud si nepřejete předat žádný Marker options
v konstruktoru značky, místo toho předejte prázdný objekt {}
v posledním argument konstruktoru.
Zobrazit příklad
Odebrat značku
Chcete-li značku odebrat z mapy, zavolejte setMap()
metoda předávající null
jako argument.
marker.setMap(null);
Upozorňujeme, že výše uvedené metoda neodstraní značku. Odebere značku z mapy. Pokud místo toho chcete značku smazat, měli byste ji odstranit z mapy a poté nastavit samotnou značku na null
.
Pokud chcete spravovat sadu značek, měli byste vytvořit pole pro uchování značek. Pomocí tohoto pole pak můžete volat setMap()
na každou značku v poli, když potřebujete značky odstranit. Značky můžete odstranit tak, že je odstraníte z mapy a poté nastavíte pole „s length
na 0
, čímž odstraníte všechny odkazy na značky.
Zobrazit příklad
Animovat značku
Značky můžete animovat tak, aby vykazovaly dynamický pohyb za různých okolností. Chcete-li určit způsob značka je animovaná, použijte vlastnost značky „s animation
typu google.maps.Animation
. Jsou podporovány následující Animation
hodnoty:
-
DROP
označuje, že značka by měla spadnout z horní části při prvním umístění na mapu na konečné místo. Jakmile se značka zastaví, animace se zastaví aanimation
se vrátí knull
. Tento typ animace je obvykle zadán během vytvářeníMarker
. -
BOUNCE
označuje, že by značka měla odrazit místo. Skákací značka bude pokračovat ve skákání, dokud není její vlastnostanimation
explicitně nastavena nanull
.
Vy může zahájit animaci na existující značce voláním setAnimation()
na objekt Marker
.
Pokud máte mnoho značek , možná je nebudete chtít pustit na mapu najednou. Můžete použít setTimeout()
k rozmístění animací značek pomocí vzoru uvedeného níže:
function drop() { for (var i =0; i markerArray.length; i++) { setTimeout(function() { addMarkerMethod(); }, i * 200); }}
Zobrazit příklad
Přizpůsobte obrázek značky
Chcete-li na značce zobrazit písmeno nebo číslo, můžete použít štítek značky.Pokud potřebujete větší přizpůsobení, můžete definovat ikonu, která se zobrazí místo výchozího obrázku značky. Definování ikony zahrnuje nastavení řady vlastností, které určují vizuální chování značky.
V následujících částech jsou popsány popisky značek, jednoduché ikony, komplexní ikony a symboly (vektorové ikony).
Štítky značky
Štítek značky je písmeno nebo číslo, které se nachází uvnitř značky. Obrázek značky v této části zobrazuje štítek značky s písmenem „B“. Štítek štítku můžete zadat buď jako řetězec, nebo jako objekt MarkerLabel
, který obsahuje řetězec a další vlastnosti štítku.
Při vytváření štítku můžete určit Vlastnost label
v objektu MarkerOptions
. Alternativně můžete zavolat setLabel()
na objekt značky a nastavit štítek na existující značku.
Následující příklad zobrazí označené značky, když uživatel klikne na mapu :
Jednoduché ikony
V nejzákladnějším případě může ikona označovat obrázek, který se má použít, místo výchozí ikony připínáčku Google Maps. Chcete-li takovou ikonu určit, nastavte vlastnost „s icon
na adresu URL obrázku. Rozhraní Maps JavaScript API automaticky upraví její velikost.
Složité ikony
Možná budete chtít určit složité tvary k označení oblastí, na které lze kliknout, a určit, jak by se měly ikony zobrazovat vzhledem k ostatním překryvům (jejich „pořadí zásobníku“). Ikony zadané tímto způsobem by měly nastavit jejich icon
vlastnosti objektu typu Icon
.
Icon
definují objekty definují také size
ikony, origin
ikony (pokud je požadovaný obrázek součástí většího například ve sprite) a anchor
, kde by měl být umístěn hotspot ikony (který je založen na původu).
Pokud používáte štítek s vlastní značkou, můžete štítek umístit pomocí vlastnosti labelOrigin
do objekt.
Převádění objektů MarkerImage
na typ Icon
Do verze 3.10 rozhraní Maps JavaScript API byly složité ikony definovány jako MarkerImage
objekty. Doslovný objekt Icon
byl přidán ve verzi 3.10 a nahrazuje MarkerImage
od verze 3.11. Icon
objektové literály podporují stejné parametry jako MarkerImage
, což vám umožní snadno převést MarkerImage
do Icon
odstraněním konstruktoru, zabalením předchozích parametrů do {}
„s a přidáním názvů jednotlivých parametrů. Například:
stává se
Symboly
Kromě rastrových obrázků podporuje značka také zobrazení vektorových cest zvaných Symbols
. Chcete-li zobrazit vektorovou cestu, předejte literál objektu Symbol
s požadovanou cestou do vlastnosti markeru s icon
. Můžete použít jednu z předdefinovaných cest v google.maps.SymbolPath nebo definovat vlastní cestu pomocí zápisu cesty SVG.
Další informace najdete v dokumentaci symbolů.
Vytvořit přetahovatelnou značku
Chcete-li uživatelům umožnit přetáhnout značku na jiné místo na mapě, nastavte draggable
na true
v možnostech značky.
Další přizpůsobení značky
Plně přizpůsobenou značku najdete v příkladu přizpůsobeného vyskakovacího okna.