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 interfejsie Maps JavaScript API 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 2 dostępnymi klasami:

Możliwości MarkerElement Marker3DElement
Dostosowywanie Wysokie (obsługuje niestandardowe elementy HTML, podstawowe interfejsy API animacji itp.) Niskie (mniej możliwości dostosowania)
Skuteczność Niższa skuteczność interakcji (spadek liczby klatek na sekundę przy dużej liczbie znaczników) Wyższa skuteczność interakcji (zoptymalizowana pod kątem renderowania dużych zbiorów danych)
Zalecana pojemność Niezawodna skuteczność interakcji do około 1000 znaczników Zalecana do obsługi ponad 1000 znaczników

Dostosowywanie koloru, skali i 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

Możesz ustawić wysokość znacznika, 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',
});

Skuteczność znacznika

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

Następny krok