Konfliktverhalten und Sichtbarkeit von Markierungen konfigurieren

Auf dieser Seite erfahren Sie, wie Sie die folgenden Aspekte erweiterter Markierungen steuern können:

Konfliktverhalten für eine Markierung konfigurieren
Höhe der Markierung festlegen
Sichtbarkeit von Markierungen nach Kartenzoomstufe steuern

Konfliktverhalten für eine Markierung konfigurieren

Hierbei wird festgelegt, wie eine Markierung angezeigt werden soll, wenn sie sich mit einer anderen Markierung überschneidet. Das Konfliktverhalten kann nur für Vektorkarten konfiguriert werden.

Dazu legen Sie für AdvancedMarkerView.collisionBehavior einen der folgenden Werte fest:

REQUIRED: Das ist die Standardeinstellung, bei der die Markierung immer angezeigt wird, auch bei Konflikten mit anderen Markierungen.
OPTIONAL_AND_HIDES_LOWER_PRIORITY: Die Markierung wird nur angezeigt, wenn sie sich nicht mit anderen Markierungen überschneidet. Wenn sich zwei Markierungen dieses Typs überschneiden, wird die Markierung mit dem höheren zIndex angezeigt. Falls beide denselben zIndex haben, wird die Markierung mit der niedrigeren vertikalen Bildschirmposition angezeigt.
REQUIRED_AND_HIDES_OPTIONAL: Die Markierung wird unabhängig von Konflikten mit anderen Markierungen immer angezeigt. OPTIONAL_AND_HIDES_LOWER_PRIORITY-Markierungen oder Labels, die sich mit ihr überschneiden würden, werden ausgeblendet.

Das folgende Beispiel zeigt, wie das Konfliktverhalten für eine Markierung konfiguriert wird:

TypeScript

const advancedMarker = new google.maps.marker.AdvancedMarkerView({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});index.ts

JavaScript

const advancedMarker = new google.maps.marker.AdvancedMarkerView({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.js

Höhe der Markierung festlegen

Bei Vektorkarten können Sie die Höhe festlegen, in der eine Markierung angezeigt wird. Das ist hilfreich, um Markierungen in Bezug auf 3D-Karteninhalte korrekt darzustellen. Wenn Sie die Höhe für eine Markierung festlegen möchten, geben Sie für die Option MarkerView.position einen LatLngAltitude-Wert an:

TypeScript

const pinView = new google.maps.marker.PinView({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new google.maps.marker.AdvancedMarkerView({
    map,
    content: pinView.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral,
});index.ts

JavaScript

const pinView = new google.maps.marker.PinView({
  background: "#4b2e83",
  borderColor: "#b7a57a",
  glyphColor: "#b7a57a",
  scale: 2.0,
});
const markerView = new google.maps.marker.AdvancedMarkerView({
  map,
  content: pinView.element,
  // Set altitude to 20 meters above the ground.
  position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});index.js

Sichtbarkeit von Markierungen nach Kartenzoomstufe steuern

Hier können Sie sehen, wie sich die Sichtbarkeit der Markierungen ändert (zoomen Sie zuerst heraus):

Um die Sichtbarkeit einer erweiterten Markierung zu steuern, erstellen Sie einen zoom_changed-Listener und fügen eine bedingte Funktion hinzu, um AdvancedMarkerView.map auf null zu setzen, wenn der Zoom die angegebene Stufe überschreitet, wie im folgenden Beispiel gezeigt:

TypeScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        markerView01.map = zoom > 14 ? map : null;
        markerView02.map = zoom > 15 ? map : null;
        markerView03.map = zoom > 16 ? map : null;
        markerView04.map = zoom > 17 ? map : null;
    }
});index.ts

JavaScript

map.addListener("zoom_changed", () => {
  const zoom = map.getZoom();

  if (zoom) {
    // Only show each marker above a certain zoom level.
    markerView01.map = zoom > 14 ? map : null;
    markerView02.map = zoom > 15 ? map : null;
    markerView03.map = zoom > 16 ? map : null;
    markerView04.map = zoom > 17 ? map : null;
  }
});index.js

Nächste Schritte

Markierungen anklickbar und zugänglich machen