Komponent Wyszukiwanie miejsc

Komponent Wyszukiwanie miejsc w ramach interfejsu Places UI Kit renderuje wyniki wyszukiwania miejsca w postaci listy.

Możesz dostosować listę wyszukiwania miejsc. Możesz określić:

treści do wyświetlenia,
Rozmiar nośnika w orientacji pionowej
Obcinanie tekstu
Orientacja
Zastąpienia motywu, które pasują do marki i języka projektowania aplikacji.
Pozycja atrybucji
Czy miejsce można wybrać

Możesz też dostosować żądanie, aby wykonać SearchByTextRequest lub SearchNearbyRequest.

Płatności

Opłata jest naliczana za każdym razem, gdy zmieni się wartość powiązania SearchByTextRequest() lub PlaceSearchViewRequest().

Dodawanie do aplikacji wyszukiwania miejsc

Dodaj widżet wyszukiwania miejsc, korzystając z ikony PlaceSearchView class.

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

Jeśli chcesz, aby aplikacja wczytywała wyniki wyszukiwania tekstowego lub wyszukiwania w pobliżu, zaktualizuj wartość PlaceSearchViewRequest.

Swift

// use placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request

  @State private var let placeSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )

Opcjonalnie możesz też otrzymywać wywołania zwrotne, gdy komponent się wczyta, miejsce zostanie wybrane lub gdy wystąpi błąd wczytywania komponentu.

Swift

.onLoad { places in
  print("places: \(places)")
}
.onRequestError { error in
  print("error: \(error)")
}
.onPlaceSelected { place in
  print("place: \(place)")
}

Dostosowywanie komponentu Wyszukiwanie miejsc

Dostosowywanie treści

Musisz określić, jakie treści będzie wyświetlać komponent.

W tym przykładzie komponent jest skonfigurowany tak, aby wyświetlać adres i ocenę miejsca.

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating()]
)

Możesz też opcjonalnie dostosować te aspekty treści wyświetlanych w komponencie wyszukiwania miejsca:

content: treść wyświetlana w komponencie.
mediaSize: rozmiar zdjęcia w orientacji pionowej fragmentu. Domyślna wartość to small. Określone w treści.
preferTruncation: czy obcinać tekst w każdym widoku szczegółów miejsca. Wartość domyślna to fałsz.
theme: Twój motyw niestandardowy, który dziedziczy z motywu PlacesMaterialTheme. Więcej informacji o motywach
attributionPosition: określa, czy atrybucja Map Google ma się wyświetlać u góry czy u dołu komponentu. Domyślna wartość to .top.
selectable: czy każde miejsce na liście można wybrać. Jeśli można ją wybrać, po wybraniu miejsca zostanie wywołana funkcja onPlaceSelected. Wartość domyślna to fałsz.

Dodaj konfigurację dostosowywania do pliku PlaceSearchConfiguration.

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address, .rating, .media(size: .large)],
    preferTruncation: true, // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom, // default is top
    selectable: true // default is false
)

Dostosowywanie orientacji

Domyślna orientacja to pionowa. Możesz określić orientację poziomą w PlaceSearchView.

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

Dostosowywanie motywu

Możesz określić motyw, który zastąpi dowolny z atrybutów stylu domyślnego. Wartość domyślna to PlacesMaterialTheme.

Więcej informacji o motywach znajdziesz w sekcji Niestandardowe style.

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.

Przykłady

Dodawanie komponentu Wyszukiwanie miejsc

Swift

struct PlaceSearchDemoView: View {
  private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating(), .type(), .media(size: .large)],
    preferTruncation: true,  // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom,  // default is top
    selectable: true  // default is false
  )
  // can also do let placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request
  @State private var placeSearchViewRequest: PlaceSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )
  var body: some View {
    PlaceSearchView(
      orientation: .horizontal,  // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
    )
    .onLoad { places in
      print("places: \(places)")
    }
    .onRequestError { error in
      print("error: \(error)")
    }
    .onPlaceSelected { place in
      print("place: \(place)")
    }
  }
}

Dostosowywanie motywu

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.

Swift

@Environment(\.colorScheme) var colorScheme
var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      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.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
}