UI Kit informacji o miejscach (funkcja eksperymentalna)

Ten produkt lub ta funkcja jest eksperymentalna (przed GA). Usługi i funkcje przed GA mogą mieć ograniczoną obsługę, a zmiany w takich usługach i funkcjach mogą być niezgodne z ich innymi wersjami. Oferty przed GA są objęte szczegółowymi warunkami korzystania z usługi Google Maps Platform. Więcej informacji znajdziesz w opisach etapu uruchamiania.

Zestaw interfejsu użytkownika z informacjami o miejscach umożliwia dodanie do aplikacji osobnego komponentu UI, który wyświetla informacje o miejscu. Zestaw interfejsu użytkownika może być używany samodzielnie lub w połączeniu z innymi interfejsami API i usługami platformy Mapy Google. Zestaw interfejsu użytkownika przyjmuje identyfikator miejsca lub współrzędne geograficzne i zwraca renderowane informacje Szczegóły miejsca.

Pakiet interfejsu użytkownika zawiera kompaktowy widok, który można wyświetlić w poziomie lub w pionie. Możesz dostosować wygląd informacji o miejscu, podając niestandardowe wartości PlaceWidgetTheme. Możesz też dostosować pola informacji o miejscu, które mają być uwzględnione, przez podanie listy elementów PlaceDetailsCompactView, z których każdy odpowiada jednemu elementowi informacji o miejscu.

Uwaga: zestaw interfejsu użytkownika dotyczący szczegółów miejsca jest dostępny tylko w pakiecie PlacesSwift SDK.

Płatności

Jeśli używasz pakietu interfejsu użytkownika Szczegóły miejsca, pobierana jest opłata za każde wywołanie metody PlaceDetailsQuery. Jeśli wczytasz to samo miejsce kilka razy, płacisz za każde żądanie.

Włączanie zestawu interfejsu użytkownika Miejsca

Zanim zaczniesz korzystać z interfejsu Places UI Kit, musisz:

• Utwórz projekt Cloud z kontem rozliczeniowym.
• Włącz w projekcie interfejs API UI Kit usługi Places.
• Pobierz klucz interfejsu API.

Przykłady interfejsu użytkownika w przypadku Szczegółów miejsca

Widżet Szczegóły miejsca to widok Swift UI. Możesz dostosować wygląd i wygląd informacji o miejscu, aby pasowały do Twoich potrzeb i wyglądu aplikacji.

Możesz określić orientację (poziomą lub pionową), zastąpić motyw i wybrać zawartość. Opcje treści to media, adres, ocena, cena, typ, dostępny wejście, link do mapy i link do wskazówek dojazdu. Zobacz przykład dostosowywania

Domyślna pozycja to pionowa. Jeśli chcesz użyć układu poziomego, w elementach PlaceDetailsCompactView i PlaceDetailsCompactView podaj wartość orientation: .horizontal.

Ten przykład tworzy kompaktowy widok z układem pionowym.

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

  

Ten przykład tworzy kompaktowy widok z układem poziomym.

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

Przykład dostosowywania

Uwaga: jeśli nie określisz koloru ani czcionki, zostaną one ustawione domyślnie.

Ten przykład pokazuje, jak dostosować domyślne atrybuty stylu.

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