Advanced Markers

Klasa AdvancedMarkerElement

google.maps.marker.AdvancedMarkerElement class
extends HTMLElement
implements AdvancedMarkerElementOptions
library "marker"

Pokazuje pozycję na mapie. Pamiętaj, że aby wyświetlać AdvancedMarkerElement, musisz ustawić position.

   
<gmp-advanced-marker
  anchor-left="string"
  anchor-top="string"
  gmp-clickable
  position="lat,lng"
  title="string">
</gmp-advanced-marker>
 
const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");
AdvancedMarkerElement
AdvancedMarkerElement([options])
Parametry:
Tworzy AdvancedMarkerElement z określonymi opcjami. Jeśli mapa jest określona, AdvancedMarkerElement jest dodawany do mapy podczas tworzenia.
anchorLeft
attr: anchor-left
Typ: string optional
Domyślnie: „-50%”
Wartość długości i procentu w CSS, która służy do przesunięcia punktu zakotwiczenia znacznika względem jego lewego górnego rogu. Jest to przydatne, gdy używasz elementu wizualnego, który ma punkt zakotwiczenia inny niż typowy dolny środkowy punkt domyślnego znacznika.
Atrybut HTML: anchor-left="string"
anchorTop
attr: anchor-top
Typ: string optional
Domyślnie: „-100%”
Wartość długości i procentu w CSS, która służy do przesunięcia punktu zakotwiczenia znacznika względem jego lewego górnego rogu. Jest to przydatne, gdy używasz elementu wizualnego, który ma punkt zakotwiczenia inny niż typowy dolny środkowy punkt domyślnego znacznika.
Atrybut HTML: anchor-top="string"
collisionBehavior
Typ: CollisionBehavior optional
Zobacz AdvancedMarkerElementOptions.collisionBehavior.
gmpClickable
attr: gmp-clickable
Typ: boolean optional
Zobacz AdvancedMarkerElementOptions.gmpClickable.
Atrybut HTML: gmp-clickable
gmpDraggable
Typ: boolean optional
Zobacz AdvancedMarkerElementOptions.gmpDraggable.
map
Typ: Map optional
Zobacz AdvancedMarkerElementOptions.map.
position
attr: position
Zobacz AdvancedMarkerElementOptions.position.
Atrybut HTML:
  • position="lat,lng"
  • position="lat,lng,altitude"
title
attr: title
Typ: string
Zobacz AdvancedMarkerElementOptions.title.
Atrybut HTML: title="string"
zIndex
Typ: number optional
Zobacz AdvancedMarkerElementOptions.zIndex.
element
readonly
To jest pole tylko do odczytu. Element DOM, który obsługuje widok.
content
Typ: Node optional
Zobacz AdvancedMarkerElementOptions.content.
addListener
addListener(eventName, handler)
Parametry:
  • eventName: string – zdarzenie zarejestrowane.
  • handler: Function Funkcja do obsługi zdarzeń.
Zwracana wartość: MapsEventListener – wynikowy detektor zdarzeń.
Dodaje podaną funkcję detektora do podanej nazwy zdarzenia w systemie zdarzeń Map.
Dziedziczone: addEventListener, removeEventListener
click
function(event)
Argumenty:
To zdarzenie jest wywoływane po kliknięciu elementu AdvancedMarkerElement.

Niedostępne w przypadku addEventListener() (użyj gmp-click).
drag
function(event)
Argumenty:
To zdarzenie jest wywoływane wielokrotnie, gdy użytkownik przeciąga element AdvancedMarkerElement.

Niedostępne w przypadku: addEventListener().
dragend
function(event)
Argumenty:
To zdarzenie jest wywoływane, gdy użytkownik przestaje przeciągać element AdvancedMarkerElement.

Niedostępne w przypadku: addEventListener().
dragstart
function(event)
Argumenty:
To zdarzenie jest wywoływane, gdy użytkownik zaczyna przeciągać element AdvancedMarkerElement.

Niedostępne w przypadku: addEventListener().
gmp-click
function(event)
Argumenty:
To zdarzenie jest wywoływane po kliknięciu elementu AdvancedMarkerElement. Najlepiej używać z addEventListener() (zamiast addListener()).

Interfejs AdvancedMarkerElementOptions

Interfejs google.maps.marker.AdvancedMarkerElementOptions

Opcje tworzenia obiektu AdvancedMarkerElement.
anchorLeft
opcjonalne
Typ: string optional
Domyślnie: „-50%”
Wartość długości i procentu w CSS, która służy do przesunięcia punktu zakotwiczenia znacznika względem jego lewego górnego rogu. Jest to przydatne, gdy używasz elementu wizualnego, który ma punkt zakotwiczenia inny niż typowy dolny środkowy punkt domyślnego znacznika.
anchorTop
opcjonalne
Typ: string optional
Domyślnie: „-100%”
Wartość długości i procentu w CSS, która służy do przesunięcia punktu zakotwiczenia znacznika względem jego lewego górnego rogu. Jest to przydatne, gdy używasz elementu wizualnego, który ma punkt zakotwiczenia inny niż typowy dolny środkowy punkt domyślnego znacznika.
collisionBehavior
opcjonalne
Typ: CollisionBehavior optional
Wyliczenie określające, jak AdvancedMarkerElement powinien się zachowywać, gdy koliduje z innym AdvancedMarkerElement lub z etykietami mapy podstawowej na mapie wektorowej.

Uwaga: kolizja AdvancedMarkerElement z AdvancedMarkerElement działa zarówno na mapach rastrowych, jak i wektorowych, ale kolizja AdvancedMarkerElement z etykietą mapy podstawowej działa tylko na mapach wektorowych.
content
opcjonalne
Typ: Node optional
Domyślnie: PinElement
Element DOM, który stanowi podstawę wizualną elementu AdvancedMarkerElement.

Uwaga: AdvancedMarkerElement nie klonuje przekazanego elementu DOM. Gdy element DOM zostanie przekazany do elementu AdvancedMarkerElement, przekazanie tego samego elementu DOM do innego elementu AdvancedMarkerElement spowoduje przeniesienie elementu DOM i sprawi, że poprzedni element AdvancedMarkerElement będzie wyglądał na pusty.
gmpClickable
opcjonalne
Typ: boolean optional
Domyślnie: false
Jeśli true, AdvancedMarkerElement będzie można kliknąć i wywołać zdarzenie gmp-click. Będzie on też interaktywny na potrzeby ułatwień dostępu (np. umożliwiając nawigację za pomocą klawiatury i klawiszy strzałek).
gmpDraggable
opcjonalne
Typ: boolean optional
Domyślnie: false
Jeśli true, AdvancedMarkerElement można przeciągnąć.

Uwaga: AdvancedMarkerElement z wysokością nie można przeciągać.
map
opcjonalne
Typ: Map optional
Mapa, na której ma być wyświetlany element AdvancedMarkerElement. Mapa jest wymagana do wyświetlania AdvancedMarkerElement i można ją podać, ustawiając AdvancedMarkerElement.map, jeśli nie została podana podczas tworzenia.
position
opcjonalne
Ustawia pozycję elementu AdvancedMarkerElement. Obiekt AdvancedMarkerElement można utworzyć bez pozycji, ale nie będzie on wyświetlany, dopóki nie zostanie podana jego pozycja – na przykład w wyniku działań lub wyborów użytkownika. Pozycję AdvancedMarkerElement można podać, ustawiając AdvancedMarkerElement.position, jeśli nie została podana podczas tworzenia.

Uwaga: AdvancedMarkerElement z wysokością jest obsługiwany tylko na mapach wektorowych.
title
opcjonalne
Typ: string optional
Tekst po najechaniu kursorem. Jeśli podasz tekst ułatwień dostępu (np. do użycia z czytnikami ekranu), zostanie on dodany do elementu AdvancedMarkerElement z podaną wartością.
zIndex
opcjonalne
Typ: number optional
Wszystkie obiekty AdvancedMarkerElement są wyświetlane na mapie w kolejności ich wartości zIndex, przy czym obiekty o wyższych wartościach są wyświetlane przed obiektami AdvancedMarkerElement o niższych wartościach. Domyślnie AdvancedMarkerElement są wyświetlane zgodnie z ich pozycją w pionie na ekranie, przy czym AdvancedMarkerElement znajdujące się niżej są wyświetlane przed AdvancedMarkerElement znajdującymi się wyżej. Połączenie znaczników z wyraźnym parametrem zIndex i znaczników bez tego parametru może prowadzić do nieoczekiwanych efektów wizualnych. Aby zapewnić przewidywalne działanie, zalecamy ustawienie parametru zIndex dla wszystkich znaczników lub pozostawienie go bez ustawienia. Pamiętaj, że zIndex służy też do określania względnego priorytetu między znacznikami zaawansowanymi CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY. Wyższa wartość zIndex oznacza wyższy priorytet.

Klasa AdvancedMarkerClickEvent

google.maps.marker.AdvancedMarkerClickEvent class
extends Event
library "marker"

To zdarzenie jest tworzone po kliknięciu znacznika zaawansowanego. Pozycję znacznika możesz sprawdzić za pomocą event.target.position.

const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker");

Klasa PinElement

google.maps.marker.PinElement class
extends HTMLElement
implements PinElementOptions
library "marker"

PinElement reprezentuje element DOM, który składa się z kształtu i glifu. Kształt ma taki sam styl dymka jak domyślny AdvancedMarkerElement lub Marker3DElement. Glif to opcjonalny element DOM wyświetlany w kształcie dymka. PinElement może mieć inny format obrazu w zależności od PinElement.scale.

const {PinElement} = await google.maps.importLibrary("marker");
PinElement
PinElement([options])
Parametry:
background
Typ: string optional
Kolor tła kształtu pinezki. Zobacz PinElementOptions.background.
borderColor
Typ: string optional
Kolor obramowania kształtu pinezki. Zobacz PinElementOptions.borderColor.
glyphColor
Typ: string optional
Kolor glifu pinezki. Zobacz PinElementOptions.glyphColor.
glyphSrc
Typ: URL|string optional
Źródło obrazu glifu, który ma być wyświetlany w pinezce. Zobacz PinElementOptions.glyphSrc.
glyphText
Typ: string optional
Tekst wyświetlany w pinezce. Zobacz PinElementOptions.glyphText.
scale
Typ: number optional
Zobacz PinElementOptions.scale.
element
readonly
To jest pole tylko do odczytu. Element DOM, który obsługuje widok.
glyph
Typ: string|Element|URL optional
Zobacz PinElementOptions.glyph.
Dziedziczone: addEventListener, removeEventListener

PinElementOptions interface

Interfejs google.maps.marker.PinElementOptions

Opcje tworzenia elementu PinElement.
background
opcjonalne
Typ: string optional
Kolor tła kształtu pinezki. Obsługuje dowolną wartość koloru CSS.
borderColor
opcjonalne
Typ: string optional
Kolor obramowania kształtu pinezki. Obsługuje dowolną wartość koloru CSS.
glyph
opcjonalne
Typ: string|Element|URL optional
Element DOM wyświetlany w pinezce.
glyphColor
opcjonalne
Typ: string optional
Kolor glifu. Obsługuje dowolną wartość koloru CSS.
glyphSrc
opcjonalne
Typ: URL|string optional
Źródło obrazu glifu, który ma być wyświetlany w pinezce.
glyphText
opcjonalne
Typ: string optional
Tekst wyświetlany w pinezce.
scale
opcjonalne
Typ: number optional
Domyślnie: 1
Skala pinezki.