Wybierz platformę: Android iOS JavaScript

Komponent Wyszukiwanie miejsc

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

Komponent Wyszukiwanie miejsc w Places UI Kit

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ć prośbę, 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 za pomocą 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
      )
    )
  )

Możesz też opcjonalnie otrzymywać wywołania zwrotne, gdy komponent się wczyta, gdy zostanie wybrane miejsce 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ślny rozmiar to mały. określone w treściach,
  • preferTruncation: czy tekst w każdym widoku informacji o miejscu ma być obcinany. 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 być wyświetlana 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. Orientację poziomą możesz określić w polu PlaceSearchView.

Swift

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

Dostosowywanie motywu

Możesz określić motyw, który zastąpi dowolne atrybuty stylu domyślnego. Wartość domyślna to PlacesMaterialTheme.

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

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.

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

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

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