Znaczniki

Używaj znaczników, aby przyciągnąć 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 Maps 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.) Niski (mniej możliwości dostosowania)
Wydajność Niższa wydajność interakcji (spadek liczby klatek na sekundę przy dużej liczbie znaczników) Większa wydajność interakcji (optymalizacja pod kątem renderowania dużych zbiorów danych)
Zalecany rozmiar Niezawodne działanie interakcji do około 1000 znaczników. Zalecane w przypadku obsługi ponad 1000 znaczników

Dostosowywanie koloru, skali i obrazu ikony

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

Znaczniki niestandardowe

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

Znaczniki z grafiką

Ustawianie wysokości znacznika

Możesz ustawić wysokość znacznika, wyciągając go i ustawiając wysokość.

Wytłoczony znacznik

Reagowanie znaczników na kliknięcia i zdarzenia klawiatury

Aby znacznik reagował na kliknięcia i zdarzenia klawiatury, dodaj detektor zdarzeń click.

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

Ustawianie zachowania przy kolizji znaczników

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

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

Skuteczność znaczników

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

Następny krok