Вывод картографической информации средствами MySQL с использованием web-приложения

NovaInfo 49, с.41-48
Опубликовано
Раздел: Технические науки
Просмотров за месяц: 15
CC BY-NC

Аннотация

Статья посвящена реализации взаимодействия Google Maps API с базой данных MySQL, содержащей картографические данные.

Ключевые слова

PHP, ВЕБ-ПРИЛОЖЕНИЕ, GOOGLE MAPS API, JAVASCRIPT, КАРТА, БАЗА ДАННЫХ, MYSQL

Текст научной работы

Введение

Целью программной разработки — обеспечить возможность вывода на карту объектов, извлеченных из базы данных [1, 6, 9, 12], а именно — координат маркеров карты, информации об объектах. Для реализации были использованы такие инструменты, как GoogleMapsAPI и MySQL [4, 8, 11].

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

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

Работа с Google Maps API

Чтобы добавить на страницу своего сайта карту нужно подключить js скрипт:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ& sensor=false"> </script>

Далее в теле документа необходимо создать который будет содержать в себе карту.

<div id="map "></div>

Следующим этапом является инициализация карты. Функцию navigator.geolocation.getCurrentPosition() передаются текущие координаты пользователя, на основе которых определяется географическое положение пользователя.

navigator.geolocation.getCurrentPosition(function(position) {	var latitude = position.coords.latitude;	var longitude = position.coords.longitude;	varcoords = new google.maps.LatLng(latitude, longitude);	varmapOptions = { zoom: 13, center: coords, mapTypeControl: true, 	   navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},	   mapTypeId: google.maps.MapTypeId.ROADMAP};	var map = new google.maps.Map(document.getElementById("map"), mapOptions); }

При инициализации карты, используя переменную mapOptions, можно определить следующие параметры:

  1. center: <координаты> — координаты центра карты;
  2. Zoom: <число> — увеличение при инициализации;
  3. MapTypeControl: <bool> — отвечает за скрытие и отображение переключателя типов карт;
  4. NavigationControlOptions — внешний вид для панели навигации (маштабирование и панарамирование) карты;
  5. Google.maps.NavigationControlStyle.SMALL — элемент масштабирования, который позволяет масштабировать карту;
  6. MapTypeId — тип (политическая, физическая, гибрид);
  7. Google.maps.MapTypeId.ROADMAP — один из типов карт, в данном случае обычная карта.

Затем в переменной map создается сам объект карты, который помещается в с идентификатором «map» на HTML странице, вместе со всеми опциями. Результат инициализации карты показан на рис. 1.

Инициализированная карта на веб-странице.
Рисунок 1. Инициализированная карта на веб-странице

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

new google.maps.Marker({	position: coords,	map: map,	title: "Your current location!"});

В функцию new google.maps.Marker передаются следующие параметры:

  1. Position: <координаты> — координаты метки;
  2. Map: <идентификатор карты> — на какую карту, помещается метка;
  3. Title: <string> — сообщение, выдаваемое при наведении курсора мыши.

Для того чтобы по нажатию на маркер выводилось информационное окно с данными необходимо инициализировать данные и затем использовать функцию google.maps.event.addListener() для добавления события открытия окна после клика мыши по маркеру.

var infowindow = new google.maps.InfoWindow();google.maps.event.addListener(markers[i], 'click',     function () { //ВЫВОД ОКНА С ИНФОРМАЦИЕЙ            infowindow.setContent(this.buborek);            infowindow.open(map, this); });

В функции используются следующие параметры:

  1. Markers[i]- массив маркеров на которые требуется выводить окна;
  2. Infowindow.setContent — устанавливает содержимое окна из текущего маркера;
  3. Infowindow.open(map,this) — отрисовывает окно на карту.

На рис. 2 приведен пример визуализации маркера и окна, с информацией об учебном заведении.

– Маркер и информационное окно
Рисунок 2. Маркер и информационное окно

Вывод картографической информации из базы данных MySQL

Ниже приведен листинг процесса подключения к базе данных и извлечения из нее картографической информации посредством SQL запроса.

exec('SET CHARACTER SET utf8');  $res=$dbh->query("SELECT * FROM uchzav,info WHERE uchzav.id=info.id");  //Занесение данных из БД в массив  $mass=[];  while ($row=$res->fetch(PDO::FETCH_ASSOC))  {    $mass[]=array('name'=>$row['Name'],        'lat'=>$row['Lat'],        'lng'=>$row['Lng'],        'adr'=>$row['Adress'],        'contact'=>$row['Contact']);  };  //Кодировка массива в json формат с учетом кириллицы  $json=json_encode($mass,JSON_UNESCAPED_UNICODE);  header("Content-Type: text/html; charset=utf-8");  echo $json;?>

В переменных host, user, pass, db_name записаны параметры для подключения к базе данных, которые используются в качестве параметров в функции создания подключения PDO. Для передачи картографических данных в JavaScript [2], необходимо произвести кодировку полученного массива данных в JSON формат при помощи функции json_encode().

Ниже приведена структура базы данных с картографической информацией.

CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);CREATE TABLE info (  id int(11) NOT NULL,  Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL) ENGINE=InnoDB;INSERT INTO info (id, Adress, Contact) VALUES(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');CREATE TABLE uchzav (  id int(11) NOT NULL,  Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,  Lat float NOT NULL,  Lng float NOT NULL) ENGINE=InnoDB;INSERT INTO uchzav  (id, Name, Lat, Lng) VALUES(1, 'МБОУ СОШ №20', 48.7926, 44.7684),(2, 'МБОУ СОШ №18', 48.7899, 44.7607),(3, 'МБОУ СОШ №12', 48.7733, 44.7812),(4, 'МБОУ СОШ №14', 48.7961, 44.7515),(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),(6, 'Волжский политехнический техникум', 48.8079, 44.7293);

Для переноса, закодированного JSON массива в JavaScript, необходимо выполнить AJAXзапрос в JavaScript файле:

$.ajax({    url:'output.php',//запрос данных из базы    type:'POST',    data:  {},    success: function(res)     {                          res1=[];                           res1 = JSON.parse(res);//парсинг в массив                 } });

Используются следующие параметры запроса:

  1. Url: <string> — определяет адрес, на который будет отправлен запрос;
  2. Type: <string> — определяет тип выполняемого запроса (GET или POST);
  3. Data: <oбъект> — данные, которые будут отправлены на сервер;
  4. Success: <функция, массив> - функция, которая будет вызвана в случае удачного завершения запроса к серверу.

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

Теперь программный код для отрисовки маркеров и окон с информацией становится проще и удобнее. Картографические данные (координаты объектов, информация об объектах) в ниже приведенном листинге выводим в цикле на саму карту.

for (var i = 0; i<= res1.length; i++) {  var info = '<p>' + res1[i].name + '</p>' + '<p>' + res1[i].adr + '</p>' + "<p>"        + res1[i].contact + '</p>';  contentStr = '<p>' + info + '</p>';  markers[i] = new google.maps.Marker({            position: new google.maps.LatLng(res1[i].lat, res1[i].lng),            title: res1[i].name,            map: map,            buborek: contentStr        });  google.maps.event.addListener(markers[i], 'click',      function () { //ВЫВОД ОКНА С ИНФОРМАЦИЕЙ                          infowindow.setContent(this.buborek);                          infowindow.open(map, this);        });  markers[i].setMap(map);}

Результат работы продемонстрирован на примере реализации проекта по выводу учебных заведений города на карту в виде маркеров и инфо-окон по нажатию на маркер, а также возможностью применять фильтры для отображения картографической информации (рис. 3).

– Вывод на карту картографических данных из БД
Рисунок 3. Вывод на карту картографических данных из БД

Заключение

Таким образом, работа с картами и базами данных картографической информации [3, 7, 10] значительно упрощает вывод любой информации на карту. Весь процесс работы можно разделить на следующие этапы:

  1. Извлечение картографических данных из базы данных;
  2. Кодирование полученных данных в JSON формат;
  3. Парсинг картографических данных в JavaScript;
  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.

Цитировать

Бородавченко, Д.В. Вывод картографической информации средствами MySQL с использованием web-приложения / Д.В. Бородавченко, А.А. Рыбанов. — Текст : электронный // NovaInfo, 2016. — № 49. — С. 41-48. — URL: https://novainfo.ru/article/7277 (дата обращения: 24.01.2022).

Поделиться