Komponent Informacje o miejscu

Komponent Informacje o miejscu w interfejsie Places UI Kit umożliwia dodanie do aplikacji pojedynczego komponentu interfejsu, który wyświetla szczegółowe informacje o miejscu. Ten komponent można dostosować.

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, nazwę zasobu lub współrzędne geograficzne i zwraca wyrenderowane informacje Place Details.

Komponent Szczegóły miejsca można w pełni dostosowywać, co pozwala zmieniać czcionki, kolory i promienie zaokrąglenia, aby dopasować je do przypadku użycia i wskazówek dotyczących marki. Możesz dostosować wygląd szczegółów miejsca, podając niestandardowe wartości PlacesMaterialTheme. Możesz też dostosować, które pola szczegółów miejsca mają być uwzględnione, podając listę wpisów PlaceDetailsCompactView, z których każdy odpowiada elementowi informacji wyświetlanemu o miejscu.

Warianty układu

Komponent Informacje o miejscu obsługuje 2 główne warianty układu:

• Kompaktowy: układ do wyświetlania podglądu najważniejszych informacji.
• Pełny:kompleksowy układ wyświetlający wszystkie dostępne szczegóły miejsca.

Kompaktowy układ może być wyświetlany w orientacji pionowej lub poziomej. Dzięki temu możesz zintegrować komponent z różnymi układami i rozmiarami ekranu. Pełny układ może być wyświetlany tylko w pionie.

Komponent Szczegóły miejsca zapewnia szczegółową kontrolę nad treściami wyświetlanymi w komponencie. Każdy element (np. zdjęcia, opinie i dane kontaktowe) można indywidualnie wyświetlać lub ukrywać, co pozwala precyzyjnie dostosować wygląd komponentów i gęstość informacji.

Widok kompaktowy komponentu Informacje o miejscu

Kompaktowy widok Informacji o miejscu (PlaceDetailsCompactView) wyświetla szczegóły wybranego miejsca, zajmując minimalną ilość miejsca. Może to być przydatne w oknie informacyjnym wyróżniającym miejsce na mapie, w usługach społecznościowych, np. podczas udostępniania lokalizacji na czacie, jako sugestia wyboru bieżącej lokalizacji lub w artykule w mediach, aby odwołać się do miejsca w Mapach Google.

Pełny widok informacji o miejscu

Pełny widok szczegółów miejsca (PlaceDetailsView) zapewnia większą powierzchnię do wyświetlania informacji o miejscu i umożliwia wyświetlanie większej liczby typów informacji.

Opcje wyświetlania treści

Możesz określić, które treści mają być wyświetlane, za pomocą wyliczeń w PlaceDetailsCompactContent lub PlaceDetailsContent.

Płatności

Jeśli korzystasz z interfejsu Place Details UI Kit, opłata jest naliczana za każde wywołanie metody PlaceDetailsQuery. Jeśli to samo miejsce zostanie wczytane wiele razy, opłata zostanie naliczona za każde żądanie.

Dodawanie szczegółów miejsca do aplikacji

Komponent Informacje o miejscu to widok interfejsu Swift. Możesz dostosować wygląd informacji o miejscu do swoich potrzeb i wyglądu aplikacji. Więcej informacji o dostosowywaniu

Komponent Szczegóły miejsca możesz wczytać za pomocą identyfikatora miejsca, nazwy zasobu lub współrzędnych geograficznych. Możesz wybrać dowolną metodę lub kilka metod. Ustaw wartość identifier w strukturze PlaceDetailsQuery na .placeID, .resourceName lub .coordinate.

Domyślne położenie widoku kompaktowego to pionowe. Jeśli chcesz użyć układu poziomego, w parametrze PlaceDetailsCompactView podaj wartość orientation: .horizontal. Możesz też opcjonalnie dodać orientation: .vertical, aby zwiększyć przejrzystość. Pełny widok można wyświetlić tylko w orientacji pionowej.

Przykłady znajdziesz w sekcji Przykłady komponentu Szczegóły miejsca.

Dostosowywanie wyglądu

Styl niestandardowy

Możesz dostosować kolory, typografię, odstępy, obramowania i rogi komponentu Szczegóły miejsca.

Interfejs Places UI Kit oferuje podejście do wizualnego dostosowywania oparte na systemie projektowania, które jest w przybliżeniu oparte na Material Design (z pewnymi modyfikacjami specyficznymi dla Map Google). Więcej informacji znajdziesz w sekcjach Kolor i Typografia w dokumentacji Material Design. Domyślnie styl jest zgodny z językiem wizualnym Map Google.

Zestaw interfejsu Miejsc domyślnie zawiera ciemny motyw, więc może być konieczne dostosowanie zarówno ciemnego, jak i jasnego motywu. Aby dostosować ciemny motyw, dodaj wartości dla .dark i attribution.darkModeColor do motywu niestandardowego.

Więcej informacji o stylach znajdziesz w sekcji Styl niestandardowy.

Dostosowywanie szerokości i wysokości

Widoki kompaktowe

Zalecane szerokości:

• Orientacja pionowa: od 180 do 300 pikseli.
• Orientacja pozioma: od 180 do 500 pikseli.

Sprawdzona metoda to nieustawianie wysokości widoków kompaktowych. Dzięki temu wysokość okna będzie dostosowywana do zawartości, co pozwoli wyświetlić wszystkie informacje.

Szerokości mniejsze niż 160 pikseli mogą wyświetlać się nieprawidłowo.

Pełne wyświetlenia

W przypadku pełnych widoków zalecana szerokość wynosi od 250 do 450 pikseli. Szerokość mniejsza niż 250 pikseli może nie wyświetlać się prawidłowo.

Możesz ustawić wysokość komponentu: widok pionowy Szczegóły miejsca będzie przewijany w pionie w przydzielonym obszarze.

Sprawdzoną metodą jest ustawienie wysokości pełnych widoków. Dzięki temu zawartość okna będzie się prawidłowo przewijać.

Przykłady komponentu Informacje o miejscu

Tworzenie pełnego widoku z układem pionowym

  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
    )

Tworzenie widoku kompaktowego z układem poziomym

  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
    )

Tworzenie pełnego widoku z układem pionowym

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

Dostosowywanie atrybutów stylu

Ten przykład pokazuje, jak dostosować domyślne atrybuty stylu widoku pełnego lub kompaktowego.

Zestaw interfejsu Miejsc domyślnie zawiera ciemny motyw, więc może być konieczne dostosowanie zarówno ciemnego, jak i jasnego motywu. Aby dostosować motyw ciemny, dodaj do motywu niestandardowego wartości dla .dark i attribution.darkModeColor.

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

Wyświetlanie określonych treści

Ten przykład tworzy widok kompaktowy, który wyświetla tylko multimedia, adres, ocenę i typ, korzystając z motywu utworzonego w poprzednim przykładzie.

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