Информационные окна

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Выберите платформу: Android iOS JavaScript

Информационное окно отображает текст или изображения во всплывающем окне над картой. Информационные окна всегда привязаны к маркеру . По умолчанию они отображаются при касании маркера.

Примеры кода

Репозиторий ApiDemos на GitHub включает образец, демонстрирующий все функции информационного окна:

  • MarkerDemoActivity — Java : настройка информационных окон и использование прослушивателей информационных окон
  • MarkerDemoActivity — Kotlin : настройка информационных окон и использование прослушивателей информационных окон

Введение

Информационное окно позволяет отображать информацию для пользователя, когда он нажимает на маркер. Одновременно отображается только одно информационное окно. Если пользователь щелкнет маркер, текущее информационное окно закроется и отобразится новое информационное окно. Обратите внимание, что если пользователь щелкает маркер, который в данный момент показывает информационное окно, это информационное окно закрывается и снова открывается.

Информационное окно рисуется ориентированным на экран устройства, с центром над соответствующим маркером. Информационное окно по умолчанию содержит заголовок, выделенный жирным шрифтом, с (необязательно) текстом фрагмента под заголовком.

Добавить информационное окно

Самый простой способ добавить информационное окно — установить методы title() и snippet() соответствующего маркера. Установка этих свойств приведет к тому, что информационное окно будет появляться всякий раз, когда нажимается этот маркер.

Ява


final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400"));

      

Котлин


val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400")
)

      

Показать/скрыть информационное окно

Информационные окна предназначены для реагирования на события касания пользователя. Если вы предпочитаете, вы можете отобразить информационное окно программно, вызвав showInfoWindow() для целевого маркера. Информационное окно можно скрыть, вызвав hideInfoWindow() .

Ява


final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne"));
melbourne.showInfoWindow();

      

Котлин


val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
)
melbourne?.showInfoWindow()

      

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

Пользовательские информационные окна

Вы также можете настроить содержимое и дизайн информационных окон. Для этого вы должны создать конкретную реализацию интерфейса InfoWindowAdapter , а затем вызвать GoogleMap.setInfoWindowAdapter() с вашей реализацией. Интерфейс содержит два метода для реализации: getInfoWindow(Marker) и getInfoContents(Marker) . API сначала вызовет getInfoWindow(Marker) , а если возвращается null , то вызовет getInfoContents(Marker) . Если это также возвращает null , то будет использоваться информационное окно по умолчанию.

Первый из них ( getInfoWindow() ) позволяет вам предоставить представление, которое будет использоваться для всего информационного окна. Второй из них ( getInfoContents() ) позволяет вам просто настроить содержимое окна, но при этом сохранить рамку и фон информационного окна по умолчанию.

На изображениях ниже показано информационное окно по умолчанию, информационное окно с настроенным содержимым и информационное окно с настроенной рамкой и фоном.

Info Window Comparison

События информационного окна

Образец MarkerDemoActivity включает пример кода для регистрации и обработки событий информационного окна.

Вы можете использовать OnInfoWindowClickListener для прослушивания событий кликов в информационном окне. Чтобы установить этот прослушиватель на карту, вызовите GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener) . Когда пользователь щелкает информационное окно, onInfoWindowClick(Marker) , и информационное окно выделяется цветом по умолчанию (серым).

Ява


class InfoWindowActivity extends AppCompatActivity implements
    GoogleMap.OnInfoWindowClickListener,
    OnMapReadyCallback {

    @Override
    public void onMapReady(GoogleMap googleMap) {
        // Add markers to the map and do other map setup.
        // ...
        // Set a listener for info window events.
        googleMap.setOnInfoWindowClickListener(this);
    }

    @Override
    public void onInfoWindowClick(Marker marker) {
        Toast.makeText(this, "Info window clicked",
            Toast.LENGTH_SHORT).show();
    }
}

      

Котлин


internal inner class InfoWindowActivity : AppCompatActivity(),
    OnInfoWindowClickListener,
    OnMapReadyCallback {
    override fun onMapReady(googleMap: GoogleMap) {
        // Add markers to the map and do other map setup.
        // ...
        // Set a listener for info window events.
        googleMap.setOnInfoWindowClickListener(this)
    }

    override fun onInfoWindowClick(marker: Marker) {
        Toast.makeText(
            this, "Info window clicked",
            Toast.LENGTH_SHORT
        ).show()
    }
}

      

Точно так же вы можете прослушивать события длинных кликов с помощью OnInfoWindowLongClickListener , который можно установить, вызвав GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener) . Этот прослушиватель ведет себя аналогично прослушивателю кликов и будет получать уведомления о событиях с длинным щелчком с onInfoWindowClose(Marker) .

Чтобы получать уведомления о закрытии информационного окна, используйте OnInfoWindowCloseListener , который можно установить, вызвав GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener) . Вы получите обратный вызов onInfoWindowClose(Marker) .

Примечание об обновлении информационного окна: onInfoWindowClose() срабатывает, если пользователь обновляет информационное окно, касаясь маркера, который уже имеет открытое информационное окно. Но если вы программно вызываете Marker.showInfoWindow() в открытом информационном окне, onInfoWindowClose() не срабатывает. Последнее поведение основано на предположении, что вы знаете, что информационное окно закроется и снова откроется.

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