UI Kit informacji o miejscach (funkcja eksperymentalna)

Ten produkt lub ta funkcja jest eksperymentalna (przed GA). Usługi i funkcje przed GA mogą mieć ograniczoną obsługę, a zmiany w takich usługach i funkcjach mogą być niezgodne z ich innymi wersjami. Oferty przed GA są objęte szczegółowymi warunkami korzystania z usługi Google Maps Platform. Więcej informacji znajdziesz w opisach etapu uruchamiania.

Zestaw interfejsu użytkownika z informacjami o miejscach umożliwia dodanie do aplikacji osobnego komponentu UI, który wyświetla informacje o miejscu. Zestaw interfejsu użytkownika może być używany samodzielnie lub w połączeniu z innymi interfejsami API i usługami platformy Mapy Google. Zestaw interfejsu użytkownika przyjmuje identyfikator miejsca lub współrzędne geograficzne i zwraca renderowane informacje Szczegóły miejsca.

Pakiet interfejsu użytkownika zawiera kompaktowy widok, który można wyświetlić w poziomie lub w pionie. Możesz dostosować wygląd informacji o miejscu, zastępując dowolny atrybut motywu domyślnego. Możesz też dostosować pola informacji o miejscu, które mają być uwzględnione, przez podanie listy elementów Content, z których każdy odpowiada jednemu elementowi informacji o miejscu.

Płatności

Jeśli używasz pakietu interfejsu użytkownika Szczegóły miejsca, płacisz za każde wywołanie metody .loadPlaceDetails(). Jeśli wczytasz to samo miejsce kilka razy, płacisz za każde żądanie. Aby uniknąć wielokrotnego obciążania, nie dodawaj bezpośrednio .loadPlaceDetails() w metodach cyklu życia w Androidzie. Na przykład w metodzie onResume() nie wywołuj bezpośrednio metody .loadPlaceDetails().

Włączanie zestawu interfejsu użytkownika Miejsca

Zanim zaczniesz korzystać z interfejsu Places UI Kit, musisz:

• Utwórz projekt Cloud z kontem rozliczeniowym.
• Włącz w projekcie interfejs Places UI Kit API.
• Pobierz klucz interfejsu API.

Przykłady interfejsu użytkownika w przypadku Szczegółów miejsca

Szczegóły miejsca możesz dodać do aplikacji, dodając fragment do układu. Podczas tworzenia wystąpienia fragmentu możesz dostosować wygląd i wygląd informacji o miejscu, aby dopasować je do potrzeb i wyglądu aplikacji.

Możesz określić orientację (poziomą lub pionową), zastąpić motyw i wybrać zawartość. Opcje treści to media, adres, ocena, cena, typ, dostępny wejście, link do mapy i link do wskazówek dojazdu. Zobacz przykład dostosowywania

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);

Pełny kod do załadowania widżetu Szczegóły miejsca

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

Przykład dostosowywania

Podczas tworzenia wystąpienia fragmentu możesz określić motyw, który zastąpi dowolne domyślne atrybuty stylu. Wszystkie atrybuty motywu, które nie zostały zastąpione, używają domyślnych stylów. Jeśli chcesz obsługiwać tryb ciemny, możesz dodać wpis koloru w pliku 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>

Możesz dostosować te style:

• placesColorSurfaceContainerLowest
• placesColorOutlineDecorative
• placesColorPrimary
• placesColorOnSurface
• placesColorOnSurfaceVariant
• placesColorSecondaryContainer
• placesColorOnSecondaryContainer
• placesCornerRadius
• placesTextAppearanceBodySmall
• placesTextAppearanceBodyMedium
• placesTextAppearanceBodyLarge
• placesTextAppearanceLabelLarge
• placesTextAppearanceHeadlineMedium
• placesColorAttributionLight (enums for white, gray, and black)
• placesColorAttributionDark (enums for white, gray, and black)

Ten przykład dostosowuje standardową treść.

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

Ta próbka dostosowuje wszystkie treści.

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