Набор пользовательского интерфейса Places Details (экспериментальный)

Этот продукт или функция являются экспериментальными (до GA). Продукты и функции Pre-GA могут иметь ограниченную поддержку, а изменения в продуктах и ​​функциях Pre-GA могут быть несовместимы с другими версиями Pre-GA. На предложения Pre-GA распространяются Особые условия обслуживания платформы Google Maps . Дополнительную информацию см. в описании этапов запуска .

Набор пользовательского интерфейса Place Details для Place Details позволяет добавить отдельный компонент пользовательского интерфейса, который отображает сведения о месте в вашем приложении. Набор пользовательского интерфейса можно использовать независимо или в сочетании с другими API и сервисами платформы Google Maps. Комплект пользовательского интерфейса принимает либо идентификатор места, либо координаты широты и долготы и возвращает визуализированную информацию о месте .

Комплект пользовательского интерфейса предлагает компактное представление, которое можно отображать горизонтально или вертикально. Вы можете настроить внешний вид сведений о месте, переопределив любой атрибут темы по умолчанию. Вы также можете настроить, какие поля сведений о месте будут включены, указав список записей Content , каждая из которых соответствует фрагменту информации, отображаемой о месте.

Биллинг

При использовании набора пользовательского интерфейса Place Details для Place Details вам взимается плата за каждый вызов метода .loadPlaceDetails() . Если вы загружаете одно и то же место несколько раз, вам будет выставлен счет за каждый запрос. Чтобы избежать многократной оплаты, не добавляйте .loadPlaceDetails() напрямую в методы жизненного цикла Android. Например, не вызывайте напрямую .loadPlaceDetails() в методе onResume() .

Включите набор пользовательского интерфейса Places

Прежде чем использовать Places UI Kit, вам необходимо:

• Создайте облачный проект с платежным аккаунтом.
• Включите API Places UI Kit для своего проекта .
• Получите ключ API .

Примеры набора пользовательского интерфейса Place Details

Вы можете добавить информацию о месте в свое приложение, добавив фрагмент в макет. Создавая экземпляр фрагмента, вы можете настроить внешний вид информации о месте в соответствии с вашими потребностями и внешним видом вашего приложения.

Вы можете указать ориентацию (горизонтальную или вертикальную), переопределения темы и содержимое. Варианты контента: медиа, адрес, рейтинг, цена, тип, доступный вход, ссылка на карты и ссылка на маршруты. См. пример настройки .

Котлин

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)

Ява

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

Просмотрите полный код для загрузки виджета «Подробности о месте».

Котлин

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