Konfliktverhalten, Höhe und Sichtbarkeit konfigurieren

Plattform auswählen: Android iOS JavaScript

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

Mit dem Konfliktverhalten wird angegeben, 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 AdvancedMarkerElement.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 dann 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 AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.ts

JavaScript

const advancedMarker = new AdvancedMarkerElement({
    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 pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new AdvancedMarkerElement({
    map,
    content: pin.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 pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});
const markerView = new AdvancedMarkerElement({
    map,
    content: pin.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 Sie eine bedingte Funktion hinzu, um AdvancedMarkerElement.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.
        marker01.map = zoom > 14 ? map : null;
        marker02.map = zoom > 15 ? map : null;
        marker03.map = zoom > 16 ? map : null;
        marker04.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.
        marker01.map = zoom > 14 ? map : null;
        marker02.map = zoom > 15 ? map : null;
        marker03.map = zoom > 16 ? map : null;
        marker04.map = zoom > 17 ? map : null;
    }
});
index.js

Nächste Schritte

Markierungen anklickbar und zugänglich machen