Pilih platform: Android iOS JavaScript

Komponen Place Search

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

Komponen Penelusuran Tempat Places UI Kit

Anda dapat menyesuaikan daftar Place Search. Anda dapat menentukan:

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

Anda juga dapat menyesuaikan permintaan untuk melakukan SearchByTextRequest atau a SearchNearbyRequest.

Penagihan

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

Menambahkan Place Search ke aplikasi Anda

Tambahkan widget Place Search menggunakan PlaceSearchView class.

Swift

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

Jika Anda ingin aplikasi memuat hasil penelusuran teks atau penelusuran terdekat, perbarui nilai 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
      )
    )
  )

Secara opsional, Anda juga dapat menerima callback 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 oleh komponen.

Contoh ini mengonfigurasi komponen untuk menampilkan alamat dan rating Tempat.

Swift

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

Secara opsional, Anda juga dapat menyesuaikan aspek konten berikut yang muncul di komponen Place Search:

  • content: Konten yang ditampilkan dalam komponen.
  • mediaSize: Ukuran foto dalam orientasi vertikal fragmen. Default-nya adalah kecil. Ditentukan dalam konten.
  • preferTruncation: Apakah akan memotong teks setiap tampilan Detail Tempat. Default-nya adalah salah.
  • theme: Tema kustom Anda yang mewarisi dari PlacesMaterialTheme. Pelajari lebih lanjut pemberian tema.
  • attributionPosition: Apakah akan menampilkan atribusi Google Maps di bagian atas atau bawah komponen. Default-nya 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 mengganti salah satu atribut gaya default. Default-nya adalah PlacesMaterialTheme.

Lihat bagian Gaya kustom untuk mengetahui informasi selengkapnya tentang pemberian tema.

Places UI Kit menyediakan tema gelap secara default, sehingga 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

Places UI Kit menyediakan tema gelap secara default, sehingga 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()
    }
}