Расширенный Android 09.1: Карты Google

1. Добро пожаловать

Этот практический урок является частью курса повышения квалификации по разработке приложений для Android , разработанного командой Google Developers Training. Наибольшую пользу от курса вы получите, если будете выполнять практические уроки последовательно.

Подробную информацию о курсе см. в разделе «Обзор расширенной разработки под Android» .

Введение

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

В этом практическом задании вы создадите приложение Google Maps под названием Wander .

Что вам уже должно быть известно

Вам следует ознакомиться со следующим:

  • Основные функции Google Maps.
  • Права доступа во время выполнения.
  • Создание, сборка и запуск приложений в Android Studio.
  • Включение внешних библиотек в файл build.gradle .

Что вы узнаете

  • Интегрируйте карту Google в свое приложение.
  • Отображение различных типов карт.
  • Настройте внешний вид карты Google.
  • Добавьте маркеры на карту.
  • Предоставьте пользователю возможность размещать маркер на интересующей точке (POI).
  • Включить отслеживание местоположения.
  • Включите Google Street View.

Что вы будете делать

  • Получите ключ API в консоли Google API и зарегистрируйте его в своем приложении.
  • Создайте приложение Wander со встроенной картой Google.
  • Добавьте в свое приложение собственные функции, такие как маркеры, стилизация и отслеживание местоположения.
  • Включите отслеживание местоположения и функцию просмотра улиц в вашем приложении.

2. Обзор приложения

В этом практическом задании вы создадите приложение Wander , которое представляет собой стилизованную карту Google. Приложение Wander позволяет размещать маркеры на определенных местах, видеть свое местоположение в режиме реального времени и просматривать панорамы Street View.

Оформленная карта Google

Google Street View в приложении для Android

3. Задание 1. Настройте проект и получите ключ API.

Для работы API Google Maps, как и API Places, требуется ключ API. Чтобы получить ключ API, необходимо зарегистрировать свой проект в консоли Google API. Ключ API привязан к цифровому сертификату, который связывает приложение с его автором. Подробнее об использовании цифровых сертификатов и подписании приложения см. в разделе «Подпишите свое приложение» .

В этом практическом задании вы используете ключ API для отладочного сертификата. Отладочный сертификат по своей природе небезопасен, как описано в разделе «Подписание отладочной сборки» . Опубликованные приложения Android, использующие API Google Maps, требуют второго ключа API: ключа для сертификата выпуска. Дополнительную информацию о получении сертификата выпуска см. в разделе «Получение ключа API» .

В Android Studio есть шаблон Activity для Google Maps, который генерирует полезный шаблонный код. Шаблонный код включает файл google_maps_api.xml , содержащий ссылку, упрощающую получение ключа API.

1.1 Создайте проект Wander, используя шаблон Maps.

  1. Создайте новый проект Android Studio.
  2. Назовите новое приложение "Wander". Примите значения по умолчанию, пока не дойдете до страницы "Добавить занятие" .
  3. Выберите шаблон « Действия в Google Картах» .
  4. Оставьте значения по умолчанию для имени действия и имени макета .
  5. Измените заголовок на «Блуждание» и нажмите «Готово ».

Android Studio создает несколько дополнительных файлов, связанных с картами:

google_maps_api**.xml**

Этот конфигурационный файл используется для хранения вашего API-ключа. Шаблон генерирует два файла google_maps_api.xml : один для отладочной версии, другой для релизной. Файл с API-ключом для отладочного сертификата находится в src/debug/res/values . Файл с API-ключом для релизного сертификата находится в src/release/res/values . В этом практическом занятии мы используем только отладочный сертификат.

activity_maps.xml

Этот файл разметки содержит один фрагмент, занимающий весь экран. Класс SupportMapFragment является подклассом класса Fragment . Вы можете включить SupportMapFragment в файл разметки, используя тег <fragment> в любом ViewGroup с дополнительным атрибутом:

android:name="com.google.android.gms.maps.SupportMapFragment"

MapsActivity.java

В файле MapsActivity.java создается экземпляр класса SupportMapFragment и используется метод getMapAsync() этого класса для подготовки карты Google. Активность, содержащая SupportMapFragment должна реализовывать интерфейс OnMapReadyCallback и метод onMapReady() этого интерфейса. Метод getMapAsync() возвращает объект GoogleMap , означающий, что карта загружена.

1.2 Получение ключа API

  1. Откройте отладочную версию файла google_maps_api.xml .

Файл содержит комментарий с длинным URL-адресом. Параметры URL-адреса содержат конкретную информацию о вашем приложении.

  1. Скопируйте и вставьте URL-адрес в браузер.
  2. Следуйте инструкциям, чтобы создать проект в консоли Google API. Благодаря параметрам в предоставленном URL-адресе, консоль API автоматически включает Google Maps Android API.
  3. Создайте ключ API и нажмите «Ограничить ключ» , чтобы ограничить его использование только приложениями Android. Сгенерированный ключ API должен начинаться с AIza .
  4. В файле google_maps_api.xml вставьте ключ в строку google_maps_key , где указано YOUR_KEY_HERE .
  5. Запустите приложение. В вашем приложении есть встроенная карта с маркером, установленным в Сиднее, Австралия. (Маркер Сиднея является частью шаблона, и вы можете изменить его позже.)

4. Задание 2. Добавьте типы карт и маркеры.

В Google Maps есть несколько типов карт: обычная, гибридная, спутниковая, топографическая и «нет». В этом задании вы добавляете панель приложения с меню параметров, позволяющим пользователю изменять тип карты. Вы перемещаете начальное местоположение карты в свое собственное местоположение. Затем вы добавляете поддержку маркеров, которые обозначают отдельные точки на карте и могут включать метку.

2.1 Добавить типы карт

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

  1. Чтобы создать новый XML-файл меню, щелкните правой кнопкой мыши по каталогу res и выберите New > Android Resource File .
  2. В диалоговом окне назовите файл map_options . Выберите Menu в качестве типа ресурса. Нажмите OK .
  3. Замените код в новом файле следующим кодом, чтобы создать параметры карты. Тип карты "none" опущен, поскольку "none" означает полное отсутствие карты. 
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item android:id="@+id/normal_map"
       android:title="@string/normal_map"
       app:showAsAction="never"/>
   <item android:id="@+id/hybrid_map"
       android:title="@string/hybrid_map"
       app:showAsAction="never"/>
   <item android:id="@+id/satellite_map"
       android:title="@string/satellite_map"
       app:showAsAction="never"/>
   <item android:id="@+id/terrain_map"
       android:title="@string/terrain_map"
       app:showAsAction="never"/>
</menu>
  1. Создайте строковые ресурсы для атрибутов title .
  2. В файле MapsActivity измените класс так, чтобы он наследовал класс AppCompatActivity вместо класса FragmentActivity . Использование AppCompatActivity отобразит панель приложения, а следовательно, и меню.
  3. В MapsActivity переопределите метод onCreateOptionsMenu() и создайте файл map_options : 
@Override
public boolean onCreateOptionsMenu(Menu menu) {
   MenuInflater inflater = getMenuInflater();
   inflater.inflate(R.menu.map_options, menu);
   return true;
}
  1. Чтобы изменить тип карты, используйте метод setMapType () объекта GoogleMap , передав в него одну из констант, определяющих тип карты.

Переопределите метод onOptionsItemSelected() . Вставьте следующий код, чтобы изменить тип карты, когда пользователь выбирает один из пунктов меню:

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
       // Change the map type based on the user's selection.
       switch (item.getItemId()) {
           case R.id.normal_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
               return true;
           case R.id.hybrid_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
               return true;
           case R.id.satellite_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
               return true;
           case R.id.terrain_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);
               return true;
           default:
               return super.onOptionsItemSelected(item);
       }
    }
  1. Запустите приложение. Используйте меню на панели приложения, чтобы изменить тип карты. Обратите внимание, как меняется внешний вид карты.

2.2 Переместить местоположение карты по умолчанию

По умолчанию функция обратного вызова onMapReady() включает код, который размещает маркер в Сиднее, Австралия, где были созданы Google Maps. Функция обратного вызова по умолчанию также анимирует перемещение карты в сторону Сиднея. На этом шаге вы перемещаете карту в сторону вашего домашнего местоположения без размещения маркера, а затем увеличиваете масштаб до указанного вами уровня.

  1. В методе onMapReady() удалите код, который размещает маркер в Сиднее и перемещает камеру.
  2. Откройте в браузере страницу www.google.com/maps и найдите свой дом.
  3. Щелкните правой кнопкой мыши по нужному месту и выберите «Что здесь находится?»

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

  1. Создайте новый объект LatLng с именем home . В объекте LatLng используйте координаты, полученные из Google Maps в браузере.
  2. Создайте переменную типа float с именем zoom и установите для неё желаемый начальный уровень масштабирования. Следующий список даст вам представление о том, какой уровень детализации отображает каждый уровень масштабирования:
  • 1 : Мир
  • 5 : Суша/континент
  • 10 : Город
  • 15 : Улицы
  • 20 : Здания
  1. Создайте объект CameraUpdate используя CameraUpdateFactory.newLatLngZoom() , передав в него ваш объект LatLng и переменную zoom . Для панорамирования и масштабирования камеры вызовите moveCamera() для объекта GoogleMap , передав в него новый объект CameraUpdate : 
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(home, zoom));
  1. Запустите приложение. Карта должна переместиться к вашему дому и увеличить масштаб до нужного уровня.

2.3 Добавить маркеры на карту

В Google Maps можно выделить местоположение с помощью маркера, который создается с использованием класса Marker . По умолчанию используется стандартная иконка Google Maps: Маркер Google Maps

Вы можете расширять маркеры, чтобы отображать контекстную информацию в информационных окнах .

На этом этапе вы добавляете маркер, когда пользователь касается и удерживает точку на карте. Затем вы добавляете InfoWindow , которое отображает координаты маркера при нажатии на него.

Информационное окно для установленной метки.

  1. Создайте в классе MapsActivity метод-заглушку с именем setMapLongClick() , который принимает в качестве аргумента final GoogleMap и возвращает void : 
private void setMapLongClick(final GoogleMap map) {}
  1. Используйте метод setOnMapLongClickListener() объекта GoogleMap , чтобы разместить маркер в месте, где пользователь коснулся и удерживает кнопку мыши. Передайте новый экземпляр OnMapLongClickListener , который переопределяет метод onMapLongClick() . Входящий аргумент — это объект LatLng , содержащий координаты места, куда пользователь нажал: 
private void setMapLongClick(final GoogleMap map) {
   map.setOnMapLongClickListener(new GoogleMap.OnMapLongClickListener() {
       @Override
       public void onMapLongClick(LatLng latLng) {
       }
   });
}
  1. Внутри метода onMapLongClick() вызовите метод addMarker() . Передайте новый объект MarkerOptions с позицией, установленной на переданный параметр LatLng : 
map.addMarker(new MarkerOptions().position(latLng));
  1. Вызовите setMapLongClick() в конце метода onMapReady() . Передайте в качестве параметра mMap .
  2. Запустите приложение. Нажмите и удерживайте на карте, чтобы установить маркер в нужном месте.
  3. Нажмите на маркер, чтобы расположить его по центру экрана.

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

Чтобы добавить информационное окно для маркера:

  1. В объекте MarkerOptions задайте поле title и поле snippet .
  2. В onMapLongClick() установите поле title в значение "Установленная метка". В поле snippet установите координаты местоположения внутри метода addMarker() . 
map.setOnMapLongClickListener(new GoogleMap.OnMapLongClickListener() {
   @Override
   public void onMapLongClick(LatLng latLng) {
       String snippet = String.format(Locale.getDefault(),
               "Lat: %1$.5f, Long: %2$.5f",
               latLng.latitude,
               latLng.longitude);

       map.addMarker(new MarkerOptions()
               .position(latLng)
               .title(getString(R.string.dropped_pin))
               .snippet(snippet));
   }
});
  1. Запустите приложение. Нажмите и удерживайте на карте, чтобы установить маркер местоположения. Коснитесь маркера, чтобы открыть информационное окно.

2.4 Добавить слушатель POI

По умолчанию на карте отображаются точки интереса (POI) вместе с соответствующими значками. К точкам интереса относятся парки, школы, правительственные здания и многое другое. Если тип карты установлен на normal , на карте также отображаются коммерческие точки интереса. Коммерческие точки интереса представляют собой такие предприятия, как магазины, рестораны и отели.

На этом шаге вы добавляете на карту GoogleMap.OnPoiClickListener . Этот обработчик событий немедленно размещает маркер на карте, не дожидаясь касания и удержания. Обработчик событий также отображает информационное окно с названием точки интереса.

Маркер точки интереса

  1. Создайте в классе MapsActivity метод-заглушку с именем setPoiClick() , который принимает в качестве аргумента final GoogleMap и возвращает void : 
private void setPoiClick(final GoogleMap map) {}
  1. В методе setPoiClick() установите обработчик OnPoiClickListener для переданной карты GoogleMap : 
map.setOnPoiClickListener(new GoogleMap.OnPoiClickListener() {
   @Override
   public void onPoiClick(PointOfInterest poi) {
   }
});
  1. В методе onPoiClick() разместите маркер в месте расположения точки интереса (POI). Установите заголовок равным названию POI. Сохраните результат в переменную с именем poiMarker . 
public void onPoiClick(PointOfInterest poi) {
   Marker poiMarker = mMap.addMarker(new MarkerOptions()
       .position(poi.latLng)
       .title(poi.name);
}
  1. Вызовите метод showInfoWindow() у poiMarker , чтобы немедленно отобразить информационное окно. 
poiMarker.showInfoWindow();
  1. Вызовите setPoiClick() в конце метода onMapReady() . Передайте в качестве mMap .
  2. Запустите приложение и найдите интересующую вас точку (POI), например, парк. Коснитесь точки интереса, чтобы установить на ней маркер и отобразить ее название в информационном окне.

5. Задание 3. Оформите свою карту.

В Google Maps можно настроить множество способов, придав карте уникальный внешний вид и стиль.

Вы можете настроить объект MapFragment , используя доступные XML-атрибуты , как и любой другой фрагмент. Однако на этом шаге вы настраиваете внешний вид и содержимое MapFragment , используя методы объекта GoogleMap . Вы используете онлайн- мастер стилизации , чтобы добавить стиль к вашей карте и настроить маркеры. Вы также добавляете GroundOverlay к вашему домашнему местоположению, который масштабируется и вращается вместе с картой.

3.1 Добавьте стиль к вашей карте

Чтобы создать индивидуальный стиль для вашей карты, вы генерируете JSON-файл, в котором указывается, как отображаются объекты на карте. Вам не нужно создавать этот JSON-файл вручную: Google предоставляет Мастер стилизации , который генерирует JSON-файл для вас после того, как вы визуально оформите свою карту. В этом практическом примере вы оформляете карту для «ночного режима», то есть карта использует приглушенные цвета и низкий контраст для использования в ночное время.

  1. Перейдите по ссылке https://mapstyle.withgoogle.com/ в вашем браузере.
  2. Выберите «Создать стиль» .
  3. Выберите ночную тему.
  4. В нижней части меню нажмите «Дополнительные параметры» .
  5. В нижней части списка «Тип объекта» выберите «Вода» > «Заливка ». Измените цвет воды на темно-синий (например, #160064).
  6. Нажмите «Готово» . Скопируйте JSON-код из появившегося всплывающего окна.
  7. В Android Studio создайте в директории res каталог ресурсов с именем raw . Создайте в папке res/raw файл с именем map_style.json .
  8. Вставьте JSON-код в новый файл ресурсов.
  9. Чтобы задать стиль JSON для карты, вызовите setMapStyle() для объекта GoogleMap . Передайте объект MapStyleOptions , который загрузит JSON-файл. Метод setMapStyle() возвращает логическое значение, указывающее на успешность применения стиля. Если файл не может быть загружен, метод генерирует исключение Resources.NotFoundException .

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

     try {
        // Customize the styling of the base map using a JSON object defined
        // in a raw resource file.
        boolean success = googleMap.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
                   this, R.raw.map_style));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
     } catch (Resources.NotFoundException e) {
        Log.e(TAG, "Can't find style. Error: ", e);
     }
  1. Запустите приложение. Новое оформление должно отображаться в normal режиме карты.

Google Maps в ночном режиме

3.2 Оформите свой маркер

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

  1. В методе onMapLongClick() добавьте следующую строку кода в конструктор MarkerOptions() , чтобы использовать маркер по умолчанию, но изменить его цвет на синий: 
.icon(BitmapDescriptorFactory.defaultMarker
       (BitmapDescriptorFactory.HUE_BLUE))
  1. Запустите приложение. Теперь размещенные вами маркеры будут синего цвета, что лучше соответствует ночному режиму приложения.

Обратите внимание, что маркеры POI по-прежнему красные, потому что вы не добавили стили в метод onPoiClick() .

3.3 Добавить наложение

Один из способов персонализации карты Google — рисование поверх неё. Этот метод полезен, если вы хотите выделить определённый тип мест, например, популярные места для рыбалки. Поддерживаются три типа наложений:

  • Фигуры: Вы можете добавлять на карту ломаные линии , многоугольники и круги .
  • Объекты TileOverlay : Наложение тайлов определяет набор изображений, которые добавляются поверх базовых тайлов карты. Наложения тайлов полезны, когда вы хотите добавить на карту большое количество изображений. Типичное наложение тайлов охватывает большую географическую область.
  • Объекты GroundOverlay : Наложение на карту — это изображение, привязанное к карте. В отличие от маркеров, наложения на карту ориентированы относительно поверхности Земли, а не относительно экрана. Вращение, наклон или масштабирование карты изменяют ориентацию изображения. Наложения на карту полезны, когда необходимо зафиксировать одно изображение в одной области карты.

На этом шаге вы добавляете на карту местности наложение изображения в виде робота Android в соответствии с вашим домашним местоположением.

  1. Скачайте это изображение для Android и сохраните его в папке res/drawable .
  2. В onMapReady() , после вызова функции перемещения камеры в исходное положение, создайте объект GroundOverlayOptions . Присвойте этот объект переменной с именем homeOverlay : 
GroundOverlayOptions homeOverlay = new GroundOverlayOptions();
  1. Используйте метод BitmapDescriptorFactory.fromResource() для создания объекта BitmapDescriptor из приведенного выше изображения. Передайте этот объект в метод image() объекта GroundOverlayOptions : 
GroundOverlayOptions homeOverlay = new GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.android));
  1. Установите свойство position для объекта GroundOverlayOptions , вызвав метод position() . Передайте объект ` home LatLng ) и число float для ширины желаемого наложения в метрах. В этом примере хорошо подойдет ширина 100 м: 
GroundOverlayOptions homeOverlay = new GroundOverlayOptions()
     .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
       .position(home, 100);
  1. Вызовите addGroundOverlay() для объекта GoogleMap . Передайте ему объект GroundOverlayOptions : 
mMap.addGroundOverlay(homeOverlay);
  1. Запустите приложение. Увеличьте масштаб до своего местоположения, и вы увидите изображение Android в виде наложения.

6. Задание 4. Включите отслеживание местоположения и просмотр улиц.

Пользователи часто используют Google Maps, чтобы узнать свое текущее местоположение, и вы можете получить данные о местоположении устройства с помощью API служб определения местоположения . Чтобы отобразить местоположение устройства на карте без дополнительного использования данных Location , вы можете использовать слой данных о местоположении .

Слой данных о местоположении добавляет кнопку «Мое местоположение» в правом верхнем углу карты. При нажатии на кнопку карта центрируется на местоположении устройства. Местоположение отображается в виде синей точки, если устройство неподвижно, и в виде синей стрелки, если устройство движется.

Оформленная карта Google с отслеживанием местоположения.

Вы можете предоставить дополнительную информацию о местоположении, используя Google Street View, который представляет собой панорамное изображение заданной местности, по которому можно перемещаться.

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

4.1 Включить отслеживание местоположения

Для включения отслеживания местоположения в Google Maps достаточно одной строки кода. Однако необходимо убедиться, что пользователь предоставил разрешения на доступ к местоположению (используя модель разрешений во время выполнения).

На этом шаге вы запрашиваете разрешение на определение местоположения и включаете отслеживание местоположения.

  1. В файле AndroidManifest.xml убедитесь, что разрешение FINE_LOCATION уже присутствует. Android Studio добавила это разрешение при выборе шаблона Google Maps.
  2. Чтобы включить отслеживание местоположения в вашем приложении, создайте в MapsActivity метод с именем enableMyLocation() , который не принимает аргументов и ничего не возвращает.
  3. Определите метод enableMyLocation() . Проверьте наличие разрешения ACCESS_FINE_LOCATION . Если разрешение предоставлено, включите слой местоположения. В противном случае запросите разрешение: 
private void enableMyLocation() {
   if (ContextCompat.checkSelfPermission(this,
           Manifest.permission.ACCESS_FINE_LOCATION)
           == PackageManager.PERMISSION_GRANTED) {
       mMap.setMyLocationEnabled(true);
   } else {
       ActivityCompat.requestPermissions(this, new String[]
                       {Manifest.permission.ACCESS_FINE_LOCATION},
               REQUEST_LOCATION_PERMISSION);
   }
}
  1. Вызовите enableMyLocation() из функции обратного вызова onMapReady() , чтобы включить слой местоположения.
  2. Переопределите метод onRequestPermissionsResult() . Если разрешение предоставлено, вызовите enableMyLocation() : 
@Override
public void onRequestPermissionsResult(int requestCode,
       @NonNull String[] permissions,
       @NonNull int[] grantResults) {
   // Check if location permissions are granted and if so enable the
   // location data layer.
   switch (requestCode) {
       case REQUEST_LOCATION_PERMISSION:
           if (grantResults.length > 0
                   && grantResults[0]
                   == PackageManager.PERMISSION_GRANTED) {
               enableMyLocation();
               break;
           }
   }
}
  1. Запустите приложение. В правом верхнем углу теперь находится кнопка «Мое местоположение» , которая отображает текущее местоположение устройства.

4.2 Включить режим просмотра улиц

Google Maps предоставляет функцию Street View, которая представляет собой панорамный вид местности с элементами управления для навигации по заданному маршруту. Функция Street View не имеет глобального покрытия .

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

  1. Различайте маркеры POI от других маркеров, поскольку вам необходимо, чтобы функциональность вашего приложения работала только с маркерами POI. Таким образом, вы сможете запускать Street View, когда пользователь нажимает на информационное окно POI, но не когда пользователь нажимает на любой другой тип маркера.

Класс Marker включает метод setTag() , который позволяет прикреплять данные. (Данные могут быть любыми, наследующимися от Object ). Вы будете устанавливать тег для маркеров, которые создаются, когда пользователи щелкают по точкам интереса (POI).

  1. Когда пользователь нажимает на отмеченное информационное окно в обработчике события OnInfoWindowClickListener , замените MapFragment на StreetViewPanoramaFragment . (В приведенном ниже коде используются SupportMapFragment и SupportStreetViewPanoramaFragment для поддержки версий Android ниже API 12.)

Если какие-либо фрагменты изменяются во время выполнения, их необходимо добавить в содержащий их класс Activity , а не статически в XML-файл.

Отметьте маркер POI.

  1. В функции обратного вызова onPoiClick() вызовите setTag() для poiMarker . Передайте любую произвольную строку: 
poiMarker.setTag("poi");

Замените статический объект SupportMapFragment экземпляром, созданным во время выполнения.

  1. Откройте activity_maps.xml и измените элемент на frame layout, который будет служить контейнером для ваших фрагментов: 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/fragment_container"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />
  1. В onCreate() класса MapsActivity удалите код, который ищет SupportMapFragment по ID, поскольку в XML-файле больше нет статического объекта SupportMapFragment . Вместо этого создайте новый экземпляр SupportMapFragment во время выполнения, вызвав SupportMapFragment.newInstance() : 
SupportMapFragment mapFragment = SupportMapFragment.newInstance();
  1. Добавьте фрагмент в FrameLayout , используя транзакцию фрагмента с помощью FragmentManager : 
getSupportFragmentManager().beginTransaction()
       .add(R.id.fragment_container, mapFragment).commit();
  1. Сохраните строку кода, которая запускает асинхронную загрузку карты: 
mapFragment.getMapAsync(this);

Установите обработчик события OnInfoWindowClickListener и проверьте тег маркера.

  1. Создайте в классе MapsActivity метод-заглушку с именем setInfoWindowClickToPanorama() , который принимает в качестве аргумента объект GoogleMap и возвращает void : 
private void setInfoWindowClickToPanorama(GoogleMap map) {}
  1. Установите обработчик OnInfoWindowClickListener для карты GoogleMap : 
map.setOnInfoWindowClickListener(
       new GoogleMap.OnInfoWindowClickListener() {
           @Override
           public void onInfoWindowClick(Marker marker) {
           }
       });
  1. В методе onInfoWindowClick() проверьте, содержит ли маркер строковый тег, который вы установили в методе onPoiClick() : 
if (marker.getTag() == "poi") {}

Замените SupportMapFragment на SupportStreetViewPanoramaFragment.

  1. В случае, если маркер содержит тег, укажите местоположение для панорамы Street View, используя объект StreetViewPanoramaOptions . Установите свойство position объекта в положение переданного маркера: 
StreetViewPanoramaOptions options =
       new StreetViewPanoramaOptions().position(
               marker.getPosition());
  1. Создайте новый экземпляр класса SupportStreetViewPanoramaFragment , передав в него созданный вами объект options : 
SupportStreetViewPanoramaFragment streetViewFragment
       = SupportStreetViewPanoramaFragment
       .newInstance(options);
  1. Начните транзакцию фрагмента. Замените содержимое контейнера фрагмента новым фрагментом streetViewFragment . Добавьте транзакцию в стек возврата, чтобы нажатие кнопки «Назад» возвращало вас к SupportMapFragment , а не закрывало приложение: 
getSupportFragmentManager().beginTransaction()
       .replace(R.id.fragment_container,
               streetViewFragment)
       .addToBackStack(null).commit();
  1. После вызова метода setPoiClick() вызовите setInfoWindowClickToPanorama(mMap) в onMapReady() setPoiClick().
  2. Запустите приложение. Увеличьте масштаб до города, в котором есть функция Street View , например, Маунтин-Вью (где находится штаб-квартира Google), и найдите интересующую вас точку (POI), например, парк. Коснитесь POI, чтобы установить маркер и открыть информационное окно. Коснитесь информационного окна, чтобы перейти в режим Street View для местоположения маркера. Нажмите кнопку «Назад», чтобы вернуться к фрагменту карты.

Google Street View в приложении для Android

7. Код решения

Код решения Wander .

8. Задача по программированию

Задача: Если нажать на информационное окно объекта POI в месте, где нет покрытия Street View, появится черный экран.

  • Чтобы проверить, доступен ли режим просмотра улиц в определенной области, реализуйте функцию обратного вызова OnStreetViewPanomaraReady в сочетании с обработчиком StreetViewPanorama.OnStreetViewPanoramaChangeListener .
  • Если в выбранной области функция Street View недоступна, вернитесь к фрагменту карты и отобразите сообщение об ошибке.

9. Резюме

  • Для использования API карт вам потребуется ключ API из консоли Google API .
  • В Android Studio использование шаблона Activity для Google Maps генерирует Activity с одним SupportMapFragment в макете приложения. Шаблон также добавляет ACCESS_FINE_PERMISSION в манифест приложения, реализует OnMapReadyCallback в вашей Activity и переопределяет необходимый метод onMapReady() .

Чтобы изменить тип карты GoogleMap во время выполнения, используйте метод GoogleMap.setMapType() . Карта Google Maps может иметь один из следующих типов:

  • Обычный режим : Типичная дорожная карта. Показаны дороги, некоторые объекты, созданные человеком, и важные природные объекты, такие как реки. Также видны подписи к дорогам и объектам.
  • Гибридный режим : данные спутниковых снимков с добавлением дорожных карт. Также отображаются названия дорог и объектов.
  • Спутник : Фотографические данные. Надписи на дорогах и объектах не видны.
  • Рельеф : Топографические данные. Карта включает цвета, горизонтали, обозначения и перспективную штриховку. Также видны некоторые дороги и обозначения.
  • Нет **:** Карты нет.

О Google Maps:

  • Маркер — это указатель, обозначающий конкретное географическое местоположение.
  • При нажатии на маркер по умолчанию отображается информационное окно с информацией о местоположении.
  • По умолчанию на базовой карте отображаются объекты интереса (POI) вместе с соответствующими значками. К объектам интереса относятся парки, школы, правительственные здания и многое другое.
  • Кроме того, объекты коммерческой инфраструктуры (магазины, рестораны, отели и т. д.) по умолчанию отображаются на карте, если выбран normal тип карты.
  • С помощью обработчика событий кликов по точкам OnPoiClickListener можно отслеживать клики.
  • С помощью мастера стилей можно изменить внешний вид практически всех элементов карты Google. Мастер стилей генерирует JSON-файл, который вы передаете в карту Google с помощью метода setMapStyle() .
  • Вы можете настроить свои маркеры, изменив цвет по умолчанию или заменив значок маркера по умолчанию на собственное изображение.

Другая важная информация:

  • Используйте наложение рельефа местности , чтобы привязать изображение к географическому местоположению.
  • Используйте объект GroundOverlayOptions , чтобы указать изображение, его размер в метрах и положение. Передайте этот объект методу GoogleMap.addGroundOverlay() , чтобы установить наложение на карту.
  • При условии, что ваше приложение имеет разрешение ACCESS_FINE_LOCATION , вы можете включить отслеживание местоположения, используя метод mMap.setMyLocationEnabled(true) .
  • Google Street View предоставляет панорамные 360-градусные виды с обозначенных дорог на всей территории покрытия.
  • Используйте метод StreetViewPanoramaFragment.newInstance() для создания нового фрагмента Street View.
  • Для указания параметров отображения используйте объект StreetViewPanoramaOptions . Передайте этот объект в метод newInstance() .

10. Узнайте больше

Соответствующая концептуальная документация находится в разделе 9.1: Google Maps API .

Документация для разработчиков Android:

Справочная документация:

11. Домашнее задание

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

  • При необходимости задавайте домашние задания.
  • Объясните студентам, как сдавать домашние задания.
  • Оцените домашние задания.

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

Если вы выполняете это практическое задание самостоятельно, можете использовать эти домашние задания для проверки своих знаний.

Создайте и запустите приложение.

  1. Создайте новое приложение, использующее шаблон «Действие Google Maps», которое будет загружать Google Maps при запуске приложения.
  2. После загрузки карты Google переместите камеру на местоположение вашей школы, вашего дома или любое другое место, имеющее для вас значение.
  3. Добавьте на карту две метки: одну у местоположения вашей школы, а другую — у вашего дома или другого значимого для вас места.
  4. Настройте значки маркеров, изменив цвет по умолчанию или заменив значок маркера по умолчанию на собственное изображение.

Подсказка: см. документацию onMapReady (GoogleMap googleMap) .

Ответьте на эти вопросы

Вопрос 1

Какой метод вызывается, когда карта загружена и готова к использованию в приложении?

Вопрос 2

Какие компоненты Android можно использовать для интеграции Google Maps в ваше приложение?

  • MapView и MapFragment
  • MapFragment и MapActivity
  • MapView и MapActivity
  • Только MapFragment

Вопрос 3

Какие типы карт предлагает API Google Maps для Android?

  • Обычный, гибридный, рельефный, спутниковый и дорожная карта
  • Обычный, гибридный, наземный, спутниковый и «нет»
  • Гибридный, рельеф местности, спутник, дорожная карта и «ничего»
  • Нормальный, рельеф, спутниковый снимок, карта изображения и «нет»

Вопрос 4

Какой интерфейс вы используете для добавления функциональности по клику к точке интереса (POI)?

  • GoogleMap.OnPoiListener
  • GoogleMap.OnPoiClickListener
  • GoogleMap.OnPoiClick
  • GoogleMap.OnPoiClicked

Отправьте свою заявку на оценку.

Руководство для проверяющих работы

Убедитесь, что приложение обладает следующими функциями:

  • При запуске приложения карта Google отображается корректно, что указывает на правильную генерацию ключа API.
  • После загрузки карты Google камера перемещается к месту жительства или учебы ученика. В коде этот шаг должен выполняться в методе обратного вызова onMapReady (GoogleMap googleMap) .
  • Маркеры размещаются в школе, где учится ученик, и в другом месте, например, дома у ученика.
  • Оба маркера настраиваются индивидуально. Например, маркеры могут использовать цвет, отличный от стандартного красного, или пользовательскую иконку.

12. Следующая практическая работа.

Чтобы посмотреть все практические задания в рамках курса «Расширенная разработка под Android», посетите страницу с практическими заданиями по курсу «Расширенная разработка под Android» .