Въведение в разработването на мобилни приложения за картографиране и геолокация с помощта на ion

Никога досега не съм участвал в разработването на картографски и геолокационни мобилни приложения, така че тази тема на конкурса ми стана интересна както от гледна точка на професионално израстване, така и от гледна точка на обикновено човешко любопитство. Естествено подозирах, чеQtQuickзначително ще улесни задачата ми да изучавам темата, но той отново ме изненада приятно с елегантната простота на решаване на проблема.

мобилни

Говорим заQtMobility.location. Между другото, приложението, показано на екранната снимка, съдържа по-малко от страница код в QML, а не ред в C ++.

Вероятно си струва да започнете, според традицията, с минималното „Hello, World. » приложения. Въпреки това, този „Hello, World. ” е малко по-различен от обичайния. Това вече не е скърцането на новоизлюпено пиленце в тъмна неприветлива конзола, а по-скоро неговият слаб победен вик, когато лети към съседния двор. Изглежда така (екранна снимка на това приложение е дадена по-горе):

  1. импортиране на QtQuick 1.1
  2. импортиране на QtMobility.location 1.2
  3. вещ
  4. >вярно
  5. Заглавна лента < >"Здравей свят" ; z: 5; w>"#343434"
  6. Карта
  7. >"nokia"
  8. >
  9. anchors.fill: родител
  10. size.w >//карта
  11. >
  12. > // страница

Основният интересен елемент тук е, разбира се, елементътMap. Ще ви разкажа повече за това. Той отговаря за зареждането и показването на картата. Основната работа в този елемент се извършва от плъгина, описан от елементаPlugin.

Имотcenter– координати на центъра на показаната карта. За да „скочите“ на ново място на картата, просто трябва да променитестойността на свойството center на елементаMap. Можете да се движите по картата не само със скокове, но и плавно с помощта на функциятаmap.pan(dx, dy). dx, dy - отместване наляво/надясно и нагоре/надолу спрямо предишната позиция.

zoomLevelотговаря за мащаба на картата. Като промените стойността на това свойство, можете да намалите / увеличите мащаба. Минималните и максималните стойности се изваждат от свойстватаminimumZoomLevelиmaximumZoomLevel.

mapTypeе типът карта. Налични са следните изгледи:• Map.StreetMap • Map.SatelliteMapDay • Map.SatelliteMapNight • Map.TerrainMap • Map.HybridMap • Map.TransitMap • Map.GrayStreetMap • Map.MobileStreetMap • Map.MobileTerrain Карта • Map.MobileHybridMap • Map.MobileTransitMap • Map.MobileGrayStreetMapЗа правилно показване типът карта трябва, разбира се, да се поддържа от доставчика.

В екранната снимка по-горе се използва тип картаMap.StreetMap. На екранната снимка по-долу -Map.SatelliteMapDay:

разработването
Различни елементи катоMapRectangle, MapCircle, MapText, MapImage, MapPolygon, MapPolylineи др. могат да бъдат добавени към картата като дъщерни обекти на елементаMap. Тези елементи ще се показват автоматично на посочената позиция. Те са много удобни за използване за поставяне на различни маркировки на картата, показване на маршрути, райони и всичко останало, което може да ви е необходимо. Например, по този начин можете да покажете текста на картата в позицията, от която се нуждаем:

Или по този начин можете да маркирате текущите координати на потребителя на картата с жълт кръг:

Но за да маркирате координатите на потребителя, първо трябва да ги знаете. С QtMobility това също става по елементарен начин. ИQML PositionSource Elementще ни помогне с това. Презможете да получите информация за неща като текущата ви позиция, надморска височина и скорост.

разработването

Следната част от кода демонстрира какво може да се извлече от този елемент и как:

  1. импортиране на Qt 4.7
  2. импортиране на QtMobility.location 1.2
  3. Правоъгълник
  4. >вярно
  5. // nmeaSource: "nmealog.txt"
  6. >
  7. Колона
  8. Текст
  9. Текст
  10. Текст
  11. Текст
  12. Текст
  13. Текст
  14. Текст
  15. Текст
  16. Текст
  17. Текст
  18. Текст
  19. Текст "longitudeValid: " + positionSource.position.longitudeVal >"latitudeValid: " + positionSource.position.latitudeVal >"speedValid: " + positionSource.position.speedVal >функция printableMethod(метод)
  20. ако (метод == PositionSource.SatellitePositioningMethod)
  21. върнете "Сателит" ;
  22. иначе, ако (метод == PositionSource.NoPositioningMethod)
  23. върнете „Не е налично“
  24. иначе ако (метод == PositionSource.NonSatellitePositioningMethod)
  25. връщане "Не е сателит"
  26. иначе ако (метод == PositionSource.AllPositioningMethods)
  27. върне "Всички/множество"
  28. върне "изходна грешка";
  29. >
  30. >

разработването

Също така се интересувах как да получа глобалните координати на обект, който вече е показан на екрана. Оказа се, че с QtMobility това също е много просто. Функциятаmap.toCoordinate()преобразува екранните координати на обект в глобални координати. Докосна обект на екрана - получи координати:

  1. onPressed:
  2. console.log( 'latitude = ' + (map.toCoordinate(Qt.point(mouse.x,mouse.y))).latitude);
  3. console.log( 'дължина = ' +(map.toCoordinate(Qt.point(mouse.x,mouse.y))).longitude);
  4. >

OVI Maps API Playground:

разработването

И тук можете да получите грант за тестов период на Yandex.Cloud. Необходимо е само да въведете "Habr" в полето "секретна парола".