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 Places UI Kit hiển thị 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 của nội dung nghe nhìn ở hướng dọc
  • Rút ngắn văn bản
  • Hướng
  • Các chế độ ghi đè giao diện 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 Search by text request hoặc Search Nearby request.

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 bằng văn bản hoặc kết quả 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ể nhận các lệnh gọi lại (không bắt buộc) 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 (không bắt buộc) 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 mảnh. Giá trị mặc định là small. Được chỉ định trong nội dung.
  • preferTruncation: Có cắt bớt văn bản của từng khung hiển thị Chi tiết về đị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 nhận quyền sở hữu của Google Maps ở đầu hoặc cuối thành phần hay không. Giá trị mặc định là .top.
  • selectable: Liệu mỗi địa điểm trong danh sách có thể chọn hay không. Nếu có thể chọn, thì phương thức đó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à hướng 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 tài liệu về thành phần Chi tiết về địa điểm để biết thêm thông tin về việc tạo 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()
    }
}

Ví dụ:

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