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

Thành phần Tìm kiếm địa điểm

Thành phần Tìm kiếm địa điểm của Bộ công cụ giao diện người dùng Places kết xuất kết quả tìm kiếm địa điểm trong một danh sách.

Thành phần Tìm kiếm địa điểm trong Places UI Kit

Bạn có thể tuỳ chỉnh danh sách Tìm kiếm địa điểm. Bạn có thể chỉ định:

  • Nội dung cần hiển thị
  • Kích thước tệp đa phương tiện theo hướng dọc
  • Rút ngắn văn bản
  • Hướng
  • Giao diện ghi đè phù hợp với thương hiệu và ngôn ngữ thiết kế của ứng dụng
  • Vị trí của thông tin ghi công
  • Liệu một địa điểm có thể chọn được hay không

Bạn cũng có thể tuỳ chỉnh yêu cầu để thực hiện SearchByTextRequest hoặc a SearchNearbyRequest.

Thanh toán

Bạn sẽ bị tính phí mỗi khi giá trị liên kết SearchByTextRequest() hoặc PlaceSearchViewRequest() thay đổi.

Thêm tính năng Tìm kiếm địa điểm vào ứng dụng

Thêm tiện ích Tìm kiếm địa điểm bằng cách sử dụng PlaceSearchView class.

Swift

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

Khi bạn muốn ứng dụng tải kết quả tìm kiếm văn bản hoặc tìm kiếm lân cận, hãy cập nhật giá trị 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
      )
    )
  )

Bạn cũng có thể chọn nhận lệnh gọi lại khi thành phần tải, một địa điểm được chọn hoặc khi có lỗi tải thành phần.

Swift

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

Tuỳ chỉnh thành phần Tìm kiếm địa điểm

Tuỳ chỉnh nội dung

Bạn phải chỉ định nội dung mà thành phần sẽ hiển thị.

Ví dụ này định cấu hình thành phần để hiển thị địa chỉ và điểm xếp hạng của Địa điểm.

Swift

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

Bạn cũng có thể tuỳ chỉnh các khía cạnh sau đây của nội dung xuất hiện trong thành phần Tìm kiếm địa điểm:

  • content: Nội dung xuất hiện trong thành phần.
  • mediaSize: Kích thước ảnh theo hướng dọc của đoạn mã. Giá trị mặc định là nhỏ. Được chỉ định trong nội dung.
  • preferTruncation: Có rút ngắn văn bản của từng chế độ xem Chi tiết địa điểm hay không. Giá trị mặc định là "false".
  • theme: Giao diện tuỳ chỉnh của bạn kế thừa từ PlacesMaterialTheme. Tìm hiểu thêm về việc tạo giao diện.
  • attributionPosition: Có hiển thị thông tin ghi công của Google Maps ở đầu hoặc cuối thành phần hay không. Giá trị mặc định là .top.
  • selectable: Có thể chọn từng địa điểm trong danh sách hay không. Nếu có thể chọn, thì lệnh đóng onPlaceSelected sẽ được gọi sau khi một địa điểm được chọn. Giá trị mặc định là "false".

Thêm cấu hình tuỳ chỉnh vào 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
)

Tuỳ chỉnh hướng

Hướng mặc định là dọc. Bạn có thể chỉ định hướng ngang trong PlaceSearchView.

Swift

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

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. Giá trị mặc định là PlacesMaterialTheme.

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

Theo mặc định, Bộ công cụ giao diện người dùng Places cung cấp giao diện tối, vì vậy, bạn có thể cần tuỳ chỉnh cả giao diện tối và 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.

Ví dụ

Thêm thành phần Tìm kiếm địa điểm

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

Tuỳ chỉnh giao diện

Theo mặc định, Bộ công cụ giao diện người dùng Places cung cấp giao diện tối, vì vậy, bạn có thể cần tuỳ chỉnh cả giao diện tối và 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.

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