Znaczniki

Używaj znaczników, aby zwracać uwagę użytkowników na lokalizację 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 przedstawia podstawowy znacznik:

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

Możliwości MarkerElement Marker3DElement
Dostosowywanie Wysokie (obsługuje niestandardowe elementy HTML, podstawowe interfejsy API animacji itp.) Niskie (mniejsze możliwości dostosowywania)
Wydajność Niższa 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 przy maksymalnie ok. 1000 znaczników Zalecana do obsługi ponad 1000 znaczników

Dostosowywanie spersonalizowanych kolorów, skali i obrazu ikony

Dostosuj tło, glif, kolor obramowania i rozmiar znacznika domyślnego.

Niestandardowe znaczniki

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

Markery z grafiką

Ustawianie wysokości znacznika

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

Wytłaczany 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 ma się zachowywać, gdy koliduje z innym znacznikiem lub etykietą mapy.

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

Wydajność znaczników

Niestandardowe znaczniki HTML (MarkerElement) mają niższą 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