選取平台： Android iOS JavaScript

Place Search 元件

Places UI Kit 的 Place Search 元件會以清單形式顯示地點搜尋結果。

Places UI Kit Place Search 元件

您可以自訂地點搜尋清單。您可以指定：

  • 要顯示的內容
  • 直向模式的媒體大小
  • 文字截斷
  • 方向
  • 符合品牌和應用程式設計語言的主題覆寫
  • 註明內容來源的位置
  • 地點是否可選取

您也可以自訂要求，執行 Search by text request 或 Search Nearby request。

帳單

每當 configureFromSearchByTextRequest() 或 configureFromSearchNearbyRequest() 繫結值變更時，系統就會向您收費。

在應用程式中加入地點搜尋功能

將 PlaceSearchFragment Fragment 新增至版面配置，即可使用「地點搜尋」小工具。

如要讓應用程式載入文字搜尋或附近搜尋結果，請使用要求呼叫 configureFromSearchByTextRequest() 或 configureFromSearchNearbyRequest()。

Kotlin

fragment.configureFromSearchByTextRequest(searchByTextRequest)

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

Java

fragment.configureFromSearchByTextRequest(searchByTextRequest)

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

您也可以在元件中加入選用的 PlaceSearchFragmentListener，以便在元件載入、選取地點 (如果設為可選取) 或載入元件時發生錯誤時接收回呼。

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) {...}
  }
)

自訂 Place Search 元件

自訂內容

您必須指定元件要顯示的內容。

這個範例會設定元件，顯示地點的地址和評分。

Kotlin

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

Java

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

您也可以視需要自訂地點搜尋元件中顯示的內容，包括：

將自訂設定新增至 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)

自訂螢幕方向

預設方向為直向，如為橫向，請在 PlaceSearchFragment.newInstance() 中指定 Orientation.HORIZONTAL。

Kotlin

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

Java

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

自訂主題

例項化片段時，您可以指定主題來覆寫任何預設樣式屬性。預設值為 PlacesMaterialTheme。如要進一步瞭解主題設定，請參閱地點詳細資料元件說明文件。

未覆寫的主題屬性會使用預設樣式。如要支援深色主題，可以在 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>

範例

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)