Компонент сведений о месте
Компонент Place Details из комплекта Places UI Kit позволяет добавлять отдельный компонент пользовательского интерфейса, который отображает сведения о месте в вашем приложении.
PlaceDetailsCompactFragment отображает сведения о выбранном месте, используя минимальное пространство. Это может быть полезно в информационном окне, выделяющем место на карте, в опыте социальных сетей, например, для обмена местоположением в чате, в качестве предложения для выбора вашего текущего местоположения или в статье в СМИ для ссылки на место на Google Maps. PlaceDetailsCompactFragment может отображать имя, адрес, рейтинг, тип, цену, значок доступности, открытый статус и одну фотографию.
Компонент Place Details может использоваться независимо или в сочетании с другими API и сервисами платформы Google Maps. Компонент принимает либо идентификатор места, либо координаты широты/долготы и возвращает визуализированную информацию Place Details .
Биллинг
При использовании Place Details UI Kit вы оплачиваете каждый раз, когда вызывается метод .loadWithPlaceId() или .loadWithResourceName() . Если вы загружаете одно и то же место несколько раз, вы оплачиваете каждый запрос.
Чтобы избежать многократной оплаты, не добавляйте напрямую .loadWithPlaceId() или .loadWithResourceName() в методы жизненного цикла Android. Например, не вызывайте напрямую .loadWithPlaceId() или .loadWithResourceName() в методе onResume() .
Добавьте информацию о месте в свое приложение
Вы можете добавить сведения о месте в свое приложение, добавив фрагмент в макет. При создании экземпляра фрагмента вы можете настроить внешний вид и содержание сведений о месте в соответствии со своими потребностями и внешним видом вашего приложения.
В Kotlin и Java есть два метода: один для загрузки фрагмента с идентификатором места ( loadWithPlaceId() ) и один для загрузки фрагмента с именем ресурса ( loadWithResourceName() ). Вы можете выбрать любой из методов или оба, если вы используете как идентификаторы места, так и имена ресурсов.
Вы можете указать ориентацию (горизонтальную или вертикальную), переопределения темы и содержимое. Параметры содержимого: медиа, адрес, рейтинг, цена, тип, доступный вход и статус «Открыто сейчас». Узнайте больше о настройке .
Котлин
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)
Ява
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);
Посмотреть полный код для загрузки виджета «Сведения о месте»
Котлин
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) } }
Настройте детали места
Places UI kit предлагает системный подход к визуальной настройке, основанный на Material Design (с некоторыми модификациями, специфичными для Google Maps). См. справочник Material Design по цвету и типографике . По умолчанию стиль соответствует визуальному языку дизайна Google Maps.
При создании фрагмента можно указать тему, которая переопределяет любые атрибуты стиля по умолчанию. Любые атрибуты темы, которые не переопределяются, используют стили по умолчанию. Если вы хотите поддерживать темную тему, можно добавить запись для цвета в 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>
Вы можете настроить следующие стили:
| Атрибут темы | Использование |
|---|---|
| Цвет | |
placesColorSurface | Контейнер и фон диалога |
placesColorOnSurface | Заголовки, содержание диалогов |
placesColorOnSurfaceVariant | Информация о месте |
placesColorPrimary | Ссылки |
placesColorOutlineDecorative | Граница контейнера |
placesColorSecondaryContainer | Фон кнопки |
placesColorOnSecondaryContainer | Текст и значок кнопки |
placesColorPositive | Разместите этикетку «Открыть» сейчас |
placesColorNegative | Поместите метку «Закрыто» сейчас |
placesColorInfo | Значок доступного входа |
| Типографика | |
placesTextAppearanceHeadlineMedium | Заголовки диалогов |
placesTextAppearanceTitleSmall | Название места |
placesTextAppearanceBodyMedium | Содержание диалога |
placesTextAppearanceBodySmall | Информация о месте |
placesTextAppearanceLabelLarge | Метка кнопки |
| Углы | |
placesCornerRadius | Углы контейнера |
| Атрибуция бренда Google Maps | |
placesColorAttributionLight | Кнопка атрибуции и раскрытия информации в Google Картах в светлой теме (перечисления для белого, серого и черного цветов) |
placesColorAttributionDark | Кнопка атрибуции и раскрытия информации в Google Картах в темной теме (перечисления для белого, серого и черного цветов) |
Ширина и высота
Для вертикальных видов рекомендуемая ширина составляет от 180 до 300 dp. Для горизонтальных видов рекомендуемая ширина составляет от 180 до 500 dp. Вид меньше 160 dp может отображаться некорректно.
Лучше всего не задавать высоту. Это позволит содержимому окна задать высоту, что позволит отобразить всю информацию.
Цвета атрибуции
Условия обслуживания Google Maps требуют, чтобы вы использовали один из трех фирменных цветов для атрибуции Google Maps. Эта атрибуция должна быть видимой и доступной после внесения изменений в настройки.
Мы предлагаем на выбор 3 фирменных цвета, которые можно независимо настраивать для светлой и темной темы:
- Светлая тема:
placesColorAttributionLightс перечислениями для белого, серого и черного цветов. - Темная тема:
placesColorAttributionDarkс перечислениями для белого, серого и черного цветов.
Примеры настройки
В этом примере настраивается стандартное содержимое.
val fragmentStandardContent = PlaceDetailsCompactFragment.newInstance(
orientation,
PlaceDetailsCompactFragment.STANDARD_CONTENT,
R.style.CustomizedPlaceDetailsTheme
)В этом примере настраиваются параметры контента.
val placeDetailsFragment = PlaceDetailsCompactFragment.newInstance(
orientation,
listOf(
Content.ADDRESS,
Content.ACCESSIBLE_ENTRANCE,Content.MEDIA
),
R.style.CustomizedPlaceDetailsTheme
)
В этом примере настраиваются все параметры Content .
val fragmentAllContent = PlaceDetailsCompactFragment.newInstance(
orientation,
PlaceDetailsCompactFragment.ALL_CONTENT,
R.style.CustomizedPlaceDetailsTheme
)