Places Details UI Kit (experimentell)

Kompakte Ansicht der Ortsdetails

Mit dem UI-Kit für Place Details können Sie eine einzelne UI-Komponente hinzufügen, über die Ortsdetails in Ihrer App angezeigt werden. Das UI-Kit kann unabhängig oder in Verbindung mit anderen APIs und Diensten der Google Maps Platform verwendet werden. Das UI-Kit nimmt entweder eine Orts-ID oder Breiten-/Längengradkoordinaten entgegen und gibt gerenderte Place Details-Informationen zurück.

Das UI-Kit bietet eine kompakte Ansicht, die horizontal oder vertikal angezeigt werden kann. Sie können die Darstellung der Ortsdetails anpassen, indem Sie benutzerdefinierte PlaceWidgetTheme-Werte angeben. Sie können auch anpassen, welche Felder für Details zum Ort enthalten sind. Geben Sie dazu eine Liste von PlaceDetailsCompactView-Einträgen an, die jeweils einer Information zum Ort entsprechen.

Abrechnung

Wenn Sie das UI-Kit für Ortsdetails für Ortsdetails verwenden, werden Ihnen die Kosten für jeden Ort in Rechnung gestellt, der über das Widget geladen wird. Wenn Sie denselben Ort mehrmals laden, wird Ihnen jede Anfrage in Rechnung gestellt.

Places UI Kit aktivieren

Bevor Sie das Places UI Kit verwenden können, müssen Sie Folgendes tun:

Beispiele für das UI-Kit „Place Details“

Das Widget „Place Details“ ist eine Swift-UI-Ansicht. Sie können das Erscheinungsbild der Informationen zu Details zu Örtlichkeiten an Ihre Anforderungen und das Erscheinungsbild Ihrer App anpassen.

Sie können die Ausrichtung (horizontal oder vertikal), Themaüberschreibungen und Inhalte angeben. Die Inhaltsoptionen sind „Medien“, „Adresse“, „Bewertung“, „Preis“, „Art“, „Barrierefreier Eingang“, „Google Maps-Link“ und „Google Maps-Link für Wegbeschreibung“. [Beispiel für eine Anpassung ansehen]().

Die Standardposition ist vertikal. Wenn Sie ein horizontales Layout wünschen, geben Sie in PlaceDetailsCompactView die Zahl orientation: .horizontal an.

In diesem Beispiel wird eine kompakte Ansicht mit einem vertikalen Layout erstellt. 

       
  // Callback for the place details widget.
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  var theme: PlaceWidgetTheme {
    if customTheme {
      var theme = PlaceWidgetTheme()
      theme.colorSurfaceContainerLowest = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (colorScheme == .dark ? .white : .black)
      theme.colorOnSurface = (colorScheme == .dark ? .yellow : .red)
      theme.colorOnSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      theme.colorOnSecondaryContainer = (colorScheme == .dark ? .white : .red)
      theme.colorSecondaryContainer = (colorScheme == .dark ? .green : .purple)
      theme.colorPositive = (colorScheme == .dark ? .yellow : .red)
      theme.colorPrimary = (colorScheme == .dark ? .yellow : .purple)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.labelLarge = .system(size: 15)
      theme.headlineMedium = .system(size: 14)
      theme.bodyLarge = .system(size: 13)
      theme.bodyMedium = .system(size: 12)
      theme.bodySmall = .system(size: 11)
      theme.attributionColorLight = .black
      theme.attributionColorDark = .white
      return theme
    } else {
      return PlaceWidgetTheme()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

In diesem Beispiel wird eine kompakte Ansicht mit einem horizontalen Layout erstellt. 

  // Callback for the place details widget.
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  var theme: PlaceWidgetTheme {
    if customTheme {
      var theme = PlaceWidgetTheme()
      theme.colorSurfaceContainerLowest = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (colorScheme == .dark ? .white : .black)
      theme.colorOnSurface = (colorScheme == .dark ? .yellow : .red)
      theme.colorOnSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      theme.colorOnSecondaryContainer = (colorScheme == .dark ? .white : .red)
      theme.colorSecondaryContainer = (colorScheme == .dark ? .green : .purple)
      theme.colorPositive = (colorScheme == .dark ? .yellow : .red)
      theme.colorPrimary = (colorScheme == .dark ? .yellow : .purple)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.labelLarge = .system(size: 15)
      theme.headlineMedium = .system(size: 14)
      theme.bodyLarge = .system(size: 13)
      theme.bodyMedium = .system(size: 12)
      theme.bodySmall = .system(size: 11)
      theme.attributionColorLight = .black
      theme.attributionColorDark = .white
      return theme
    } else {
      return PlaceWidgetTheme()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

Beispiel für eine Anpassung

In diesem Beispiel wird gezeigt, wie Sie die Standardstilattribute anpassen.

  // Callback for the place details widget.
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var theme: PlaceWidgetTheme {
      var theme = PlaceWidgetTheme()
      theme.colorSurfaceContainerLowest = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (colorScheme == .dark ? .white : .black)
      theme.colorOnSurface = (colorScheme == .dark ? .yellow : .red)
      theme.colorOnSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      theme.colorOnSecondaryContainer = (colorScheme == .dark ? .white : .red)
      theme.colorSecondaryContainer = (colorScheme == .dark ? .green : .purple)
      theme.colorPositive = (colorScheme == .dark ? .yellow : .red)
      theme.colorPrimary = (colorScheme == .dark ? .yellow : .purple)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.labelLarge = .system(size: 15)
      theme.headlineMedium = .system(size: 14)
      theme.bodyLarge = .system(size: 13)
      theme.bodyMedium = .system(size: 12)
      theme.bodySmall = .system(size: 11)
      theme.attributionColorLight = .black
      theme.attributionColorDark = .white
      return theme
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }