„Place Details“-Komponente

Mit der Komponente „Place Details“ des Places UI Kits können Sie eine einzelne UI-Komponente hinzufügen, die Ortsdetails in Ihrer App anzeigt.

Kompaktkomponente „Ortsdetails“

Die PlaceDetailsCompactView rendert Details für einen ausgewählten Ort mit minimalem Platzbedarf. Das kann in einem Infofenster nützlich sein, in dem ein Ort auf einer Karte hervorgehoben wird, in sozialen Medien, wenn Sie beispielsweise einen Ort in einem Chat teilen, als Vorschlag für die Auswahl Ihres aktuellen Standorts oder in einem Medienartikel, um auf den Ort in Google Maps zu verweisen. In der PlaceDetailsCompactView können Name, Adresse, Bewertung, Typ, Preis, Symbol für Barrierefreiheit, Öffnungsstatus und ein einzelnes Foto angezeigt werden.

Die Komponente „Ortsdetails“ kann unabhängig oder in Verbindung mit anderen APIs und Diensten der Google Maps Platform verwendet werden. Die Komponente nimmt entweder eine Orts-ID oder Breiten- und Längengradkoordinaten entgegen und gibt gerenderte Place Details-Informationen zurück.

Die Komponente „Place Details“ bietet eine kompakte Ansicht, die horizontal oder vertikal angezeigt werden kann.

Die Inhalte und der visuelle Stil der „Place Details“-Komponente können an Ihren Anwendungsfall und Ihre visuellen Markenrichtlinien angepasst werden. Sie können die Darstellung der Details anpassen, indem Sie benutzerdefinierte PlacesMaterialTheme-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 „Place Details“ verwenden, werden Ihnen die Kosten für jeden Aufruf der Methode PlaceDetailsQuery in Rechnung gestellt. Wenn Sie denselben Ort mehrmals laden, wird Ihnen jede Anfrage in Rechnung gestellt.

Ihrer App Ortsdetails hinzufügen

Die Komponente „Place Details“ ist eine Swift-UI-Ansicht. Sie können das Erscheinungsbild der Informationen zu „Place Details“ 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“. Weitere Informationen zur Anpassung von Berichten

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.

Swift

      
  // 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: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      color.outlineDecorative = (colorScheme == .dark ? .white : .black)
      color.onSurface = (colorScheme == .dark ? .yellow : .red)
      color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
      color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
      color.positive = (colorScheme == .dark ? .yellow : .red)
      color.primary = (colorScheme == .dark ? .yellow : .purple)
      color.info = (colorScheme == .dark ? .yellow : .purple)
      var shape = PlacesMaterialShape()
      shape.cornerRadius = 10
      var font = PlacesMaterialFont()
      font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
      font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
      font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
      var attribution = PlacesMaterialAttribution()
      attribution.lightModeColor = .black
      attribution.darkModeColor = .white
      theme.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .openNowStatus()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

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

Swift

  // 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: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      color.outlineDecorative = (colorScheme == .dark ? .white : .black)
      color.onSurface = (colorScheme == .dark ? .yellow : .red)
      color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
      color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
      color.positive = (colorScheme == .dark ? .yellow : .red)
      color.primary = (colorScheme == .dark ? .yellow : .purple)
      color.info = (colorScheme == .dark ? .yellow : .purple)
      var shape = PlacesMaterialShape()
      shape.cornerRadius = 10
      var font = PlacesMaterialFont()
      font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
      font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
      font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
      var attribution = PlacesMaterialAttribution()
      attribution.lightModeColor = .black
      attribution.darkModeColor = .white
      theme.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
  }
  @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)
  }

Ortsdetails anpassen

Das Places UI Kit bietet einen Designsystemansatz für die visuelle Anpassung, der grob auf Material Design basiert (mit einigen Google Maps-spezifischen Modifikationen). Weitere Informationen finden Sie in der Material Design-Referenz zu Farbe und Typografie. Standardmäßig entspricht der Stil der visuellen Designsprache von Google Maps.

Optionen zur Anpassung von „Place Details“

Sie können die folgenden Stile anpassen:

Breite und Höhe

Für vertikale Ansichten wird eine Breite von 180 bis 300 Pixeln empfohlen. Für horizontale Ansichten wird eine Breite von 180 bis 500 Pixeln empfohlen.

Es empfiehlt sich, keine Höhe festzulegen. So wird die Höhe anhand des Inhalts im Fenster festgelegt, sodass alle Informationen angezeigt werden können.

Attributionsfarben

Gemäß den Google Maps-Nutzungsbedingungen müssen Sie für die Google Maps-Attribution eine der drei Markenfarben verwenden. Diese Attribution muss sichtbar und zugänglich sein, wenn Anpassungsänderungen vorgenommen wurden.

Sie haben die Wahl zwischen drei Markenfarben, die unabhängig für helle und dunkle Themen festgelegt werden können:

  • Helles Design: attributionColorLight mit Enumerationen für Weiß, Grau und Schwarz.
  • Dunkles Design: attributionColorDark mit Enumerationen für Weiß, Grau und Schwarz.

Beispiel für eine Anpassung

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

Swift

  // 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: PlacesMaterialTheme {
      var theme = PlacesMaterialTheme()
      theme.colorSurface = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (colorScheme == .dark ? .white : .black)
      theme.colorPrimary = (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.colorNegative = (colorScheme == .dark ? .white : .black)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.bodySmall = .system(size: 11)
      theme.bodyMedium = .system(size: 12)
      theme.labelLarge = .system(size: 13)
      theme.headlineMedium = .system(size: 14)
      theme.attributionColorLightTheme = .black
      theme.attributionColorDarkTheme = .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)
  }