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 interfejsie Maps JavaScript API 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 (mniejsze możliwości dostosowania)
Wydajność Mniejsza 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ść Niezawodne działanie 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 clickevent 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

Markery HTML (MarkerElement) mają niższą wydajność niż standardowe markery 3D (Marker3DElement). W przypadku aplikacji z ponad 1000 markerów zdecydowanie zalecamy użycie Marker3dElementklasy, aby zapewnić optymalną wydajność.

Następny krok