Komponent Informacje o miejscu

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

Komponent Informacje o miejscu może być używany niezależnie lub w połączeniu z innymi interfejsami API i usługami Google Maps Platform. Komponent przyjmuje identyfikator miejsca Place ID, nazwę zasobu lub współrzędne geograficzne (szerokość i długość geograficzną) i zwraca wyrenderowane informacje o miejscu Place Details.

Komponent Informacje o miejscu jest w pełni konfigurowalny, co pozwala dostosować czcionki, kolory i promienie zaokrąglenia do Twojego przypadku użycia i wytycznych dotyczących marki. Możesz dostosować wygląd informacji o miejscu, podając niestandardowe PlacesMaterialTheme wartości. Możesz też dostosować, które pola informacji o miejscu mają być uwzględnione, określając listę wpisów PlaceDetailsCompactView. Każdy z nich odpowiada fragmentowi informacji wyświetlanych 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 informacje o miejscu.

Układ kompaktowy 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. Układ pełny może być wyświetlany tylko w pionie.

Komponent Informacje o miejscu umożliwia precyzyjne kontrolowanie treści wyświetlanych w komponencie. Każdy element (np. zdjęcia, opinie i informacje kontaktowe) można osobno wyświetlać lub ukrywać, co pozwala na dokładne dostosowanie wyglądu komponentu i gęstości informacji.

Widok kompaktowy Informacje o miejscu

Widok kompaktowy Informacje o miejscu (PlaceDetailsCompactView) renderuje szczegóły wybranego miejsca, zajmując minimalną ilość miejsca. Może to być przydatne w oknie informacyjnym wyróżniającym miejsce na mapie, w mediach 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 Informacje o miejscu

Pełny widok Informacje o miejscu (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

Gdy używasz interfejsu Place Details UI Kit, opłata jest naliczana za każdym razem, gdy wywoływana jest metoda PlaceDetailsQuery. Jeśli to samo miejsce zostanie wczytane kilka razy, opłata zostanie naliczona za każde żądanie.

Dodawanie informacji o miejscu do aplikacji

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

Możesz wczytać komponent Informacje o miejscu za pomocą identyfikatora miejsca, nazwy zasobu lub współrzędnych geograficznych (szerokości i długości geograficznej). Możesz wybrać dowolną metodę lub kilka metod. Ustaw identifier w strukturze PlaceDetailsQuery na .placeID, .resourceName, lub .coordinate.

Domyślna pozycja widoku kompaktowego to pionowa. Jeśli chcesz użyć układu poziomego, w PlaceDetailsCompactView określ orientation: .horizontal. Możesz też opcjonalnie określić orientation: .vertical w celu uniknięcia wątpliwości. Pełny widok może być wyświetlany tylko w pionie.

Przykłady znajdziesz w sekcji Przykłady komponentu Informacje o miejscu.

Dostosowywanie wyglądu

Dostosowywanie stylu

Możesz dostosować kolory, typografię, odstępy, obramowania i rogi komponentu Informacje o miejscu.

Interfejs Places UI Kit oferuje podejście do dostosowywania wyglądu oparte na systemie projektowania, które jest w przybliżeniu oparte na Material Design (z pewnymi 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.

Interfejs Places UI Kit domyślnie udostępnia ciemny motyw, więc może być konieczne dostosowanie zarówno ciemnego, jak i jasnego motywu. Aby dostosować ciemny motyw, dodaj wartości .dark i attribution.darkModeColor do motywu niestandardowego.

Więcej informacji o stylach znajdziesz w sekcji Dostosowywanie stylu.

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.

Sprawdzoną metodą jest nieustawianie wysokości widoków kompaktowych. Dzięki temu wysokość okna będzie mogła być ustawiana przez zawartość, co umożliwi wyświetlenie wszystkich informacji.

Szerokości mniejsze niż 160 pikseli mogą nie być wyświetlane prawidłowo.

Pełne widoki

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

Możesz ustawić wysokość komponentu: pionowy widok Informacje o miejscu będzie przewijać się w pionie w przydzielonym miejscu.

Sprawdzoną metodą jest ustawianie 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

    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details component.
    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

    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details component.
    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()
  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 pełnego lub kompaktowego widoku.

Interfejs Places UI Kit domyślnie udostępnia ciemny motyw, więc może być konieczne dostosowanie zarówno ciemnego, jak i jasnego motywu. Aby dostosować ciemny motyw, dodaj wartości .dark i attribution.darkModeColor do motywu niestandardowego.

  // 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, używając 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)
  }