Wybierz platformę: Android iOS JavaScript

Komponent Informacje o miejscu

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

Kompaktowy komponent Informacje o miejscu

Komponent informacji o miejscu 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 renderowane informacje o szczegółach miejsca.

Komponent informacji o miejscu można w pełni dostosowywać, co pozwala zmieniać czcionki, kolory i promienie zaokrąglenia, aby dopasować je do przypadku użycia i wytycznych dotyczących marki. Wygląd szczegółów miejsca możesz dostosować, 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 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 kluczowych 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 projektu i rozmiarami ekranu. Pełny układ może być wyświetlany tylko w pionie.

układ poziomy i pionowy,
Układy poziome i pionowe

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

Opcje treści szczegółowych informacji o miejscu
Opcje wyświetlania treści

Widok kompaktowy Informacji 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 z informacjami o miejscu na mapie, w mediach społecznościowych, np. podczas udostępniania lokalizacji na czacie, jako sugestia wyboru bieżącej lokalizacji lub w artykule, w którym odwołujesz 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.

Widok kompaktowy Pełny widok
  • Zdjęcie miejsca
  • Galeria multimediów na pełnym ekranie jest włączona, jeśli jest dostępny lightbox multimediów
  • Adres miejsca
  • Ocena i liczba ocen
  • Typ miejsca
  • Cena
  • Informacje o wejściu dostępnym dla osób z niepełnosprawnością
  • Stan „Teraz otwarte”
  • Kolaż zdjęć miejsca
  • Adres miejsca
  • Ocena i liczba ocen
  • Typ miejsca
  • Cena
  • Informacje o ułatwieniach dostępu
  • Stan „Teraz otwarte”
  • Godziny otwarcia
  • Podsumowanie redakcyjne
  • Witryna
  • Numer telefonu
  • Opinie wyświetlane na osobnej karcie
  • Plus Code
  • Lista funkcji wyświetlana na osobnej karcie
  • informacje dotyczące konkretnego typu miejsca, np. ceny paliw w przypadku stacji benzynowych;
  • Popularne godziny

Płatności

Jeśli korzystasz z 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 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ślna pozycja widoku kompaktowego to pionowa. Jeśli chcesz użyć układu poziomego, w parametrze PlaceDetailsCompactView wpisz orientation: .horizontal. Możesz też opcjonalnie określić orientation: .vertical, aby zwiększyć przejrzystość. Pełny widok można wyświetlić tylko w pionie.

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 informacji o miejscu.

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.

Pakiet 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 dla .dark i attribution.darkModeColor do motywu niestandardowego.

Więcej informacji o stylizacji znajdziesz w sekcji Stylizacja niestandardowa.

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 zawartość okna będzie mogła ustawić wysokość, co umożliwi wyświetlenie wszystkich informacji.

Szerokości mniejsze niż 160 pikseli mogą być wyświetlane 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 być wyświetlana prawidłowo.

Możesz ustawić wysokość komponentu: widok szczegółów miejsca w pionie 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 widoku pełnego z układem pionowym

Swift

  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

Swift

  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 widoku pełnego z układem pionowym

Swift

  @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 widoku pełnego lub kompaktowego.

Pakiet 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 dla .dark i attribution.darkModeColor do motywu niestandardowego.

Swift

  // 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 konkretnych 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.

Swift

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