Znaczniki

Używaj znaczników, aby przyciągać uwagę użytkownika do lokalizacji na mapie. Ten przewodnik pokazuje, jak używać i dostosowywać znaczniki na mapach 3D. Możesz kontrolować kształt, rozmiar i kolor znaczników, a także wysokość, na której się pojawiają. Poniższy przykład pokazuje podstawowy znacznik:

Mapy 3D w JavaScript udostępniają 2 różne klasy znaczników, z których każda jest zoptymalizowana pod kątem konkretnych zastosowań. W tabeli poniżej znajdziesz różnice i kompromisy między tymi 2 dostępnymi klasami:

Możliwości MarkerElement Marker3DElement
Dostosowywanie Wysoki (obsługuje niestandardowe elementy HTML, podstawowe interfejsy API animacji itp.) Niska (mniej opcji dostosowywania)
Wyniki mniejsza wydajność interakcji (spadek liczby klatek na sekundę przy dużej liczbie znaczników); Wyższa wydajność interakcji (zoptymalizowana pod kątem renderowania dużych zbiorów danych)
Zalecana pojemność Niezawodna wydajność interakcji w przypadku około 1000 znaczników Zalecane w przypadku obsługi ponad 1000 markerów

Dostosowywanie koloru, skali i ikony

Możesz dostosować tło, glif, kolor obramowania i rozmiar znacznika domyślnego.

Niestandardowe znaczniki

Zastąp domyślną ikonę znacznika niestandardowym zasobem SVG.

Markery z grafiką

Ustawianie wysokości znacznika

Wysokość znacznika możesz ustawić, wyciągając go i określając wysokość.

Wytłaczany znacznik

Reagowanie znaczników na kliknięcia i zdarzenia klawiatury

Spraw, aby znacznik reagował na kliknięcia i zdarzenia klawiatury, dodając click event listener.

const interactiveMarker = new Marker3DInteractiveElement({
    position,
    gmpPopoverTargetElement: popover,
});

Ustawianie zachowania przy kolizji znaczników

Określ, jak znacznik ma się zachowywać, gdy nakłada się na inny znacznik lub etykietę na mapie.

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});

Skuteczność znacznika

Znaczniki niestandardowe HTML (MarkerElement) mają mniejszą wydajność niż standardowe znaczniki 3D (Marker3DElement). W przypadku aplikacji z ponad 1000 znaczników zdecydowanie zalecamy używanie Marker3dElementklasy, aby zapewnić optymalną wydajność.

Następny krok