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 wyrenderowane informacje Szczegóły miejsca.

Komponent informacji o miejscu można w pełni dostosować, co pozwala zmieniać czcionki, kolory i promienie zaokrąglenia, aby dopasować je do przypadku użycia i wytycznych 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 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 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 orientacji pionowej.

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

Komponent informacji o miejscu zapewnia szczegółową kontrolę nad treściami wyświetlanymi w komponencie. Każdy element (np. zdjęcia, opinie i dane kontaktowe) można wyświetlać lub ukrywać, 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 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 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
  • Lightbox umożliwiający powiększanie zdjęć na pełnym ekranie
  • 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;

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 i charakter 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 wpisz orientation: .horizontal. Możesz też opcjonalnie określić orientation: .vertical w celu uniknięcia wątpliwości. Pełny widok można wyświetlić tylko w orientacji pionowej.

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

Dostosowywanie wyglądu

Stylizacja niestandardowa

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.

Zestaw interfejsu Places 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.

Sprawdzona metoda to nieustawianie wysokości widoków kompaktowych. Dzięki temu wysokość okna będzie dostosowywana do zawartości, co umożliwi wyświetlenie wszystkich informacji.

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

Swift

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: 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

Swift

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: 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

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

Zestaw interfejsu Places domyślnie udostępnia 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.

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

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