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 festlegen, in der sie angezeigt werden. Das folgende Beispiel zeigt eine einfache Markierung:

In 3D-Karten in der Maps JavaScript API 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, Core-Animations-APIs usw.) Niedrig (weniger anpassbar)
Leistung Geringere 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 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.

function initMap() {
  const map = new Map3DElement({
    center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
    tilt: 67.5,
    range: 45000,
    mode: MapMode.HYBRID
  });

  const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  interactiveMarker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

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},
    collisionBehavior: google.maps.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