Componente Place Details

Il componente Dettagli dei luoghi di Places UI Kit ti consente di aggiungere un singolo componente dell'interfaccia utente che mostra i dettagli dei luoghi nella tua app.

Componente compatto dei dettagli del luogo

Il PlaceDetailsCompactView mostra i dettagli di un luogo selezionato utilizzando uno spazio minimo. Questa funzionalità può essere utile in una finestra informativa che mette in evidenza un luogo su una mappa, in un'esperienza sui social media come la condivisione di una posizione in una chat, come suggerimento per selezionare la tua posizione attuale o all'interno di un articolo multimediale per fare riferimento al luogo su Google Maps. PlaceDetailsCompactView può mostrare nome, indirizzo, valutazione, tipo, prezzo, icona di accessibilità, stato di apertura e una singola foto.

Il componente Dettagli dei luoghi può essere utilizzato in modo indipendente o in combinazione con altre API e altri servizi di Google Maps Platform. Il componente accetta un ID luogo o le coordinate di latitudine/longitudine e restituisce le informazioni di Dettagli luogo visualizzate.

Il componente Place Details offre una visualizzazione compatta, che può essere visualizzata orizzontalmente o verticalmente.

I contenuti e lo stile visivo del componente Place Details possono essere configurati in base al tuo caso d'uso e alle linee guida visive del brand. Puoi personalizzare l'aspetto dei dettagli dei luoghi specificando valori PlacesMaterialTheme personalizzati. Puoi anche personalizzare i campi dei dettagli dei luoghi inclusi specificando un elenco di voci PlaceDetailsCompactView, ognuna delle quali corrisponde a un'informazione mostrata sul luogo.

Fatturazione

Quando utilizzi Places UI Kit, ti viene addebitato un importo ogni volta che viene chiamato il metodo PlaceDetailsQuery. Se carichi lo stesso luogo più volte, ti viene addebitato un importo per ogni richiesta.

Aggiungere i dettagli dei luoghi all'app

Il componente Place Details è una visualizzazione Swift UI. Puoi personalizzare l'aspetto delle informazioni sui dettagli del luogo in base alle tue esigenze e all'aspetto della tua app.

Puoi specificare l'orientamento (orizzontale o verticale), le sostituzioni del tema e i contenuti. Le opzioni di contenuti sono media, indirizzo, valutazione, prezzo, tipo, ingresso accessibile, link a Maps e link alle indicazioni stradali. Scopri di più sulla personalizzazione.

La posizione predefinita è verticale. Se vuoi un layout orizzontale, specifica orientation: .horizontal in PlaceDetailsCompactView.

Questo esempio crea una visualizzazione compatta con un layout verticale.

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)
  }

Questo esempio crea una visualizzazione compatta con un layout orizzontale.

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)
  }

Personalizzare i dettagli del luogo

Places UI Kit offre un approccio di sistema di progettazione alla personalizzazione visiva basato approssimativamente su Material Design (con alcune modifiche specifiche di Google Maps). Consulta la documentazione di riferimento di Material Design per Colore e Tipografia. Per impostazione predefinita, lo stile è conforme al linguaggio di design visivo di Google Maps.

Opzioni di personalizzazione dei dettagli dei luoghi

Puoi personalizzare i seguenti stili:

Larghezza e altezza

Per le visualizzazioni verticali, la larghezza consigliata è compresa tra 180 e 300 pixel. Per le visualizzazioni orizzontali, la larghezza consigliata è compresa tra 180 e 500 pixel.

La best practice è non impostare un'altezza. In questo modo, i contenuti nella finestra imposteranno l'altezza, consentendo la visualizzazione di tutte le informazioni.

Colori di attribuzione

I Termini di servizio di Google Maps richiedono di utilizzare uno dei tre colori del brand per l'attribuzione di Google Maps. Questa attribuzione deve essere visibile e accessibile quando sono state apportate modifiche di personalizzazione.

Puoi scegliere tra tre colori del brand che possono essere impostati in modo indipendente per i temi chiaro e scuro:

  • Tema chiaro: attributionColorLight con enum per bianco, grigio e nero.
  • Tema scuro: attributionColorDark con enum per bianco, grigio e nero.

Esempio di personalizzazione

Questo esempio mostra come personalizzare gli attributi di stile predefiniti.

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)
  }