Jelölők
Bevezetés
Egy jelölő azonosítja a helyet a térképen. Alapértelmezés szerint a jelölő normál képet használ. A jelölők egyedi képeket jeleníthetnek meg, ilyenkor általában “ikonoknak” nevezik őket. A jelölők és ikonok Marker típusú objektumok. Egyéni ikont állíthat be a marker konstruktorán belül, vagy a jelölőn az setIcon() hívásával. Az alábbiakban többet is megtudhat a jelölő kép testreszabásáról.
Széles körben A jelölők egyfajta fedvényt tartalmaznak. Az egyéb fedvénytípusokról lásd: Rajz a térképen.
A jelölőket interaktív módon tervezték. Például alapértelmezés szerint megkapják a "click" eseményeket, így hozzáadhat egy eseményfigyelőt egy információs ablak megjelenítéséhez, amely egyéni információkat jelenít meg. Engedélyezheti a felhasználóknak, hogy jelölőt helyezzenek el a térképen az “s draggable tulajdonság: true. További információt a húzható jelölőkről az alábbiakban talál.
Jelző hozzáadása
A google.maps.Marker konstruktor egyetlen Marker options objektum literál, megadva a marker kezdeti tulajdonságait.
A következő mezők különösen fontosak és gyakran vannak beállítva a marker összeállításakor:
-
position(kötelező) egyLatLngértéket határoz meg, amely azonosítja a marker kezdőhelyét. ALatLnglekérésének egyik módja a Geocoding szolgáltatás használata. -
map(opcionális) megadja aMapelemet, amelyre a jelölőt fel kell helyezni. Ha nem adja meg a térképet a marker szerkezetén, akkor a jelölő létrejön, de nincs csatolva (vagy nem jelenik meg) a térképen. A jelölőt később hozzáadhatja a “ssetMap()módszer.
A következő példa egyszerű jelölőt ad hozzá az Ausztrália központjában lévő Uluruban található térképhez:
A fenti példában a jelölő elhelyezni a térképen a jelölő megépítésekor a jelölőbeállítások map tulajdonságának használatával. Alternatív megoldásként hozzáadhatja a jelölőt a térképhez közvetlenül az “s setMap() módszer, az alábbi példában látható módon:
A “s title jelölő eszköztippként jelenik meg.
Ha nem kíván átadni Marker options -t a marker konstruktorában, akkor ehelyett adja át az üres objektumot {} az utolsóban a konstruktor argumentuma.
Példa megtekintése
Jelölő eltávolítása
Jelölő eltávolításához a térképből hívja a setMap() metódus null -t adja át argumentumként.
marker.setMap(null);
Ne feledje, hogy a fentiek A módszer nem törli a jelölőt. Eltávolítja a jelölőt a térképről. Ha ehelyett törölni kívánja a jelölőt, akkor távolítsa el a térképről, majd állítsa a jelölőt magára null értékre.
Ha egy jelölőt szeretne kezelni jelölőkészletet, létre kell hoznia egy tömböt a jelölők megtartására. Ennek a tömbnek a segítségével hívhatja meg a setMap() -t a tömb minden jelzőjén egymás után, amikor el kell távolítania a jelölőket. A jelölőket törölheti úgy, hogy eltávolítja őket a térképről, majd az “s length tömböt 0 értékre állítja, amely eltávolítja az összes hivatkozást a markerek.
Példa megtekintése
Marker animálása
Animálhatja a jelzőket úgy, hogy dinamikus mozgást mutassanak különböző körülmények között. A jelölő animált, használja az “s animation tulajdonságot, google.maps.Animation típusú. A következő Animation értékek támogatottak:
-
DROPazt jelzi, hogy a jelölőnek le kell esnie a a térképet a végleges helyére, amikor először feltette a térképre. Az animáció megszűnik, amint a marker megpihent, ésanimationvisszaáll anullértékre. Ezt az animációs típust általában aMarkerlétrehozása során adják meg. -
BOUNCEazt jelzi, hogy a jelölőnek be kell ugrania hely. A visszapattanó jelző addig folytatódik, amíganimationtulajdonságát kifejezettennullértékre állítja.
Ön animációt kezdeményezhet egy meglévő markeren úgy, hogy setAnimation() hívja az Marker objektumra.
Ha sok jelölője van , lehet, hogy nem akarja egyszerre a térképre dobni őket. Használhatja a setTimeout() elemet a jelölők animációinak elhelyezéséhez az alábbiak szerint:
function drop() { for (var i =0; i markerArray.length; i++) { setTimeout(function() { addMarkerMethod(); }, i * 200); }}
Példa megtekintése
Jelölőkép testreszabása
Ha betűt vagy számot szeretne megjeleníteni a jelölőn, használhat jelölőcímkét.Ha nagyobb testreszabásra van szükség, definiálhat egy ikont, amelyet megjelenít az alapértelmezett jelölő kép helyett. Az ikon meghatározása számos olyan tulajdonság beállításával jár, amelyek meghatározzák a marker vizuális viselkedését.
Az alábbi szakaszok jelölő címkéket, egyszerű ikonokat, összetett ikonokat és szimbólumokat (vektoros ikonokat) írnak le. h3> Jelzőcímkék
A jelölőcímke egy betű vagy szám, amely a jelölőn belül jelenik meg. Az ebben a szakaszban található marker képen egy jelölőcímke látható, rajta a “B” betűvel. Megadhat egy jelölő címkét karakterláncként vagy MarkerLabel objektumként, amely tartalmaz egy karakterláncot és más címke tulajdonságokat.
Jelző létrehozásakor megadhat egy label tulajdonság az MarkerOptions objektumban. Alternatív megoldásként felhívhatja a setLabel() -t a Marker objektumon a címke beállításához egy meglévő jelölőn.
A következő példa címkézett markereket jelenít meg, amikor a felhasználó rákattint a térképre :
Egyszerű ikonok
A legalapvetőbb esetben egy ikon jelezheti a használni kívánt képet az alapértelmezett Google Maps nyomógomb ikon helyett. Ilyen ikon megadásához állítsa az “s icon jelölőt egy kép URL-jére. A Maps JavaScript API automatikusan méretezi az ikont.
Komplex ikonok
Érdemes összetett alakzatokat megadnia a kattintható régiók megjelölésére, és meg kell határoznia, hogy az ikonoknak hogyan kell megjelenniük a többi fedvényhez képest (azok “sorrendje”). Az így megadott ikonoknak be kell állítaniuk a icon tulajdonságok egy Icon típusú objektumhoz.
Icon objektumok definiálják egy képet. Meghatározzák az ikon size ikont, az ikon origin ikont is (ha a kívánt kép egy nagyobb kép része kép például egy sprite-ben), és a anchor ahol az ikon hotspotját kell elhelyezni (ami az eredeten alapul).
Ha egyéni jelölővel ellátott címkét használ, a labelOrigin tulajdonsággal elhelyezheti a címkét a objektum.
MarkerImage objektumok konvertálása Icon
A Maps JavaScript API 3.10-es verziójáig az összetett ikonok MarkerImage objektumok voltak. A Icon objektum literál hozzá lett adva a 3.10-es verzióhoz, és a MarkerImage -et váltja fel a 3.11-es verziótól kezdve. A Icon objektum literálok ugyanazokat a paramétereket támogatják, mint a MarkerImage, lehetővé téve a MarkerImage konvertálását a Icon fájlba a konstruktor eltávolításával, az előző paraméterek beburkolásával a {} “s fájlokba és az egyes paraméterek nevének hozzáadásával. Például:
válik
szimbólummá
A raszteres képek mellett egy marker támogatja a Symbols nevű vektorutak megjelenítését . Egy vektoros útvonal megjelenítéséhez adjon át egy Symbol objektum literált a kívánt elérési úttal a “s icon marker tulajdonsághoz. Használhatja a google.maps.SymbolPath egyik előre definiált útvonalát, vagy meghatározhat egy egyéni útvonalat az SVG elérési útvonal jelölésével.
További információért lásd a szimbólumok dokumentációját.
Készítsen egy jelölővel húzható
Ha lehetővé teszi a felhasználók számára, hogy jelölőt húzzanak a térkép másik helyére, állítsák a draggable értéket true
További jelölő testreszabás
Teljesen testreszabott jelölővel kapcsolatban lásd a testreszabott előugró példát.