本頁面由 Cloud Translation API 翻譯而成。

地點詳細資料 UI Kit (實驗功能)

您可以使用 Place Details 的 Place Details UI Kit，新增個別 UI 元件，在應用程式中顯示地點詳細資料。UI Kit 可單獨使用，也可以與其他 Google 地圖平台 API 和服務搭配使用。UI 套件會採用 Place ID 或經緯度座標，並傳回算繪的 Place Details 資訊。

UI 套件提供精簡檢視畫面，可水平或垂直顯示。您可以覆寫預設主題的任何屬性，自訂地點詳細資料的外觀。您也可以指定 Content 項目清單，自訂要納入哪些地點詳細資料欄位，每個項目都會對應至顯示的地點資訊。

帳單

將 Place Details 套用 Place Details UI Kit 時，系統會針對每次呼叫 .loadPlaceDetails() 方法收費。如果您多次載入相同地點，系統會針對每項要求向您收費。為避免多次收費，請勿在 Android 生命週期方法中直接新增 .loadPlaceDetails()。舉例來說，請勿在 onResume() 方法中直接呼叫 .loadPlaceDetails()。

啟用 Places UI 套件

使用 Places UI Kit 前，您必須：

Place Details UI Kit 範例

您可以將片段新增至版面配置，為應用程式新增地點詳細資料。在將片段例項化時，您可以自訂地點詳細資料資訊的外觀和風格，以符合您的需求並與應用程式外觀相符。

您可以指定方向 (水平或垂直)、主題覆寫值和內容。內容選項包括媒體、地址、評分、價格、類型、無障礙入口、地圖連結和路線連結。查看自訂範例。

Kotlin

val fragment = PlaceDetailsCompactFragment.newInstance(
  orientation,
  listOf(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
  R.style.CustomizedPlaceDetailsTheme,
)
      
fragment.setPlaceLoadListener(object : PlaceLoadListener {
    override fun onSuccess() { ... }
      
      override fun onFailure(e: Exception) { ... }
})
      
supportFragmentManager
  .beginTransaction()
  .add(R.id.fragment_container, fragment)
  .commitNow()
      
fragment.loadPlaceDetails(placeId)

Java

      
PlaceDetailsCompactFragment fragment =
  PlaceDetailsCompactFragment.newInstance(
        Orientation.HORIZONTAL,
        Arrays.asList(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
        R.style.CustomizedPlaceDetailsTheme);
    
fragment.setPlaceLoadListener(
  new PlaceLoadListener() {
        @Override
        public void onSuccess() { ... }
    
        @Override
        public void onFailure(Exception e) { ... }
});
    
getSupportFragmentManager()
      .beginTransaction()
      .add(R.id.fragment_container, fragment)
      .commitNow();
    
fragment.loadPlaceDetails(placeId);

Kotlin

        import android.os.Bundle
        import android.util.Log
        import android.view.View
        import android.widget.FrameLayout
        import androidx.appcompat.app.AppCompatActivity
        import com.google.android.gms.maps.CameraUpdateFactory
        import com.google.android.gms.maps.GoogleMap
        import com.google.android.gms.maps.OnMapReadyCallback
        import com.google.android.gms.maps.SupportMapFragment
        import com.google.android.gms.maps.model.LatLng
        import com.google.android.gms.maps.model.PointOfInterest
        import com.google.android.libraries.places.api.Places
        import com.google.android.libraries.places.api.net.PlacesClient
        import com.google.android.libraries.places.widget.PlaceDetailsCompactFragment
        import com.google.android.libraries.places.widget.PlaceDetailsCompactFragment.Companion.ALL_CONTENT
        import com.google.android.libraries.places.widget.model.Orientation
        
        class MainActivity : AppCompatActivity(), OnMapReadyCallback, GoogleMap.OnPoiClickListener {
            private var googleMap: GoogleMap? = null
            private val orientation: Orientation = Orientation.HORIZONTAL
            private lateinit var placesClient: PlacesClient
            private var placeDetailsFragment: PlaceDetailsCompactFragment? = null
        
            override fun onCreate(savedInstanceState: Bundle?) {
                super.onCreate(savedInstanceState)
                setContentView(R.layout.activity_main)
        
                // --- Initialize Places SDK ---
                val apiKey = BuildConfig.PLACES_API_KEY
                if (apiKey.isEmpty()) {
                    Log.e("Places test", "No api key")
                    finish()
                    return
                }
                Places.initializeWithNewPlacesApiEnabled(applicationContext, apiKey)
                placesClient = Places.createClient(this)
                // -----------------------------
        
                val mapFragment = supportFragmentManager.findFragmentById(R.id.map_fragment) as SupportMapFragment?
                mapFragment?.getMapAsync(this)
            }
        
            override fun onMapReady(map: GoogleMap) {
                googleMap = map
                val sydney = LatLng(-33.8688, 151.2093)
                val zoomLevel = 13f
                googleMap?.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, zoomLevel))
                googleMap?.setOnPoiClickListener(this)
            }
        
            override fun onPoiClick(poi: PointOfInterest) {
                val placeId = poi.placeId
                Log.d("POI Click", "Place ID: $placeId")
                showPlaceDetailsFragment(placeId)
            }
        
            private fun showPlaceDetailsFragment(placeId: String) {
                placeDetailsFragment = PlaceDetailsCompactFragment.newInstance(
                    orientation,
                    ALL_CONTENT
                )
                supportFragmentManager
                    .beginTransaction()
                    .replace(findViewById<FrameLayout>(R.id.place_details_fragment_host).id, placeDetailsFragment!!)
                    .commitNow()
                placeDetailsFragment?.loadPlaceDetails(placeId)
            }
        }

自訂範例

在例項化片段時，您可以指定主題來覆寫任何預設樣式屬性。未覆寫的主題屬性會使用預設樣式。如果您想支援深色主題，可以在 values-night/colors.xml 中新增顏色項目。

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesTheme">
    <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>

您可以自訂下列樣式：

placesColorSurfaceContainerLowest
placesColorOutlineDecorative
placesColorPrimary
placesColorOnSurface
placesColorOnSurfaceVariant
placesColorSecondaryContainer
placesColorOnSecondaryContainer
placesCornerRadius
placesTextAppearanceBodySmall
placesTextAppearanceBodyMedium
placesTextAppearanceBodyLarge
placesTextAppearanceLabelLarge
placesTextAppearanceHeadlineMedium
placesColorAttributionLight (白色、灰色和黑色的列舉)
placesColorAttributionDark (白色、灰色和黑色的列舉)

這個範例會自訂標準內容。

  val fragmentStandardContent = PlaceDetailsCompactFragment.newInstance(
  orientation,
  PlaceDetailsCompactFragment.STANDARD_CONTENT,
  R.style.BrandedPlaceDetailsTheme,
)

這個範例會自訂所有內容。

  val fragmentAllContent = PlaceDetailsCompactFragment.newInstance(
  orientation,
  PlaceDetailsCompactFragment.ALL_CONTENT,
  R.style.BrandedPlaceDetailsTheme,
)

地點詳細資料 UI Kit (實驗功能)

帳單

啟用 Places UI 套件

Place Details UI Kit 範例

Kotlin

Java

查看載入 PlaceDetails 小工具的完整程式碼

Kotlin

自訂範例