Creative Saplings

Značky

17 prosince, 2020
No Comments

Ú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čuje LatLng 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čuje Map, 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 „s setMap() 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í a animation se vrátí k null. 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í vlastnost animation explicitně nastavena na null.

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.

Articles
Previous Post

Postarejte se o své zdraví: Průvodce pro teenagery

Next Post

Crawfish Boil (Čeština)

Napsat komentář Zrušit odpověď na komentář

Nejnovější příspěvky

  • Nejlepší fotografické školy na světě, 2020
  • Sovereign Citizens Take their Anti-Government Philosophy to the Roads
  • Průvodce náklady na opravy Stucco
  • Muckrakers (Čeština)
  • Precision Oncology (Čeština)

Archivy

  • Únor 2021
  • Leden 2021
  • Prosinec 2020
  • Listopad 2020
  • Říjen 2020
  • Září 2020
  • Deutsch
  • Nederlands
  • Svenska
  • Norsk
  • Dansk
  • Español
  • Français
  • Português
  • Italiano
  • Română
  • Polski
  • Čeština
  • Magyar
  • Suomi
  • 日本語
  • 한국어
Proudly powered by WordPress | Theme: Fmi by Forrss.