Использование компонента TMapView в Delphi 10.3 Rio на Android

Компонент TMapView в Delphi появился относительно давно, судя по информации с http://docwiki.embarcadero.com в Delphi XE8. И до недавнего времени я как-то особо не задумывался о его использовании. И вот настал тот самый момент, когда довелось не только ради «спортивного» интереса этот самый TMapView проверить в работе. Учитывая некоторые особенности использования этого компонента TmapView в Delphi, эта статья будет своего рода шпаргалкой для тех, кто решит интегрировать работу с картами в свое Android-приложение «с нуля».

Для того, чтобы наше Android-приложение в Delphi могло использовать в своей работе карты Google нам необходимо:

1. Получить доступ к API Google Maps на Android
2. Правильно настроить наше приложение на работу с картами
3. Правильно запросить права на чтение необходимых данных нашим приложением (например, на чтение данных о местоположении)
4. Научиться использовать возможности TMapView в Delphi.

Все вышеуказанные шаги я буду проходить, используя Delphi 10.3 Rio и смартфон LG Q7+.

1. Получаем доступ к API Google Карт для Android

1.1. Создаем новый проект в Google Cloud Platform

Для этого заходим к консоль Google по адресу https://console.cloud.google.com/. Если у вас не было создано ни одного проекта в консоли, то вы должны увидеть что-то типа этого:

В верху слева (рядом с заголовком «Google Cloud Platform» необходимо нажать ссылку «Выберите проект»:

Откроется окно в котором можно выбрать уже созданный проект или создать новый:

Создаем новый проект, например, с названием «MyMaps»:

После создания нового проекта вас перенаправят в панель управления проектом

Здесь нам необходимо включить необходимый API. Выбираем в меню «API и сервисы — Библиотека»:

В библиотеке нам необходимо найти «Maps SDK for Android» и включить его:

Теперь необходимо создать учётные данные. Снова возвращаемся в главное меню консоли и выбираем «API и сервисы — Учётные данные»:

В появившемся окне выбираем пункт «Создать учётные данные — Ключ API»:

Через некоторое время появится окошко с ключом API в котором необходимо выбрать пункт «Применить ограничения для ключа»:

В новом окне вы можете задать имя (название) ключа и выставить ограничения по типу приложений, использующих ключ. Нам необходимо создать ограничение по типу используемых приложений, выбрав пункт «Приложения для Android»:

Чтобы разрешить использование ключа API только для приложений Android, нам необходимо добавить название пакета и контрольную сумму SHA-1 сертификата разработчика. Для этого я буду использовать сертификат для отладки приложений Delphi для Android.

1.2. Получаем контрольную сумму SHA-1 сертификата разработчика

В принципе, в том же окне где мы выставляли ограничение на ключ, показано как получить SHA-1 сертификата, но не каждый новичок в деле разработки приложений Delphi для Android поймет как этой полезной информацией воспользоваться. Поэтому расписываю всё по шагам.

Во-первых, для работы нам потребуется утилита keytool. По умолчанию она находится в папке «c:\Program Files\Java\jdkX.X.X_XX\bin\» Вместо X.X.X_XX, как вы понимаете, могут стоять различные цифры.

Во-вторых, нам потребуется сертификат разработчика для отладки приложений. Такой сертификат мы можем найти по следующему пути: «c:\Users\%UserName%\AppData\Roaming\Embarcadero\BDS\20.0\». Файл сертификата называется debug.keystore.

В третьих, нам потребуется командная строка Windows в которой мы должны набрать следующие команды:

• cd c:\Users\%UserName%\AppData\Roaming\Embarcadero\BDS\20.0\
• «c:\Program Files\Java\jdkX.X.X_XX\bin\keytool» -list -v -keystore debug.keystore -alias androiddebugkey -storepass android -keypass android

Если вы все сделали правильно, то увидите необходимые для дальнейшей работы данные сертификата:

Копируем контрольную сумму SHA-1 в буфер обмена и возвращаемся в Google Cloud Platform.

1.3. Добавляем ограничения ключа API

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

Что касается второго поля «Контрольная сумма сертификата SHA-1», то здесь всё понятно — записываем в него строку с SHA-1, которую мы получили на предыдущем шаге.

Название пакета необходимо записывать в формате, как указано в подсказке к полю «домен.имя_пакета», например, я задам вот такое имя пакета «ru.webdelphi.mymaps»:

После этого нажимаем кнопку «Готово» и обязательно запоминаем название пакета.

В самом низу окна жмем кнопку «Сохранить» и нас вернут обратно в панель управления в раздел учётных данных где мы сможем увидеть наш ключ API с созданными для него ограничениями:

Можете сразу скопировать ключ API в буфер обмена, так как он нам сейчас пригодится.

2. Настраиваем приложение на работу с картами Google

Создаем в Delphi 10.3 Rio проект «Multi-Device Application» и называем проект именем пакета, которое мы задали в Google Cloud Platform, то есть в нашем случае проект должен называться «mymaps«.

Теперь переходим в настройки проекта «Project — Options — Entitlement List» и выбираем настройки как показано на рисунке:

Далее, переходим в раздел настроек Version Info. Здесь нам необходимо изменить две настройки.

Во-первых, правильно указать название пакета, а именно, заменить «com.embarcadero» на наш домен (он у нас был ru.webdelphi):

Во-вторых, указать ключ API:

Теперь можно нажать кнопку «Save» и приступить к работе с компонентом TMapView в Delphi 10.3 Rio. Но для начала необходимо запросить необходимые права.

3. Запрашиваем необходимые права для использования TMapView в Delphi 10.3 Rio

Внимательный читатель мог бы меня здесь поправить и сказать, что для запроса необходимых прав для нашего приложения мы могли бы воспользоваться всё теми же настройками проекта и просто указать необходимые разрешения в разделе User Permissions вот тут:

И, в принципе, именно так я и сделал, когда первый раз пробовал использовать TMapView и, в итоге, компонент не заработал в Android 8.1.0 так как мне бы хотелось — карта отобразилась, но не работал ни переход на заданные координаты, ни зум карты. О проблеме запроса прав приложением в последних версиях Android писал ещё автор блога «Delphi разработка под Android«. Собственно, из этого же блога я и узнал о новом модуле System.Permissions и о том как запросить необходимые права для приложения.

Для нашего приложения необходимы следующие разрешения:

1. android.permission.ACCESS_FINE_LOCATION
2. android.permission.ACCESS_COARSE_LOCATION
3. android.permission.ACCESS_NETWORK_STATE

Для того, чтобы запросить разрешения я воспользовался примером из папки Samples «c:\Users\Public\Documents\Embarcadero\Studio\20.0\Samples\Object Pascal\Mobile Snippets\Location\». Получился вот такой запрос прав:

procedure TForm16.FormShow(Sender: TObject);
const
  PermissionAccessFineLocation = 'android.permission.ACCESS_FINE_LOCATION';
  PermissionAccessCoarseLocation = 'android.permission.ACCESS_COARSE_LOCATION';
  PermissionAccessNetworkState = 'android.permission.ACCESS_NETWORK_STATE';
begin
    PermissionsService.RequestPermissions([PermissionAccessFineLocation, PermissionAccessCoarseLocation, PermissionAccessNetworkState],
      procedure(const APermissions: TArray; const AGrantResults: TArray)
      begin
        if (Length(AGrantResults) = 3) and (AGrantResults[0] = TPermissionStatus.Granted) and (AGrantResults[1] = TPermissionStatus.Granted) and (AGrantResults[2] = TPermissionStatus.Granted) then
          TDialogService.ShowMessage('Все права получены')
        else
          TDialogService.ShowMessage('Необходимые права не получены');
      end);
end;

После запуска приложения оно попросит разрешение на получение текущего местоположения и после этого можно начинать работу уже непосредственно с компонентом TMapView.

4. Используем TMapView в Delphi 10.3.Rio

Чтобы продемонстрировать некоторые возможности компонента TMapView я накидал вот такой простенький интерфейс приложения:

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

procedure TForm16.LocationSensor1LocationChanged(Sender: TObject;
  const OldLocation, NewLocation: TLocationCoord2D);
const Str = 'Координаты: %s; %s';
var MC: TMapCoordinate;
    MD: TMapMarkerDescriptor;
begin
  MC:=TMapCoordinate.Create(NewLocation.Latitude, NewLocation.Longitude);
  MapView1.Location:=MC; //устанавливаем камеру в новое местоположение
  MD:=TMapMarkerDescriptor.Create(MC, 'Новое местоположение');
  MapView1.AddMarker(MD);//ставим новую метку на карту
 
  Label1.Text:=Format(Str,[NewLocation.Latitude.ToString,
                           NewLocation.Longitude.ToString]);
end;

Результат работы программы показан на рисунке ниже:

Как видите, программа определила мои координаты, поставила метку на карте и вывела координаты на форму.

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