Pop-ups

Plattform auswählen: Android iOS JavaScript

Karte von San Francisco mit Markierung und Pop-over über dem Ferry Building.

In einem Popover werden Inhalte (in der Regel Text oder Bilder) in einem Infoblasenfenster über der Karte an einem bestimmten Ort angezeigt. Das Pop-over besteht aus einem Inhaltsbereich und einem Hinweisstrich. Der Hinweisstrich zeigt auf eine bestimmte Position auf der Karte.

Normalerweise wird ein Pop-over mit dem Modifikator .popover an eine Markierung angehängt. Sie können ein Pop-over aber auch an eine bestimmte LatLng-Koordinate mit Höhe anhängen oder es von einer Markierung versetzen.

Pop-over hinzufügen

Um ein Pop-over hinzuzufügen, erstellen Sie eine Popover-Entität und legen Sie ihre Optionen fest, einschließlich Position und Höhenmodus. Die Position ist ein LatLngAltitude-Objekt, das bestimmt, wo das Pop-over angezeigt wird. Sie können festlegen, wie die Höhe beim Ankern nach LatLngAltitude interpretiert wird, indem Sie den Höhenmodus festlegen. Wenn die Verankerung an einer Markierung erfolgt, wird stattdessen die Position der Markierung verwendet.

Der Inhalt eines Popovers kann mit SwiftUI-Ansichten angepasst werden. Sie können benutzerdefinierte Layouts bereitstellen, indem Sie einen View-Builder-Closure an die Popover-Entität oder den .popover-Modifier übergeben.

LatLngAltitude-Objekt ein Pop-over hinzufügen

Im folgenden Codebeispiel wird einem LatLngAltitude-Objekt ein Pop-over hinzugefügt:

import GoogleMaps3D
import SwiftUI

struct SimpleCoordinatePopover: View {
  @State private var isOpen = true
  // Alcatraz Island coordinates
  private let alcatraz = LatLngAltitude(latitude: 37.8270, longitude: -122.4230)

  var body: some View {
    Map(initialCamera: .init(latitude: 37.8270, longitude: -122.4230)) {
      Popover(
        positionAnchor: alcatraz,
        isOpen: $isOpen
      ) {
        Text("Alcatraz Island")
      }
    }
  }
}

Infofenster zu einer Markierung hinzufügen

Im folgenden Codebeispiel wird einer Markierung ein Pop-over hinzugefügt:

import GoogleMaps3D
import SwiftUI

struct SimpleMarkerPopover: View {
  @State private var isOpen = false
  // Ferry Building coordinates
  private let ferryBuilding = LatLngAltitude(latitude: 37.7955, longitude: -122.3937)

  var body: some View {
    Map(initialCamera: .init(latitude: 37.7955, longitude: -122.3937)) {
      Marker(position: ferryBuilding)
        .popover(isOpen: $isOpen) {
          Text("Ferry Building")
        }
        .onTap {
          isOpen.toggle()
        }
    }
  }
}