„Place Details“-Komponente

Mit der Komponente „Place Details“ des Places UI Kits können Sie eine einzelne UI-Komponente hinzufügen, in der Ortsdetails in Ihrer App angezeigt werden. Diese Komponente ist anpassbar.

Die Komponente „Ortsdetails“ kann unabhängig oder in Verbindung mit anderen APIs und Diensten der Google Maps Platform verwendet werden. Die Komponente akzeptiert entweder eine Orts-ID, einen Ressourcennamen oder Breiten-/Längenkoordinaten und gibt gerenderte Ortsdetails zurück.

Die Komponente „Ortsdetails“ ist vollständig thematisierbar. Sie können Schriftarten, Farben und Eckenradien an Ihren Anwendungsfall und Ihre visuellen Markenrichtlinien anpassen. Sie können die Darstellung der Ortsdetails anpassen, indem Sie benutzerdefinierte PlacesMaterialTheme-Werte angeben. Sie können auch anpassen, welche Felder mit Ortsdetails enthalten sind, indem Sie eine Liste mit PlaceDetailsCompactView-Einträgen angeben, die jeweils einem Teil der Informationen entsprechen, die zum Ort angezeigt werden.

Layoutvarianten

Die Komponente „Ortsdetails“ unterstützt zwei Hauptlayoutvarianten:

• Kompakt:Ein Layout für die Vorschau wichtiger Informationen.
• Vollständig:Ein umfassendes Layout mit allen verfügbaren Ortsdetails.

Das kompakte Layout kann entweder vertikal oder horizontal angezeigt werden. So können Sie die Komponente in verschiedene Designlayouts und Bildschirmgrößen einfügen. Das vollständige Layout kann nur vertikal angezeigt werden.

Mit der Komponente „Ortsdetails“ haben Sie detaillierte Kontrolle über die in der Komponente angezeigten Inhalte. Jedes Element (z. B. Fotos, Rezensionen und Kontaktdaten) kann einzeln ein- oder ausgeblendet werden. So lässt sich das Erscheinungsbild der Komponenten und die Informationsdichte präzise anpassen.

Kompaktansicht für Ortsdetails

In der kompakten Ansicht von „Place Details“ (PlaceDetailsCompactView) werden Details für einen ausgewählten Ort auf minimalem Raum gerendert. Das kann in einem Infofenster nützlich sein, in dem ein Ort auf einer Karte hervorgehoben wird, in einem sozialen Medium wie dem Teilen eines Standorts in einem Chat, als Vorschlag für die Auswahl Ihres aktuellen Standorts oder in einem Medienartikel, um auf den Ort in Google Maps zu verweisen.

Vollständige Ansicht von Ortsdetails

Die vollständige Ansicht von Ortsdetails (PlaceDetailsView) bietet mehr Platz für die Anzeige von Ortsdetails und ermöglicht es Ihnen, mehr Arten von Informationen zu präsentieren.

Optionen für die Inhaltsanzeige

Mit den Enums in PlaceDetailsCompactContent oder PlaceDetailsContent können Sie angeben, welche Inhalte angezeigt werden sollen.

Abrechnung

Wenn Sie das Place Details UI Kit verwenden, wird Ihnen jeder Aufruf der Methode PlaceDetailsQuery in Rechnung gestellt. Wenn Sie denselben Ort mehrmals laden, wird Ihnen jede Anfrage in Rechnung gestellt.

Ortsdetails in Ihre App einfügen

Die Komponente „Place Details“ ist eine Swift-UI-Ansicht. Sie können das Erscheinungsbild der Ortsdetails an Ihre Bedürfnisse und das Design Ihrer App anpassen. Weitere Informationen

Sie können die Komponente „Ortsdetails“ mit einer Place ID, einem Ressourcennamen oder Breiten-/Längengradkoordinaten laden. Sie können eine oder mehrere Methoden auswählen. Legen Sie identifier im PlaceDetailsQuery-Struct auf .placeID, .resourceName oder .coordinate fest.

Die Standardposition für die kompakte Ansicht ist vertikal. Wenn Sie ein horizontales Layout wünschen, geben Sie orientation: .horizontal in PlaceDetailsCompactView an. Optional können Sie auch orientation: .vertical angeben, um die Lesbarkeit zu verbessern. Die Vollansicht kann nur vertikal angezeigt werden.

Beispiele finden Sie im Abschnitt Beispiele für die Komponente „Ortsdetails“.

Visuelle Darstellung anpassen

Benutzerdefinierte Stile

Sie können die Farben, Typografie, Abstände, Rahmen und Ecken der Komponente „Ortsdetails“ anpassen.

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

Das Places UI Kit bietet standardmäßig ein dunkles Design. Möglicherweise müssen Sie also sowohl das dunkle als auch das helle Design anpassen. Wenn Sie das dunkle Design anpassen möchten, fügen Sie Ihrem benutzerdefinierten Design Werte für .dark und attribution.darkModeColor hinzu.

Weitere Informationen zum Formatieren finden Sie im Abschnitt Benutzerdefinierte Formatierung.

Breite und Höhe anpassen

Kompaktansichten

Empfohlene Breiten:

• Vertikale Ausrichtung: Zwischen 180 und 300 Pixeln.
• Horizontale Ausrichtung: Zwischen 180 und 500 Pixeln.

Es empfiehlt sich, keine Höhe für kompakte Ansichten festzulegen. So kann die Höhe des Fensters an den Inhalt angepasst werden, damit alle Informationen angezeigt werden.

Breiten unter 160 Pixel werden möglicherweise nicht richtig angezeigt.

Vollständige Wiedergaben

Für die Vollansicht wird eine Breite zwischen 250 und 450 Pixeln empfohlen. Eine Breite von weniger als 250 Pixeln wird möglicherweise nicht richtig angezeigt.

Sie können die Höhe der Komponente festlegen. Die vertikale Ansicht mit den Ortsdetails wird innerhalb des zugewiesenen Bereichs vertikal gescrollt.

Es empfiehlt sich, eine Höhe für Vollansichten festzulegen. So können die Inhalte im Fenster richtig gescrollt werden.

Beispiele für die „Place Details“-Komponente

Vollbildansicht mit vertikalem Layout erstellen

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // 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))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Kompakte Ansicht mit horizontalem Layout erstellen

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // 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))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Vollständige Ansicht mit vertikalem Layout erstellen

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  var theme: PlacesMaterialTheme = PlacesMaterialTheme()
  var selectedType: Set<PlaceDetailsContent> = PlaceDetailsCompactView.standardContent
  
  var configuration: PlaceDetailsConfiguration {
    PlaceDetailsConfiguration(
      content: selectedType,
      theme: theme)
  }
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    placeIDPickerFocused = true
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  GooglePlacesSwift.PlaceDetailsView(
    query: $query,
    configuration: configuration,
    placeDetailsCallback: placeDetailsCallback
  )

Stilattribute anpassen

In diesem Beispiel wird gezeigt, wie Sie die Standardstilattribute einer vollständigen oder kompakten Ansicht anpassen.

Das Places UI Kit bietet standardmäßig ein dunkles Design. Möglicherweise müssen Sie also sowohl das dunkle als auch das helle Design anpassen. Wenn Sie das dunkle Design anpassen möchten, fügen Sie Ihrem benutzerdefinierten Design Werte für .dark und attribution.darkModeColor hinzu.

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  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.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

Bestimmte Inhalte anzeigen

In diesem Beispiel wird eine kompakte Ansicht erstellt, in der nur Medien, Adresse, Bewertung und Typ angezeigt werden. Dabei wird das im vorherigen Beispiel erstellte Design verwendet.

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }