Wybierz platformę: Android iOS JavaScript

Komponent Wyszukiwanie miejsc

Komponent Wyszukiwanie miejsc w pakiecie Places UI Kit renderuje wyniki wyszukiwania miejsc 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 dopasowane do marki i języka projektowania aplikacji.
• Pozycja atrybucji
• Czy miejsce można wybrać

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

Wersja zaawansowana komponentu Wyszukiwanie miejsc oferuje te same funkcje co komponent Wyszukiwanie miejsc, a dodatkowo umożliwia programistom konfigurowanie przycisków działania komponentu oraz stosowanie opcji wyszukiwania i filtrowania do wyświetlanych opinii i multimediów.

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

Wskazówka: zobacz pełny przykład.

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, miejsce zostanie wybrane lub 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.

Uwaga: nazwa miejsca będzie zawsze widoczna.

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 tekst w widoku szczegółów miejsca ma być skracany. Wartość domyślna to false.
• theme: Twój motyw niestandardowy, który dziedziczy z PlacesMaterialTheme. Dowiedz się więcej o motywach.
• attributionPosition: określa, czy atrybucja Map Google ma się wyświetlać u góry czy u dołu komponentu. Wartość domyślna 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 false.

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 atrybut stylu domyślnego. Wartość domyślna to PlacesMaterialTheme.

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

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