УДК 004

ПРИМЕНЕНИЕ СРЕДСТВ MYSQL И GOOGLE MAPS API ДЛЯ ВЫВОДА КАРТОГРАФИЧЕСКОЙ ИНФОРМАЦИИ

Зубехин Андрей Аркадьевич1, Рыбанов Александр Александрович2
1Волжский политехнический институт (филиал) Волгоградского государственного технического университета, студент второго курса направления "Программная инженерия"
2Волжский политехнический институт (филиал) Волгоградского государственного технического университета, к. т. н., доцент, заведующий кафедрой "Информатика и технология программирования"

Аннотация
В данной статье рассматривается сервис Google Maps API. Основной темой статьи является применение MySQL для вывода картографической информации. Приведенные автором примеры помогут освоить базовые знания сервиса Google Maps и MySQL.

Ключевые слова: картографическая информация


APPLICATION OF MEANS OF MYSQL AND GOOGLE MAPS API FOR A CONCLUSION OF CARTOGRAPHICAL INFORMATION

Zubekhin Andrey Arkadievich1, Rybanov Alexander Aleksandrovich2
1Volzhsky Polytechnical Institute (branch) of the Volgograd State Technical University, student of the Software engineering
2Volzhsky Polytechnical Institute (branch) of the Volgograd State Technical University, Candidate of Engineering Sciences, Associate Professor, Head of Department

Abstract
This article describes the service Google Maps API. The main subject of article is application of MySQL for a conclusion of cartographical information. The examples given by the author will help beginners to master basic knowledge of the Google Maps and MySQL.

Библиографическая ссылка на статью:
Зубехин А.А., Рыбанов А.А. Применение средств MySQL и Google Maps API для вывода картографической информации // Современная техника и технологии. 2016. № 7 [Электронный ресурс]. URL: https://technology.snauka.ru/2016/07/10384 (дата обращения: 12.07.2023).

Введение

Google Maps API – сервис, который представляет набор функциональных API, позволяющих отображать собственные данные на Google Картах. Сервис позволяет создавать приложения, используя спутниковые снимки, технологию просмотра улиц, карты рельефа, маршруты для водителей, стилизованные карты, аналитические данные, огромную базу адресов и другие возможности картографической платформы Google  [2, 5].

Работа с Google Maps

Процесс работы с Google Maps состоит из следующих этапов:

1) Инициализация карты;

2) Добавление метки на карту;

3) Присваивание события метке.

Инициализация карты. Для инициализации карты необходимо создать mapContainer, для визуализации карты :

<div id=”mapContainer”></div>

и подключить скрипт для карты:

<script src=”http://maps.google.com/maps/api/js?sensor=true”></script>

Скрипт cлужит для подключения JS API. Параметр sensor указывает, использует ли ваше приложение различные датчики (например GPS).

Ниже приведен листинг программного кода инициализации карты.

  1. //Листинг 1.
  2. if (navigator.geolocation) {
  3. navigator.geolocation.getCurrentPosition(function(position){
  4. var latitude = position.coords.latitude;
  5. var longitude = position.coords.longitude;
  6. var coords = new google.maps.LatLng(latitude, longitude);
  7. var mapOptions = {
  8. zoom: 15,
  9. center: coords,
  10. mapTypeControl: true,
  11. mapTypeId: google.maps.MapTypeId.ROADMAP };
  12. map = new google.maps.Map(
  13. document.getElementById(“mapContainer”), mapOptions);
  14. }else {
  15. alert(“Geolocation API не поддерживается в вашем браузере”);
  16. };

Опишем параметры, используемые для инициализации карты:

1) center: <координаты>–  координаты центра карты;

2) zoom: <значение> – это увеличение под которым будет карта, от 0 до 18 (0 – минимальное увеличение – карта мира, 18 – максимально детальный масштаб);

3) mapTypeControl - отвечает за скрытие и отображение переключателя типов карт;

4) navigationControlOptions – устанавливает внешний вид для панели навигации (маштабирование и панарамирование) карты;

5) mapTypeId – тип (политическая, физическая, гибрид);

6) google.maps.MapTypeId.ROADMAPодин из типов карт, в данном случае обычная карта;

map – создается карта с параметрами из css файла и опциями описанными выше.

Рисунок 1 – Инициализация карты

Добавление метки на карту. Для добавления на карту метки использется функция google.maps.Marker().

В качестве параметров функции google.maps.Marker(), используются следующие:

1) position <координаты> –  собственно координаты метки;

2) map <имя карты> – на какую карту, помещается метка.

  1. //Листинг 2.
  2. var marker = new google.maps.Marker({
  3. position: coords,
  4. map: map,
  5. });

Рисунок 2 –  Визуализация метки на карте

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

  1. //Листинг 3.
  2. var contentString = “бул. Профсоюзов, 11, Волжский, Волгоградская область”;
  3. var infowindow = new google.maps.InfoWindow({
  4. content: contentString});
  5. google.maps.event.addListener(marker, ‘click’, function() {
  6. infowindow.open(map,marker); });

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

1) content : <текст> – содержимое в метке;

2) google.maps.event.addListener(marker, ‘click’, function() { 

infowindow.open(<имя_карты>,<имя_маркера>) - при клике на метку, показывает окно с информацией, на карте map с привязкой к marker.

3) google.maps.InfoWindow – новое информационное окно с двумя параметрами maxHeigth, maxWidth (необязательные) – переменные определяют максимальную высоту и ширину информационного окна в пикселях.

Рисунок 3 –Отображение информации при нажатии на метку

Взаимодействие Google map API и MySQL

Так как со временем возникает необходимость в увеличении количества объектов наносимых на карту, то для оптимального и эффективного хранения информации используются БД [1, 6-12].  Рассмотрим создание БД и вывод информации для маркеров на Google Maps:

Создадим таблицу из трех столбцов:  id_cord – пригодится  в дальнейшем для связки с другими таблицами; mylat , mylng –  координаты для построения точки на Google maps.

  1. //Листинг 4.
  2. CREATE TABLE coord.mycoord (
  3. id_cord int(11) NOT NULL,
  4. mylat double NOT NULL,
  5. mylng double NOT NULL
  6. )
  7. ENGINE = INNODB;

Создадим файл output.php, в котором будет осуществляться подключение к БД и извлечение, необходимых для вывода на карту, данных с помощью sql-запроса:

  1. //Листинг 5.
  2. $host=‘localhost’;
  3. $user=‘root’;
  4. $pass=;
  5. $name_db=‘coord’;
  6. //Подключаемся к серверу и выбираем текущую БД
  7. $dbh = new PDO(“mysql:host=”.$host.“;dbname=”.$name_db, $user, $pass);
  8. //Кодировка utf8
  9. $dbh->exec(‘SET CHARACTER SET utf8′);
  10. $res = $dbh->query(
  11. SELECT mycoord.mylat
  12. , mycoord.mylng
  13. FROM
  14. coord.mycoord
  15. ); // в переменную res с помощью запроса извлекаются данные из созданных столбцов
  16. //Формирование массива со списком направлений
  17. $cord=array();
  18. while($row = $res->fetch(PDO::FETCH_ASSOC)) // возвращает массив, индексированный именами столбцов результирующего набора
  19. {
  20. $cord[]=array (‘lat’=>$row['mylat'], ‘lng’=>$row['mylng']);
  21. };
  22. $json = json_encode($cord); // Возвращает JSON закодированную строку (string) в случае успеха или FALSE в случае возникновения ошибки.
  23. echo $json;

Для вывода на карту данных, извлеченных из БД, используется ajax запрос. В листинге, приведенном ниже, в переменную $res передается информация из таблицы mycoord. После извлечения данных осуществляется их вывод на карту.

  1. //Листинг 6.
  2. //получение данных для отрисовки
  3. $.ajax({
  4. url:‘output.php’, // путь к php-файлу
  5. type:‘POST’, // метод передачи
  6. success: function(res) // в случае успеха будет вызвана функция содержащая переменную, в которой хранятся данные полученные от сервера
  7. {
  8. res1 = JSON.parse(res);
  9. markers[0] = new google.maps.Marker({
  10. position: new google.maps.LatLng(res1[0].lat,res1[0].lng),
  11. icon: image,
  12. map:map
  13. });

Использование БД [3, 4] позволит упростить хранение, заполнение и вывод данных на карту. Благодаря запросом можно извлекать нужные столбцы из таблицы заполнять их в массив и выводить в виде массива.


Библиографический список
  1. Азаров А.В., Рыбанов А.А. Автоматизированная система расчета метрических характеристик физической схемы базы данных с целью оценки трудоемкости процесса проектирования // Современная техника и технологии. 2014. № 5 (33). С. 39.
  2. Жуйков Р., Шарыгин Е. Методы предварительной оптимизации программ на языке javascript // Труды Института системного программирования РАН. 2015. Т. 27. № -6. С. 67-86.
  3. Кузьмин А.А., Рыбанов А.А. исследование методов количественной оценки схем реляционных баз данных // Успехи современного естествознания. 2011. № 7. С. 137-138.
  4. Морозов А.О., Рыбанов А.А. Разработка автоматизированной системы расчета метрических характеристик mysql базы данных на основе концептуального графа физической схемы // NovaInfo.Ru. 2015. Т. 2. № 34. С. 34-48.
  5. Радоуцкий К.Е., Островская Е.А., Сейфиева Р.А., Фарионик В.А. Использование api google maps для создания пользовательских геоинформационных систем // Iнформацiйно-керуючi системи на залiзничному транспортi. 2013. № 6. С. 6-9.
  6. Рыбанов А.А. Анализ базовых возможностей программных продуктов для исследования метрических характеристик баз данных // NovaInfo.Ru. 2015. Т. 2. № 33. С. 20-28.
  7. Рыбанов А.А. Оценка сложности физической схемы реляционной базы данных//Современная техника и технологии. 2014. № 9 (37). С. 26-30.
  8. Рыбанов А.А., Коростелев Р.А., Киселев В.В. IDEF1X-модель базы данных web-ориентированной информационной системы оценки семантического качества меню пользователя // Молодой ученый. 2013. № 5. С. 170-172.
  9. Рыбанов А.А., Морозов А.О. Автоматизация расчета метрических характеристик физических схем баз данных на основе концептуальных графов // Молодой ученый. 2014. № 9 (68). С. 26-30.
  10. Рыбанов А.А., Усмонов М.С.О., Попов Ф.А., Ануфриева Н.Ю., Бубарева О.А. Информационные системы и технологии / Научный ред. И. А. Рудакова / Центр научной мысли (г. Таганрог). Москва, 2013. Том Часть 4. -90 с.
  11. Рыбанов А.А., Фатеенков М.М. Разработка и анализ хранимой процедуры для получения глубины дерева связей таблицы и схемы базы данных // NovaInfo.Ru. 2015. Т. 1. № 34. С. 41-55.
  12. Черняев А.О., Рыбанов А.А. Разработка и исследование алгоритмов автоматизированного проектирования логических схем реляционных баз данных // В мире научных открытий. 2010. № 4-11. С. 128-129.


Все статьи автора «Зубехин Андрей Аркадьевич»


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

Связь с автором (комментарии/рецензии к статье)

Оставить комментарий

Вы должны авторизоваться, чтобы оставить комментарий.

Если Вы еще не зарегистрированы на сайте, то Вам необходимо зарегистрироваться: