Komponent Informacje o miejscu

Komponent Szczegóły miejsca z interfejsu Places UI Kit umożliwia dodanie do aplikacji osobnego komponentu UI, który wyświetla szczegóły miejsca.

PlaceDetailsCompactFragment renderuje szczegóły wybranego miejsca, wykorzystując minimalną ilość miejsca. Może to być przydatne w oknie z informacjami o miejscu na mapie, w mediach społecznościowych, np. podczas udostępniania lokalizacji w czacie, jako sugestia do wybrania bieżącej lokalizacji lub w artykule w mediach, w którym podawana jest lokalizacja w Mapach Google. PlaceDetailsCompactFragment może zawierać nazwę, adres, ocenę, typ, cenę, ikonę dostępności, stan otwartości i jedno zdjęcie.

Komponent Szczegóły miejsca może być używany samodzielnie lub w połączeniu z innymi interfejsami API i usługami Google Maps Platform. Komponent przyjmuje identyfikator miejsca lub współrzędne geograficzne i zwraca wyrenderowane informacje Szczegóły miejsca.

Płatności

Gdy używasz interfejsu Places UI Kit, płacisz za każde wywołanie metody .loadWithPlaceId() lub .loadWithResourceName(). Jeśli wczytasz to samo miejsce kilka razy, płacisz za każde żądanie.

Aby uniknąć wielokrotnego obciążania opłatami, nie dodawaj bezpośrednio metod .loadWithPlaceId() ani .loadWithResourceName() w metodach cyklu życia Androida. Na przykład w metodzie onResume() nie wywołuj bezpośrednio metody .loadWithPlaceId() ani .loadWithResourceName().

Dodawanie szczegółów miejsca do aplikacji

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.

W językach Kotlin i Java dostępne są 2 metody: jedna do wczytywania fragmentu za pomocą identyfikatora miejsca (loadWithPlaceId()), a druga do wczytywania fragmentu za pomocą nazwy zasobu (loadWithResourceName()). Możesz wybrać jedną z tych metod lub obie, jeśli używasz zarówno identyfikatorów miejsc, jak i nazwy zasobów.

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 i stan „Otwarte teraz”. Więcej informacji o dostosowywaniu

Kotlin

val fragment = PlaceDetailsCompactFragment.newInstance(
  orientation,
  listOf(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE_ICON),
  R.style.CustomizedPlaceDetailsTheme
)
      
fragment.setPlaceLoadListener(object : PlaceLoadListener {
  override fun onSuccess(place: Place) { ... }
      
  override fun onFailure(e: Exception) { ... }
})
      
supportFragmentManager
  .beginTransaction()
  .add(R.id.fragment_container, fragment)
  .commitNow()
      
// Load the fragment with a Place ID.
fragment.loadWithPlaceId(placeId)
// Load the fragment with a resource name.
//fragment.loadWithResourceName(resourceName)

Java

      
PlaceDetailsCompactFragment fragment =
  PlaceDetailsCompactFragment.newInstance(
        Orientation.HORIZONTAL,
        Arrays.asList(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE_ICON),
        R.style.CustomizedPlaceDetailsTheme);
    
fragment.setPlaceLoadListener(
  new PlaceLoadListener() {
        @Override public void onSuccess(Place place) { ... }
    
        @Override public void onFailure(Exception e) { ... }
});
    
getSupportFragmentManager()
      .beginTransaction()
      .add(R.id.fragment_container, fragment)
      .commitNow();
    
// Load the fragment with a Place ID.
fragment.loadWithPlaceId(placeId);
      
// Load the fragment with a resource name.
// fragment.loadWithResourceName(resourceName);

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(
                    ALL_CONTENT,
                    orientation,
                    R.style.CustomizedPlaceDetailsTheme
                )
                supportFragmentManager
                    .beginTransaction()
                    .replace(findViewById<FrameLayout>(R.id.place_details_fragment_host).id, placeDetailsFragment!!)
                    .commitNow()
                placeDetailsFragment?.loadWithPlaceId(placeId)
            }
        }               
        
        

Dostosowywanie szczegółów miejsca

Interfejs Places UI Kit umożliwia dostosowywanie wizualne za pomocą systemu projektowania opartego na projektowaniu materialnym (z niektórymi modyfikacjami specyficznymi dla Map Google). Informacje o kolorach i typografii znajdziesz w dokumentacji Material Design. Domyślnie styl jest zgodny z językiem wizualnym Map Google.

Ważne: podczas wprowadzania modyfikacji wizualnych musisz przestrzegać wymagań dotyczących atrybucji w Mapach Google.

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="PlacesMaterialsTheme">
    <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:

Atrybut theme	Wykorzystanie
Kolor
placesColorSurface	Tło kontenera i okna
placesColorOnSurface	nagłówki, treść okna;
placesColorOnSurfaceVariant	Informacje o miejscu
placesColorPrimary	Linki
placesColorOutlineDecorative	Obramowanie kontenera
placesColorSecondaryContainer	Tło przycisku
placesColorOnSecondaryContainer	Tekst i ikona przycisku
placesColorPositive	Umieść etykietę „Otwarte”
placesColorNegative	Umieść etykietę „Zamknięte”
placesColorInfo	Ikona wejścia dostępnego dla niepełnosprawnych
Typografia
placesTextAppearanceHeadlineMedium	nagłówki dialogów,
placesTextAppearanceTitleSmall	Nazwa miejsca
placesTextAppearanceBodyMedium	Treść okna
placesTextAppearanceBodySmall	Informacje o miejscu
placesTextAppearanceLabelLarge	Etykieta przycisku
Narożniki
placesCornerRadius	Narożniki kontenera
Atrybucja marki w Mapach Google
placesColorAttributionLight	Przycisk atrybucji i ujawnienia w Mapach Google w jasnym temacie (enumeracje dla białego, szarego i czarnego koloru)
placesColorAttributionDark	Przycisk atrybucji i powiadomienia w ciemnym motywie Map Google (wymienne wartości: biały, szary i czarny)

Szerokość i wysokość

W przypadku widoku pionowego zalecana szerokość to 180–300 dp. W przypadku widoku poziomego zalecana szerokość to 180–500 dp. Widok mniejszy niż 160 dp może nie wyświetlać się prawidłowo.

Sprawdzoną metodą jest nieustawianie wysokości. Dzięki temu zawartość w oknie będzie mogła określić wysokość, co pozwoli wyświetlić wszystkie informacje.

Uwaga: miniatura miejsca nie będzie widoczna w przypadku widoku o szerokości mniejszej niż 350 dp.

Kolory atrybucji

Warunki korzystania z usługi Mapy Google wymagają użycia jednego z 3 kolorów marki w przypadku informacji o Mapach Google. Ta informacja musi być widoczna i dostępna po wprowadzeniu zmian w dostosowaniu.

Do wyboru mamy 3 kolory marki, które można niezależnie ustawiać w przypadku motywów jasnych i ciemnych:

• Jasny motyw: placesColorAttributionLight z enumerowanymi wartościami biały, szary i czarny.
• Tryb ciemny: placesColorAttributionDark z enumerowanymi wartościami biały, szary i czarny.

Przykłady dostosowywania

Uwaga: jeśli nie określisz spersonalizowanego wyglądu, zostanie zachowana wartość domyślna.

Ten przykład dostosowuje standardową treść.

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

W tym przykładzie dostosowujesz opcje treści.

  val placeDetailsFragment = PlaceDetailsCompactFragment.newInstance(
    orientation,
    listOf(
        Content.ADDRESS,
        Content.ACCESSIBLE_ENTRANCE,Content.MEDIA
    ),
    R.style.CustomizedPlaceDetailsTheme
)
  

W tym przykładzie spersonalizowano wszystkie opcje Content.

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