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 configureFromSearchByTextRequest() hoặc configureFromSearchNearbyRequest() thay đổi.

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

Sử dụng tiện ích Tìm kiếm địa điểm bằng cách thêm PlaceSearchFragment Mảnh vào bố cục.

Khi bạn muốn ứng dụng tải một 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 gọi configureFromSearchByTextRequest() hoặc configureFromSearchNearbyRequest() bằng yêu cầu.

Kotlin

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

Java

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

Bạn cũng có thể thêm PlaceSearchFragmentListener (không bắt buộc) vào thành phần để nhận các lệnh gọi lại khi thành phần tải, một địa điểm được chọn (nếu được đặt thành có thể chọn) hoặc khi có lỗi tải thành phần.

Kotlin

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

Java

fragment.registerListener(
  new PlaceSearchFragmentListener() {
    @Override public void onLoad(List<? extends Place> places) {...}
    @Override public void onRequestError(Exception e) {...}
    @Override public void onPlaceSelected(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.

Kotlin

val fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS, Content.RATING))

Java

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS,Content.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:

  • PlaceSearchFragment.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.
  • preferTruncation: Có nên 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.
  • attributionPosition: Có hiển thị thông tin ghi nhận quyền sở hữu của Google Maps ở đầu hay cuối thành phần hay không.
  • selectable: Liệu mỗi địa điểm trong danh sách có thể chọn hay không.

Thêm cấu hình tuỳ chỉnh vào PlaceSearchFragment.

Kotlin

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

Java

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

Tuỳ chỉnh hướng

Hướng mặc định là hướng dọc. Đối với hướng ngang, hãy chỉ định Orientation.HORIZONTAL trong PlaceSearchFragment.newInstance().

Kotlin

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

Java

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

Tuỳ chỉnh giao diện

Khi tạo một mảnh, 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. Mặc định là PlacesMaterialTheme. Hãy xem tài liệu về Thành phần thông tin chi tiết về địa điểm để biết thêm thông tin về việc tạo giao diện.

Mọi thuộc tính giao diện không bị ghi đè sẽ sử dụng kiểu mặc định. Nếu muốn hỗ trợ giao diện tối, bạn có thể thêm một mục cho màu trong values-night/colors.xml. 

 <style name="CustomizedTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

Ví dụ:

Kotlin

val fragment: PlaceSearchFragment =
PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT)

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

supportFragmentManager
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow()

fragment.configureFromSearchByTextRequest(searchByTextRequest)

Java

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT);

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

fragment.registerListener(
  new PlaceSearchFragmentListener() {
      @Override public void onLoad(List<? extends Place> places) {...}
      @Override public void onRequestError(Exception e) {...}
      @Override public void onPlaceSelected(Place place) {...}
  }
)

getSupportFragmentManager()
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow();

fragment.configureFromSearchByTextRequest(searchByTextRequest)