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:

Für 3D-Karten in der Maps JavaScript API stehen zwei verschiedene Markierungsklassen zur Verfügung, 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, wichtige Animations-APIs usw.) Niedrig (weniger anpassbar)
Leistung Geringere Interaktionsleistung (FPS-Einbrüche bei einer großen Anzahl von Markierungen) Höhere Interaktionsleistung (optimiert für das Rendern großer Datasets)
Empfohlene Kapazität Zuverlässige Interaktionsleistung bei bis zu etwa 1.000 Markierungen Empfohlen für die Verarbeitung von über 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

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 Kartenlabel überschneidet.

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

Marker-Leistung

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 Marker3dElement-Klasse empfohlen, um eine optimale Leistung zu erzielen.

Nächster Schritt