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

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

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

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.

Wygląd komponentu jest dostosowywany za pomocą struktur placesMaterialColor, placesMaterialFont, placesMaterialShape i placesMaterialTheme.

Możesz dostosować te style:

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

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

Kolory atrybucji

Warunki korzystania z Map Google wymagają użycia jednego z 3 kolorów marki w przypadku atrybucji Map Google. Atrybucja musi być widoczna i dostępna po wprowadzeniu zmian w dostosowaniu.

Oferujemy 3 kolory marki do wyboru, które można ustawić niezależnie dla motywów jasnego i ciemnego:

• Jasny motyw: attributionColorLight z wyliczeniami dla kolorów białego, szarego i czarnego.
• Tryb ciemny: attributionColorDark z wyliczeniami dla kolorów białego, szarego i czarnego.

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.

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