Markierungen

Mit Markierungen können Sie die Aufmerksamkeit der Nutzer auf einen Ort auf einer Karte lenken. In dieser Anleitung wird gezeigt, wie Sie Markierungen in 3D-Karten verwenden und anpassen. Sie können die Form, Größe und Farbe von Markierungen sowie die Höhe, in der sie angezeigt werden, festlegen. Das folgende Beispiel zeigt eine einfache Markierung:

In der Maps JavaScript API für 3D-Karten gibt es zwei verschiedene Markierungsklassen, die jeweils für bestimmte Anwendungsfälle optimiert sind. In der folgenden Tabelle sind die Unterschiede und Kompromisse zwischen den beiden verfügbaren Klassen aufgeführt:

Funktion MarkerElement Marker3DElement
Anpassung Hoch (unterstützt benutzerdefinierte HTML-Elemente, APIs für Kernanimationen usw.) Niedrig (weniger anpassbar)
Leistung Niedrigere Interaktionsleistung (FPS sinkt bei einer großen Anzahl von Markierungen) Höhere Interaktionsleistung (für das Rendering großer Datensätze optimiert)
Empfohlene Kapazität Zuverlässige Interaktionsleistung bei bis zu etwa 1.000 Markierungen Empfohlen für die Verarbeitung von mehr als 1.000 Markierungen

Farbe, Größe und Symbolbild anpassen

Sie können Hintergrund, Glyphe, Rahmenfarbe und Größe der Standardmarkierung anpassen.

Benutzerdefinierte Markierungen

Ersetzen Sie das Standardmarkierungssymbol durch eine benutzerdefinierte SVG-Ressource.

Markierungen mit Grafiken

Höhe der Markierung festlegen

Sie können die Höhe der Markierung festlegen, indem Sie sie extrudieren und die Höhe festlegen.

Extrudierte Markierung

Markierungen auf Klick- und Tastaturereignisse reagieren lassen

Wenn eine Markierung auf Klicks und Tastaturereignisse reagieren soll, fügen Sie einen click-Ereignis-Listener hinzu.

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

Konfliktverhalten von Markierungen konfigurieren

Sie können festlegen, was passieren soll, wenn sich eine Markierung mit einer anderen Markierung oder einem Label überschneidet.

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

Leistung von Markierungen

Benutzerdefinierte HTML-Markierungen (MarkerElement) bieten eine geringere Leistung als Standard-3D-Markierungen (Marker3DElement). Für Anwendungen mit mehr als 1.000 Markierungen wird dringend die Verwendung der Klasse Marker3dElement empfohlen, um eine optimale Leistung zu gewährleisten.

Nächster Schritt