Chọn nền tảng: Android iOS JavaScript

Thành phần Place Autocomplete cơ bản

Thành phần Cơ bản của tính năng Tự động hoàn thành địa điểm trong Places UI Kit cho phép bạn thêm một thành phần giao diện người dùng riêng lẻ trả về một mã địa điểm khi người dùng chọn một địa điểm. Thành phần này là một lớp phủ toàn màn hình cung cấp thanh tìm kiếm để người dùng nhập cụm từ tìm kiếm. Khi người dùng nhập, một danh sách kết quả tự động hoàn thành sẽ xuất hiện bên dưới thanh tìm kiếm. Khi người dùng nhấn vào một địa điểm, một đối tượng địa điểm chỉ có mã địa điểm sẽ được trả về cho nhà phát triển. Bạn có thể tuỳ chỉnh thành phần này.

Thành phần này lấy ranh giới địa lý và các tham số tìm kiếm khác thông qua cấu trúc AutocompleteFilter.

Phản hồi cung cấp một cấu trúc Place chỉ có trường placeID được điền sẵn.

Thành phần Basic Place Autocomplete có các lựa chọn tuỳ chỉnh sau: mật độ danh sách và có bao gồm biểu tượng vị trí hay không. Sử dụng cấu trúc AutocompleteUICustomization để tuỳ chỉnh thành phần.

Bạn có thể sử dụng thành phần Basic Place Autocomplete một cách độc lập hoặc kết hợp với các API và dịch vụ khác của Google Maps Platform.

Thanh toán

Bạn sẽ bị tính phí mỗi khi thành phần được mở và một truy vấn được thực hiện. Bạn sẽ không bị tính phí lại cho phiên đó, trừ phi phiên hết hạn hoặc bạn chọn một địa điểm trong danh sách.

Thêm thành phần Basic Autocomplete vào ứng dụng

Đặt các thông số bộ lọc tự động hoàn thành (ví dụ: các loại cần trả về, quốc gia để giới hạn kết quả, toạ độ khu vực cho kết quả và thông tin khoảng cách nếu bạn đặt nguồn gốc của người dùng) như khi bạn sử dụng tính năng Tự động hoàn thành địa điểm (Mới) mà không cần Places UI Kit. Hãy xem tài liệu về tính năng Tự động hoàn thành địa điểm (Mới) để biết hướng dẫn đầy đủ và ví dụ về mã để tạo bộ lọc tự động hoàn thành.

Sau khi tạo bộ lọc tự động hoàn thành, bạn có thể tạo một cấu trúc với các chế độ tuỳ chỉnh giao diện người dùng. Xem các lựa chọn và hướng dẫn tuỳ chỉnh.

Sau đó, hãy tạo một nút sẽ khởi chạy thành phần Basic Autocomplete (Tự động hoàn thành cơ bản) mà bạn đã tuỳ chỉnh.

Swift

  Button("Search for a place") {
    showWidget.toggle()
  }
  .basicPlaceAutocomplete(
    show: $showWidget
     // ...
  )

Xem ví dụ đầy đủ.

Tuỳ chỉnh thành phần Tự động hoàn thành cơ bản

Tuỳ chỉnh nội dung

Mật độ danh sách

Bạn có thể chọn hiển thị danh sách gồm 2 dòng hoặc danh sách nhiều dòng. Sử dụng các lựa chọn trong AutocompleteListDensity (.twoLine hoặc .multiLine) trong lớp AutocompleteUICustomization. Nếu bạn không chỉ định mật độ danh sách, thành phần sẽ hiển thị danh sách gồm 2 dòng.

Biểu tượng vị trí

Bạn có thể chọn hiển thị biểu tượng địa điểm mặc định trên danh sách kết quả hay không. Sử dụng các lựa chọn trong AutocompleteUIIcon (.defaultIcon hoặc .noIcon) trong lớp AutocompleteUICustomization.

Tuỳ chỉnh giao diện

Bạn có thể chỉ định một giao diện ghi đè bất kỳ thuộc tính kiểu mặc định nào. Bạn có thể tuỳ chỉnh màu sắc, kiểu chữ, khoảng cách, đường viền và góc của thành phần Thông tin chi tiết về địa điểm. Mặc định là PlacesMaterialTheme.

Mọi thuộc tính giao diện không bị ghi đè sẽ sử dụng kiểu mặc định.

Places UI Kit cung cấp giao diện tối theo mặc định, vì vậy, bạn có thể cần tuỳ chỉnh cả giao diện tối và giao diện sáng. Để tuỳ chỉnh giao diện tối, hãy thêm các giá trị cho .dark và attribution.darkModeColor vào giao diện tuỳ chỉnh.

Hãy xem phần Tạo kiểu tuỳ chỉnh để biết thêm thông tin về việc tạo giao diện.

Thêm nội dung và tuỳ chỉnh giao diện cho thành phần Tự động hoàn thành cơ bản

Sử dụng lớp AutocompleteUICustomization để tuỳ chỉnh thành phần Tự động hoàn thành cơ bản.

Swift

let uiCustomization = AutocompleteUICustomization(
    listDensity: .multiLine,
    listItemIcon: .noIcon,
    theme: PlacesMaterialTheme()
)

Ví dụ:

Thêm thành phần Tự động hoàn thành cơ bản

Lưu ý quan trọng: Đặt giá trị ban đầu của showWidget thành false để thành phần tuỳ chỉnh của bạn xuất hiện khi người dùng nhấp vào nút.

Ví dụ này tạo một thành phần Tự động hoàn thành cơ bản tuỳ chỉnh có nút. Biểu tượng mặc định, mật độ danh sách hai dòng và giao diện tuỳ chỉnh đã được đặt. Bộ lọc tự động hoàn thành được đặt để tìm các Địa điểm liên quan đến kế toán ở Las Vegas và vùng lân cận.

Swift

  // Note: You must provide an API key in your app entry point first.
  // A demo view of the basic place autocomplete widget.
  public struct BasicPlaceAutocompleteView: View {
    @State private var fetchedPlace: Place?
    @State private var placesError: PlacesError?
    @State private var showWidget = false
    public var body: some View {
      let types: Set<PlaceType> = [.accounting]
      let countries: Set<String> = ["US"]
      let origin = CLLocation(latitude: 36.19030535579595, longitude: -115.25397680618019)
      let coordinateRegion = RectangularCoordinateRegion(
        northEast: CLLocationCoordinate2D(
          latitude: 36.25290087640495, longitude: -115.08025549571225),
        southWest: CLLocationCoordinate2D(latitude: 36.06607422287787, longitude: -115.33431432920293)
      )
      let regionCode = "US"
      let inputOffset = 10
      let filter = AutocompleteFilter(
        types: types,
        countries: countries,
        origin: origin,
        coordinateRegionBias: coordinateRegion,
        regionCode: regionCode)
      let uiCustomization = AutocompleteUICustomization(
        listDensity: .multiLine,
        listItemIcon: .noIcon,
        theme: PlacesMaterialTheme()
      )
      VStack {
        Button("Search for a place") {
          showWidget.toggle()
        }
        .basicPlaceAutocomplete(
          filter: filter,
          uiCustomization: uiCustomization ?? AutocompleteUICustomization(),
          show: $showWidget,
          onSelection: { place in
            guard let placeID = place.placeID else {
              self.placesError = .internal(
                "Could not fetch place details because place ID from selected suggestion not found."
              )
              return
            }
            Task {
              let placesClient = await PlacesClient.shared
              let fetchPlaceRequest = FetchPlaceRequest(
                placeID: placeID,
                placeProperties: [.displayName, .formattedAddress]
              )
              switch await placesClient.fetchPlace(with: fetchPlaceRequest) {
              case .success(let place):
                print("Fetched place: \(place)")
                self.fetchedPlace = place
              case .failure(let placesError):
                print("Failed to fetch place: \(placesError)")
                self.placesError = placesError
              }
            }
          },
          onError: { placesError in
            self.placesError = placesError
          }
        )
        if let placesError = $placesError.wrappedValue {
          Text(placesError.localizedDescription)
            .frame(maxWidth: .infinity, alignment: .leading)
        } else if let fetchedPlace = $fetchedPlace.wrappedValue {
          Text("\(fetchedPlace)")
            .frame(maxWidth: .infinity, alignment: .leading)
        }
      }
    }
  }

Tuỳ chỉnh giao diện

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