Ta strona została przetłumaczona przez Cloud Translation API.

Komponent Informacje o miejscu

Komponent Szczegóły miejsca z interfejsu Places UI Kit umożliwia dodanie do aplikacji osobnego komponentu UI, który wyświetla szczegóły miejsca.

Kompaktowy komponent informacji o miejscu

PlaceDetailsCompactView renderuje szczegóły wybranego miejsca, wykorzystując minimalną ilość miejsca. Może to być przydatne w oknie z informacjami o miejscu na mapie, w mediach społecznościowych, np. podczas udostępniania lokalizacji w czacie, jako sugestia do wybrania bieżącej lokalizacji lub w artykule w mediach, w którym podawana jest lokalizacja w Mapach Google. PlaceDetailsCompactView może zawierać nazwę, adres, ocenę, typ, cenę, ikonę dostępności, stan otwartości i jedno zdjęcie.

Komponent Szczegóły miejsca może być używany samodzielnie lub w połączeniu z innymi interfejsami API i usługami Google Maps Platform. Komponent przyjmuje identyfikator miejsca lub współrzędne geograficzne i zwraca renderowane informacje Szczegóły miejsca.

Komponent Informacje o miejscu zawiera kompaktowy widok, który można wyświetlić w orientacji poziomej lub pionowej.

Treść i styl wizualny komponentu Informacje o miejscu można skonfigurować tak, aby pasowały do Twojego przypadku użycia i wytycznych dotyczących marki wizualnej. Możesz dostosować wygląd informacji o miejscu, podając niestandardowe wartości PlacesMaterialTheme. Możesz też dostosować, które pola z informacjami o miejscu mają być uwzględnione, przez podanie listy elementów PlaceDetailsCompactView, z których każdy odpowiada jednemu elementowi informacji o miejscu.

Płatności

Gdy używasz interfejsu użytkownika Places UI Kit, płacisz za każde wywołanie metody PlaceDetailsQuery. Jeśli wczytasz to samo miejsce kilka razy, płacisz za każde żądanie.

Dodawanie szczegółów miejsca do aplikacji

Komponent Informacje o miejscu 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. Więcej informacji o dostosowywaniu

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

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

Dostosowywanie szczegółów miejsca

Interfejs Places UI Kit umożliwia dostosowywanie wizualne za pomocą systemu projektowania opartego na projektowaniu materialnym (z niektórymi modyfikacjami specyficznymi dla Map Google). Informacje o kolorach i typografii znajdziesz w dokumentacji Material Design. Domyślnie styl jest zgodny z językiem wizualnym Map Google.

Opcje dostosowywania informacji o miejscu

Możesz dostosować te style:

Szerokość i wysokość

W przypadku widoku pionowego zalecana szerokość to 180–300 pikseli. W przypadku widoku poziomego zalecana szerokość to 180–500 pikseli.

Sprawdzoną metodą jest nieustawianie wysokości. Dzięki temu zawartość w oknie będzie mogła określić wysokość, co pozwoli wyświetlić wszystkie informacje.

Kolory atrybucji

Warunki korzystania z usługi Mapy Google wymagają użycia jednego z 3 kolorów marki w przypadku informacji o Mapach Google. Ta informacja musi być widoczna i dostępna po wprowadzeniu zmian w dostosowaniu.

Do wyboru mamy 3 kolory marki, które można niezależnie ustawiać w przypadku motywów jasnych i ciemnych:

Jasny motyw: attributionColorLight z enumerowanymi wartościami biały, szary i czarny.
Tryb ciemny: attributionColorDark z enumerowanymi wartościami biały, szary i czarny.

Przykład dostosowywania

W tym przykładzie pokazano, 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: 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)
  }