Znaczniki

Używaj znaczników, aby przyciągać uwagę użytkownika do lokalizacji na mapie. Z tego przewodnika dowiesz się, 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 API Map Google 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 Wysoka (obsługuje niestandardowe elementy HTML, podstawowe interfejsy API animacji itp.) Niska (mniejsze możliwości dostosowania)
Wydajność Niższa wydajność interakcji (spadek liczby klatek na sekundę przy dużej liczbie znaczników) Wyższa wydajność interakcji (optymalizacja 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 HTML niestandardowe (MarkerElement) mają niższą wydajność niż standardowe znaczniki 3D (Marker3DElement). W przypadku aplikacji z ponad 1000 znaczników zdecydowanie zalecamy używanie Marker3dElement klasy, aby zapewnić optymalną wydajność.

Następny krok