Delphi XE5-XE7: работа с Google Static Maps API

уважаемые посетители блога, если Вам понравилась, то, пожалуйста, помогите автору с лечением. Подробности тут.

Наконец-то подвернулась тема для разработки приложения на FMX (FireMonkey) не для примера и самосовершенствования, а для нормальной работы. Собственно, сама идея подобного приложения у меня родилась ещё с того момента, как Embarcadero заявила о поддержки в Delphi Android, но на тот момент было не совсем удобно сбрасывать информацию, накопленную на мобильном устройстве на компьютер и обратно. А сейчас у нас есть компоненты App Tethering о которых вы можете почитать в блоге Александра Божко (самому то мне лень было о них писать да :)), есть компонент WebBrowser, библиотека REST Client Library о которой я уже несколько раз писал и т.д. В общем сейчас в Delphi XE7 для меня имеется весь набор компонентов, чтобы начать проект. Конечно до сих пор в FMX нету компонента TWebBrowser для Windows, но это для меня на данный момент не критично. Идея проекта родилась, как я уже сказал, довольно давно. А точнее, весной 2013 года, когда мне пришлось (или довелось) разрабатывать проект (бумажный, экологический) для одного крупного предприятия нашего славного города. Тогда первоочередной нашей задачей было составить детальную карту-схему предприятия с обозначением на ней каждой вытяжной системы, автостоянки, дымовой трубы и т.д. В общем, побегать нам тогда пришлось не мало, учитывая достаточно крупные размеры предприятия.

И вот в очередной наш выезд на предприятие, держа в руках увесистую стопку листов со схемами цехов для обследования, у меня и появилась мысль: на кой ляд нам все эти бумажки в XXI веке? Ну пришел я в цех, увидел трубу, одиноко торчащую на крыше, поставил точку на схеме. Потом пришел к себе в кабинет, открыл AutoCAD с полной картой-схемой, поставил ту же точку на карте, сохранил. Сплошные косяки и проблемы. Технология прошлого века. Хоть нам по работе и не требуется абсолютная точность указания объекта на карте (погрешность в 2-3 метра даже не рассматривается), но вот эти вот указания объектов «на глазок» — лично меня сильно бесили. Вот я и подумал: почему бы не написать простенькую программку для android, которая будет в нужный момент снимать GPS-координаты и сохранять их? Подошел к точке, которую надо указать на карте-схеме, ткнул кнопку на трубе — GPS-координаты сохранились в БД. Надо запомнить площадку — прошел по периметру, натыкал ряд точек — сохранил. Дома выгрузил БД на компьютер (вот где App Tethering будет в тему), получил готовую карту. Единственный вопрос, который оставался — перевод географических координат в метрические с минимальной погрешностью. Но этот вопрос, в принципе, решается.

Естественно, что по-хорошему, прежде, чем сохранять координаты точки в БД, было бы не плохо посмотреть, что получится на карте. И тут мне и пригодился Google Static Maps API. Этот API не требуется никакой авторизации (хотя ключ доступа рекомендуется использовать), относительно простой и, в целом, его более, чем достаточно для реализации моей простой идеи. Единственное, что немного напрягало — это составление необходимого URL для получения изображения карты. Когда требуется поставить один маркер на карте и показать его — все, вроде бы, просто. Но вот когда надо отобразить сразу несколько маркеров, построить путь (например, чтобы обвести площадку), да ещё и выделить объекты разными цветами, то тут можно легко запутаться в параметрах URL и получить вместо нормальной карты, что-то невероятное.

Чтобы как-то упростить себе дальнейшую работу, я написал небольшой модуль для работы с Google Static Map API в котором создал класс TGoogleMap единственная цель которого — по указанным параметрам карты и объектов на ней выдавать корректный URL для получения карты.

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

1. Указание центра, формата и вида карты

uses
  ..., Google.Maps, System.UITypes;
 
procedure TfrmMain.Button1Click(Sender: TObject);
var
  Map: TGoogleMap;
begin
  Map:=TGoogleMap.Create;
  try
    //формат карты - 32-битный PNG
    Map.MapFormat:=mfPNG32;
    //вид карты - спутник
    Map.MapType:=mtSatellite;
    //центр карты
    Map.Center.Latitude:=55.0269;
    Map.Center.Longitude:=73.3029;
    //добавляем одну метку
    Map.Markers.Add(TMapMarker.Create(55.0269,73.3029));
    Map.Markers.Last.Text:='1';
    //выводим карту в TWebBrowser
    WebBrowser1.Navigate2(Map.URL);
  finally
    Map.Free;
  end;
end;

В результате получим такую карту

http://maps.googleapis.com/maps/api/staticmap?center=55.026900,73.302900&size=400×400&sensor=true&format=png32&maptype=satellite&markers=color:0x000000|label:1|55.026900,73.302900

2. Указание нескольких маркеров разных цветов и размеров

  Map:=TGoogleMap.Create;
  try
    Map.MapFormat:=mfPNG32;
    //вид карты - карта дорог
    Map.MapType:=mtRoadmap;
    //маркер красного цвета, нормального размера
    Map.Markers.Add(TMapMarker.Create(55.0269,73.3029));
    Map.Markers.Last.Color:=clRed;
    Map.Markers.Last.Size:=msMid;
    Map.Markers.Last.Text:='1';
    //маркер зеленого цвета, нормального размера
    Map.Markers.Add(TMapMarker.Create(55.0270,73.3029));
    Map.Markers.Last.Color:=clGreen;
    Map.Markers.Last.Size:=msMid;
    Map.Markers.Last.Text:='2';
    //маркер синего цвета, маленького размера (текст не отобразится)
    Map.Markers.Add(TMapMarker.Create(55.0270,73.3033));
    Map.Markers.Last.Color:=clBlue;
    Map.Markers.Last.Size:=msSmall;
    Map.Markers.Last.Text:='3';
    //маркер желтого цвета, самого маленького размера (текст не отобразится)
    Map.Markers.Add(TMapMarker.Create(55.0269,73.3033));
    Map.Markers.Last.Color:=clYellow;
    Map.Markers.Last.Size:=msTiny;
    Map.Markers.Last.Text:='4';
 
    WebBrowser1.Navigate2(Map.URL);
  finally
    Map.Free;
  end;

В результате получим вот такую карту:

3. Указание путей

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

Map:=TGoogleMap.Create;
  try
    Map.MapFormat:=mfPNG32;
    Map.MapType:=mtRoadmap;
    //добавляем новый путь
    Map.Paths.Add(TMapPath.Create);
    //значение альфа-канала (от 0 - 100% прозрачность до 255 - непрозрачная линия)
    Map.Paths.Last.ColorAlpha:=255;
    //цвет линии
    Map.Paths.Last.Color:=TColorRec.Blue;
    //толщина линии
    Map.Paths.Last.Weight:=2;
    //добавляем точки пути
    Map.Paths.Last.PathData.Add(TMapPoint.Create(55.0269,73.3029));
    Map.Paths.Last.PathData.Add(TMapPoint.Create(55.0270,73.3029));
    Map.Paths.Last.PathData.Add(TMapPoint.Create(55.0270,73.3033));
    Map.Paths.Last.PathData.Add(TMapPoint.Create(55.0269,73.3033));
    Map.Paths.Last.PathData.Add(TMapPoint.Create(55.0269,73.3029));
 
    WebBrowser1.Navigate2(Map.URL);
  finally
    Map.Free;
  end;

Получаем такую карту:

http://maps.googleapis.com/maps/api/staticmap?center=55.026900,73.302900&size=400×400&sensor=false&format=png32&path=weight:2|55.026900,73.302900|55.027000,73.302900|55.027000,73.303300|55.026900,73.303300|55.026900,73.302900

3. Заливка области

Всю площадь, построенную в предыдущем примере, можно залить каким-нибудь цветом, например так:

 Map:=TGoogleMap.Create;
  try
    Map.Scale:=2;//увеличиваем количество пикселей в 2 раза
    Map.MapFormat:=mfPNG32;
    //спутниковая съемка
    Map.MapType:=mtSatellite;
    Map.Sensor:=True;
    Map.Center.Latitude:=55.0269;
    Map.Center.Longitude:=73.3029;
 
    Map.Paths.Add(TMapPath.Create);
    //добавили цвет заливки
    Map.Paths.Last.FillColor:=TColorRec.Yellow;
    //прозрачность заливки (от 0 до 255)
    Map.Paths.Last.FillAlpha:=90;
    Map.Paths.Last.ColorAlpha:=255;
    Map.Paths.Last.Color:=TColorRec.Blue;
    Map.Paths.Last.Weight:=2;
    Map.Paths.Last.PathData.Add(TMapPoint.Create(55.0269,73.3029));
    Map.Paths.Last.PathData.Add(TMapPoint.Create(55.0270,73.3029));
    Map.Paths.Last.PathData.Add(TMapPoint.Create(55.0270,73.3033));
    Map.Paths.Last.PathData.Add(TMapPoint.Create(55.0269,73.3033));
    Map.Paths.Last.PathData.Add(TMapPoint.Create(55.0269,73.3029));
 
    WebBrowser1.Navigate2(Map.URL);
  finally
    Map.Free;
  end;

Получаем вот такую картинку:

http://maps.googleapis.com/maps/api/staticmap?center=55.026900,73.302900&size=400×400&scale=2&sensor=true&format=png32&maptype=satellite&path=weight:2|fillcolor:0xFFFF005A|55.026900,73.302900|55.027000,73.302900|55.027000,73.303300|55.026900,73.303300|55.026900,73.302900

Ну и, конечно, никто не запрещает использовать на карте и маркеры и пути. Код уже приводить не буду, просто соберу все примеры в одну карту:

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

Здесь вся необходимая документация по Google Static Maps API

Скачать исходник: Исходники —> API онлайн-сервисов —> Google API

Книжная полка

	Автор: Дмитрий Осипов Название: *Delphi. Программирование для Windows, OS X, iOS и Android* Описание Подробно рассматривается библиотека FM, позволяющая создавать полнофункциональное программное обеспечение для операционных систем Windows и OS X, а также для смартфонов и планшетных компьютеров, работающих под управлением Android и iOS
	Автор: Андрей Шкрыль Название: *Разработка клиент-серверных приложений в Delphi* Описание: Рассмотрены практические вопросы по разработке клиент-серверных приложений в среде Delphi 7 и Delphi 2005 с использованием СУБД MS SQL Server 2000, InterBase и Firebird. Приведена информация о теории построения реляционных баз данных и языке SQL. Освещены вопросы эксплуатации и администрирования СУБД.
	Автор: Антон Григорьев Название: *О чем не пишут в книгах по Delphi* Описание: Рассмотрены малоосвещенные вопросы программирования в Delphi. Описаны методы интеграции VCL и API. Показаны внутренние механизмы VCL и приведены примеры вмешательства в эти механизмы. Рассмотрено использование сокетов в Delphi: различные режимы их работы, особенности для протоколов TCP и UDP и др.

5 1 голос

Рейтинг статьи