Pilih platform: Android iOS JavaScript

Komponen Place Search

Komponen Place Search Places UI Kit merender hasil penelusuran tempat dalam daftar.

Anda dapat menyesuaikan daftar Place Search. Anda dapat menentukan:

• Konten yang akan ditampilkan
• Ukuran media dalam orientasi vertikal
• Pemotongan teks
• Orientasi
• Penggantian tema yang cocok dengan brand dan bahasa desain aplikasi Anda
• Posisi atribusi
• Apakah suatu tempat dapat dipilih

Anda juga dapat menyesuaikan permintaan untuk melakukan SearchByTextRequest atau SearchNearbyRequest.

Versi Lanjutan komponen Penelusuran Tempat menawarkan fitur yang sama dengan komponen Penelusuran Tempat dan juga memungkinkan developer mengonfigurasi tombol tindakan komponen serta menerapkan opsi penelusuran dan pemfilteran ke ulasan dan media yang ditampilkan.

Penagihan

Anda ditagih setiap kali nilai binding SearchByTextRequest() atau PlaceSearchViewRequest() diubah.

Menambahkan Place Search ke aplikasi Anda

Tips: Lihat contoh lengkapnya.

Tambahkan widget Place Search menggunakan PlaceSearchView class.

Swift

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

Saat Anda ingin aplikasi memuat hasil penelusuran teks atau penelusuran terdekat, perbarui nilai PlaceSearchViewRequest Anda.

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

Anda juga dapat menerima callback secara opsional saat komponen dimuat, tempat dipilih, atau saat terjadi error saat memuat komponen.

Swift

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

Menyesuaikan komponen Place Search

Menyesuaikan konten

Anda harus menentukan konten yang akan ditampilkan komponen.

Catatan: Nama Tempat akan selalu muncul.

Contoh ini mengonfigurasi komponen untuk menampilkan alamat dan rating Tempat.

Swift

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

Anda juga dapat menyesuaikan aspek konten berikut yang muncul di komponen Penelusuran Tempat Anda:

• content: Konten yang ditampilkan dalam komponen.
• mediaSize: Ukuran foto dalam orientasi vertikal fragmen. Defaultnya adalah kecil. Ditentukan dalam konten.
• preferTruncation: Apakah akan memangkas teks setiap tampilan Detail Tempat. Default-nya adalah salah.
• theme: Tema kustom Anda yang diwarisi dari PlacesMaterialTheme. Pelajari lebih lanjut tema.
• attributionPosition: Apakah akan menampilkan atribusi Google Maps di bagian atas atau bawah komponen. Defaultnya adalah .top.
• selectable: Apakah setiap tempat dalam daftar dapat dipilih. Jika dapat dipilih, penutupan onPlaceSelected akan dipanggil setelah tempat dipilih. Default-nya adalah salah.

Tambahkan konfigurasi penyesuaian Anda ke 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
)
        

Menyesuaikan orientasi

Orientasi default adalah vertikal. Anda dapat menentukan orientasi horizontal di PlaceSearchView.

Swift

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

Menyesuaikan tema

Anda dapat menentukan tema yang menggantikan atribut gaya default. Defaultnya adalah PlacesMaterialTheme.

Lihat bagian Penataan gaya kustom untuk mengetahui informasi selengkapnya tentang tema.

UI Kit Places menyediakan tema gelap secara default, jadi Anda mungkin perlu menyesuaikan tema gelap dan terang. Untuk menyesuaikan tema gelap, tambahkan nilai untuk .dark dan attribution.darkModeColor ke tema kustom Anda.

Contoh

Menambahkan komponen Place Search

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

Menyesuaikan tema

UI Kit Places menyediakan tema gelap secara default, jadi Anda mungkin perlu menyesuaikan tema gelap dan terang. Untuk menyesuaikan tema gelap, tambahkan nilai untuk .dark dan attribution.darkModeColor ke tema kustom Anda.

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