Markierungen

Mit Markierungen können Sie die Aufmerksamkeit eines Nutzers auf einen Ort auf einer Karte lenken. In diesem Leitfaden wird beschrieben, 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:

Die API „3D-Karten in Google Maps – JavaScript“ bietet zwei verschiedene Markierungsklassen, die jeweils für bestimmte Anwendungsfälle optimiert sind. In der folgenden Tabelle sind die Unterschiede und Vor- und Nachteile der beiden verfügbaren Klassen aufgeführt:

Funktion MarkerElement Marker3DElement
Anpassung Hoch (unterstützt benutzerdefinierte HTML-Elemente, Core Animation APIs usw.) Niedrig (weniger anpassbar)
Leistung Geringere Interaktionsleistung (FPS-Abfall bei einer großen Anzahl von Markierungen) Höhere Interaktionsleistung (optimiert für das Rendern großer Datasets)
Empfohlene Kapazität Zuverlässige Interaktionsleistung 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 die Markierung extrudieren und die Höhe festlegen.

Extrudierte Markierung

Markierungen auf Klick- und Tastaturereignisse reagieren lassen

Sie können einen click-Event-Listener hinzufügen, damit Markierungen auf Klicks und Tastaturereignisse reagieren.

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 der Markierungen

Benutzerdefinierte HTML-Markierungen (MarkerElement) bieten eine geringere Leistung als standardmäßige 3D-Markierungen (Marker3DElement). Für Anwendungen mit mehr als 1.000 Markierungen wird die Klasse Marker3dElement dringend empfohlen, um eine optimale Leistung zu erzielen.

Nächster Schritt