Pop-ups

Plattform auswählen: Android iOS JavaScript

Karte von San Francisco mit Markierung und Popover über dem Ferry Building

In einem Popover werden Inhalte (in der Regel Text oder Bilder) für einen bestimmten Ort in einem Infofenster über der Karte angezeigt. Das Popover besteht aus einem Inhaltsbereich und einem Hinweisstrich. Der Hinweisstrich zeigt auf eine bestimmte Position auf der Karte.

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

Popover hinzufügen

Um ein Popover hinzuzufügen, erstellen Sie eine Popover-Entität und legen Sie die Optionen fest, einschließlich Position und Höhenmodus. Die Position ist ein LatLngAltitude-Objekt, das bestimmt, wo das Popover angezeigt wird. Sie können festlegen, wie die Höhe beim Ankern mit LatLngAltitude interpretiert wird, indem Sie den Höhenmodus festlegen. Wenn Sie an einer Markierung ankern, 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 eine View-Builder-Closure an die Popover-Entität oder den Modifikator .popover übergeben.

Einem LatLngAltitude-Objekt ein Popover hinzufügen

Im folgenden Codebeispiel wird einem LatLngAltitude-Objekt ein Popover 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(center: .init(latitude: 37.8270, longitude: -122.4230)),
      mode: .hybrid) {
        Popover(
          positionAnchor: alcatraz,
          isOpen: $isOpen
        ) {
          Text("Alcatraz Island")
        }
      }
  }
}

Einer Markierung ein Popover hinzufügen

Im folgenden Codebeispiel wird einer Markierung ein Popover 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(center: .init(latitude: 37.7955, longitude: -122.3937)),
      mode: .hybrid
    ) {
      Marker3D(position: ferryBuilding)
        .popover(isOpen: $isOpen) {
          Text("Ferry Building")
        }
        .onTap {
          isOpen.toggle()
        }
    }
  }
}