Как создать php карту объекта

Статья посвящена реализации взаимодействия 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 скрипт:

PHP и ООП. Слово this. Конструктор класса.

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

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

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

Заключение

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

1. Извлечение картографических данных из базы данных;
2. Кодирование полученных данных в JSON формат;
3. Парсинг картографических данных в JavaScript;
4. Визуализация полученных картографических данных на карте.

Разработка web-ориентированной и мобильного приложения системы учета и анализа взаимодействия ВУЗа с потенциальными абитуриентами

1. Бородавченко Д.В.
2. Рыбанов А.А.

В данной статье рассмотрены проблемы учета и анализа взаимодействия ВУЗа с потенциальными абитуриентами. Проанализированы основные проблемы связанные с ведением учета и анализа. Разработанна структура системы учета и анализа взаимодействия ВУЗа с потенциальными абитуриентами. Разработанна программная реализация системы, состоящей из web и мобильного приложений. Проведены эксперименты по оценке качества разработанной системы учета и анализа взаимодействия ВУЗа с потенциальными абитуриентами.

Разработка информационной системы поддержки выполнения выпускной квалификационной работы

1. Казаков Д.И.
2. Рыбанов А.А.

В статье рассмотрены проблемы поддержки процесса выполнения выпускных квалификационных работ. Проанализированы основные проблемы студентов, связанные с выполнением ВКР. Разработана структура системы поддержки выполнения выпускных квалификационных работ. Проведены эксперименты по оценке качества разработанной системы.

Работа с Google Maps API / Создание своей карты на JavaScript

Автоматизация процесса оценки выпускных квалификационных работ на основе компетентностного подхода

1. Рыбанов А.А.
2. Кашаев И.И.

В данной статье рассмотрены проблемы процесса защиты выпускных квалификационных работ. На основе компетентностно-ориентированного подхода к оцениванию составлено математическое описание оценки за защиту выпускной квалификационной работы, матетематическое описане оценки уровня сформированности компетенций. На основе фонда оценочных средств разработаны алгоритмы оценки выпускных квалификационных работ. Проведены эксперименты по результатам разработки.

Разработка web-ориентированной системы электронного портфолио

1. Рыбанов А.А.
2. Назаренко А.А.

В данной статье рассмотрены проблемы регистрации учебных, научных и внеучебных достижений студентов. Проанализированы основные проблемы связанные с ведением учета достижений и их оценки. Разработанна структура системы электронного портфолио соответствующая современным ФГОС ВО. Разработанна методика оценивания достижений студентов. Проведены эксперименты по оценке качества разработанной системы электронного портфолио.

Сравнительный анализ библиотек, поддерживающих контрактное программирование

1. Демидов А.А.
2. Лясин Д.Н.
3. Рыбанов А.А.

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

Список литературы

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 (дата обращения: 13.09.2023).

Поделиться

Настоящий ресурс содержит материалы 16+

Источник: novainfo.ru

Создаем интерактивную карту

Raphael — мощная библиотека для работы с векторной графикой в веб проектах. В данном уроке мы разберемся, как создать интерактивную карту её помощью.

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

Raphael (raphael.js)

Raphael — маленькая библиотека JavaScript, которая упрощает работу с векторной графикой в веб проектах.

Raphael использует SVG W3C и VML как основу для создания графики. Каждый графический объект создается как объект DOM и, таким образом, к нему можно присоединить обработчик события или модифицировать в процессе обработки страницы.

paths.js

В данном файле хранятся траектории SVG paths и названия каждой страны.

index.html

Сделаем разметку HTML.

Строим интерактивную карту с помощью Raphael | Демонстрация для сайта RUSELLER.COM

Использование связки из PHP и MySQL совместно с Google Maps

А вот и перевод третьего урока по Google Maps API. Этот урок — как видно из названия — посвящен созданию карт при помощи данных, хранящихся в БД. Как и предыдущие — кросс-пост из моего блога.

• Создание таблицы БД;
• Наполнение таблицы;
• Вывод информации в XML с помощью PHP;
• Создание карты.

СОЗДАНИЕ ТАБЛИЦЫ

Когда создаете таблицу, прежде всего, Вы должны уделить внимание параметрам lat (широта) и lng (долгота) карты. При текущей разрешающей способности Google Maps нам понадобятся только 6 цифр после десятичного знака. Чтобы свести дисковое пространство, занимаемое БД к минимуму, для значений lat (широты) и lng (долготы) рекомендуется выбрать тип данных FLOAT с параметром 10,6. Этот тип позволяет хранить до 6-ти знаков после запятой и до 4-х перед запятой, например -123,456789 градуса. Ваша таблица должна иметь поле id , которое будет первичным ключом для доступа к записям, а также – поле type , в котором будет записан тип заведения (ресторан или бар).
Примечание: в этом уроке используются места, значения широты и долготы которых уже известно и используются для нанесения маркеров на карту. Если же Вы попробуете использовать свою информацию, не имея данных о координатах места, то воспользуйтесь сервисом геокодинга для преобразования адреса места в его координаты. Вот список некоторых геокодинг-сервисов: http://groups.google.com/group/Google-Maps-API/web/resources-non-google-geocoders.
Если Вы предпочитаете создавать таблицы в БД с помощью phpMyAdmin, то ниже расположен скриншот создания таблицы:

Если же Вы не имеете доступ к phpMyAdmin или отдаете предпочтение чистому SQL, то ниже приведен код SQL-запроса:

CREATE TABLE `markers` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR ( 60 ) NOT NULL ,
`address` VARCHAR ( 80 ) NOT NULL ,
`lat` FLOAT ( 10, 6 ) NOT NULL ,
`lng` FLOAT ( 10, 6 ) NOT NULL ,
`type` VARCHAR ( 30 ) NOT NULL
) ENGINE = MYISAM ;

НАПОЛНЕНИЕ ТАБЛИЦЫ

После создания таблицы пришло время наполнить ее информацией. Данные о 10 заведениях Сиэтла приведены ниже. В phpMyAdmin Вы можете использовать опцию ИМПОРТ для того, чтобы вставить в таблицу данные, хранящиеся в различных форматах, включая и CSV. Приложения MS Excel и Google Spreadsheets поддерживают экспорт данных в CSV-формат. Так что Вы легко можете передавать данные из этих приложений в БД MySQL, используя опции экспорта/импорта.
Вот информация, представленная в формате CSV:

Pan Africa Market,#034,47.608941,-122.340145,restaurant
Buddha Thai #034 2222 2nd Ave, Seattle, WA#034 14 Mercer St, Seattle, WA#034 1225 1st Ave, Seattle, WA#034 2230 1st Ave, Seattle, WA#034 1301 Alaskan Way, Seattle, WA#034 2234 2nd Ave, Seattle, WA #034 1416 E Olive Way, Seattle, WA#034 1908 Pike pl, Seattle, WA
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ( ‘Buddha Thai
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ( ‘The Melting Pot’ , ’14 Mercer St, Seattle, WA’ , ‘47.624562’ , ‘-122.356442’ , ‘restaurant’ );
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ( ‘Ipanema Grill’ , ‘1225 1st Ave, Seattle, WA’ , ‘47.606366’ , ‘-122.337656’ , ‘restaurant’ );
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ( ‘Sake House’ , ‘2230 1st Ave, Seattle, WA’ , ‘47.612825’ , ‘-122.34567’ , ‘bar’ );
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ( ‘Crab Pot’ , ‘1301 Alaskan Way, Seattle, WA’ , ‘47.605961’ , ‘-122.34036’ , ‘restaurant’ );
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ( ‘Mama Mexican Kitchen’ , ‘2234 2nd Ave, Seattle, WA’ , ‘47.613975’ , ‘-122.345467’ , ‘bar’ );
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ( ‘Wingdome’ , ‘1416 E Olive Way, Seattle, WA’ , ‘47.617215’ , ‘-122.326584’ , ‘bar’ );
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ( ‘Piroshky Piroshky’ , ‘1908 Pike pl, Seattle, WA’ , ‘47.610127’ , ‘-122.342838’ , ‘restaurant’ );

ВЫВОД ИНФОРМАЦИИ В XML C ПОМОЩЬЮ PHP

К этому моменту у Вас должна быть таблица (которая называется markers) базы данных, заполненная данными. Сейчас Вам нужно написать некоторый PHP-код, который позволит подключиться к БД, взять из нее необходимую информацию и экспортировать ее в XML-файл, с которым будет взаимодействовать карта с помощью асинхронных JavaScript-запросов. Если же Вы никогда не писали на PHP код, позволяющий подключиться к БД, то Вам необходимо посетить сайт php.net и почитать о функциях mysql_connect() , mysql_select_db() , my_sql_query() , и mysql_error() .
Примечание: некоторые уроки предлагают Вам создать страницу с картой как PHP-файл и использовать JavaScript для вывода каждого маркера в отдельности. Такой подход может быть проблематичен. Используя же XML-файл в качестве посредника между БД и картой, Вы ускоряете первоначальную загрузку страницы и облегчаете себе отладку приложения. Вы можете проверять данные, записанные из БД в XML-файл и результат анализа этого файла на JavaScript. И на любой стадии Вы можете обойтись без БД, управляя картой только с помощью статичного XML-файла.
Во-первых, Вы должны вынести информацию о подключении к БД в отдельный файл. Ниже приведен PHP-код, в котором Вы должны прописать собственные имя пользователя, пароль и имя БД:
$username=»username»;
$password=»password»;
$database=»username-databaseName»;
?>
Использование XML-функций PHP для создания XML-файла
Проверьте конфигурацию PHP или попытайтесь использовать функцию domxml_new_doc() для того, чтобы проверить dom_xml -функциональность. Если Вы имеете доступ к dom_xml -функциям, то Вы можете использовать их для создания XML-узлов и вывода XML-документа на экран. С помощью функций dom_xml Вы можете создавать XML-документы практически любой сложности.
В PHP, для начала, нужно инициализировать новый XML-документ и создать родительский узел “marlers”. Затем нужно подключиться к БД и произвести выбор необходимых данных при помощи запроса вида SELECT * (выбрать все) к таблице с именем “markers” и пройтись по всем результатам этой выборки. Для каждой записи в таблице (каждого заведения) будет создаваться свой узел в XML-документе, атрибуты которого будут полями из соответствующей записи таблицы, — этот узел будет присоединяться к родительскому узлу. После этого Вы получите готовый XML-документ.
Примечание: если в БД Вы используете международные символы, то нужно применить кодировку UTF-8 к выводимым данным. Вот функция перекодировки в UTF-8.
Ваш PHP-код должен быть похож на тот, что представлен ниже:
require(#034);
// Создание XML-файла и родительского элемента
$doc = domxml_new_doc(#034);
$node = $doc->create_element(#034);
$parnode = $doc->append_child($node);

// Открытие соединения с MySQL-сервером
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) die(‘Нет соединения : ‘ . mysql_error());
>

// Подключение к конкретной БД
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) die (‘Невозможно использовать БД : ‘ . mysql_error());
>

$xmlfile = $doc->dump_mem();
echo $xmlfile;

?>
Использование PHP-функции echo для создания XML-файла
Если Вы не имеете доступ к функциям dom_xml , то XML-файл можно создать с помощью функции echo . При использовании функции echo нужно будет написать функцию-помощник (например, parseToXML ), которая будет декодировать некоторые специальные символы (>, <,’,”), чтобы не возникало ошибок XML.
В PHP, для начала, нужно подключиться к БД и произвести выбор необходимых данных при помощи запроса вида SELECT * (выбрать все) к таблице с именем “markers” и пройтись по всем результатам этой выборки. Затем необходимо вывести родительский узел при помощи функции echo и пройтись по результатам выборки. При этом необходимо использовать написанную нами функцию parseToXML . Выполнение этого скрипта должно закончиться выводом закрывающего тэга markers .
Примечание: если в БД Вы используете международные символы, то нужно применить кодировку UTF-8 к выводимым данным. Вот функция перекодировки в UTF-8.
Ваш PHP-код должен быть похож на тот, что представлен ниже:
require(#034);

// Открываем соединение с MySQL-сервером
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) die(‘Нет соединения : ‘ . mysql_error());
>

// Устанавливаем соединение с БД
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) die (‘Невозможно использовать БД : ‘ . mysql_error());
>

// Создание XML-кода, вывод родительского элемента
echo »;

?>
Использование DOM-функций PHP для создания XML-файла
Во-первых, необходимо убедиться в том, что Вы используете PHP версии 5. Если Ваша версия PHP ниже, то используйте какой-либо из предыдущих способов.
В PHP, для начала, нужно инициализировать новый XML-документ и создать родительский узел “markers”. Затем нужно подключиться к БД и произвести выбор необходимых данных при помощи запроса вида SELECT * (выбрать все) к таблице с именем “markers” и пройтись по всем результатам этой выборки. Для каждой записи в таблице (каждого заведения) будет создаваться свой узел в XML-документе, атрибуты которого будут полями из соответствующей записи таблицы, — этот узел будет присоединяться к родительскому узлу. После этого Вы получите готовый XML-документ.
Примечание: если в БД Вы используете международные символы, то нужно применить кодировку UTF-8 к выводимым данным. Вот функция перекодировки в UTF-8.

// Создание XML-файла и родительского элемента

$dom = new DOMDocument(#034);
$node = $dom->createElement(#034);
$parnode = $dom->appendChild($node);

// Открытие соединения с MySQL-сервером

$connection=mysql_connect (localhost, $username, $password);
if (!$connection)

// Подключение к конкретной БД

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) die (‘Невозможно использовать БД : ‘ . mysql_error());
>

// Выборка всех записей из таблицы markers

// Цикл прохода по всем выбранным записи; создание узла для каждой

?>
Проверка вывода XML
Запустите этот скрипт, чтобы убедиться в правильности результатов вывода. Если существуют какие-нибудь проблемы с подключением к БД, то можно попробовать удалить строку с заголовком содержимого (text/xml), т.к. она может мешать Вашему браузеру отображать сообщения об ошибках.
Если же скрипт правильно выполнил свою работу, то Вы должны увидеть следующее:

СОЗДАНИЕ КАРТЫ

Раз XML-файл правильно отображается в браузере, то пришло время создать карту, используя JavaScript. Если Вы никогда не имели дела с Google Maps API, то изучите, пожалуйста, основы при помощи официальной документации.
Подгрузка XML-файла
Для того, чтобы загрузить XML-файл на страницу, необходимо использовать API-функцию GDownloadURL . GDownloadURL является как бы оболочкой для метода XMLHttpRequest , который используется для отправки запросов в XML-форме. Первым параметром функции GDownloadURL является путь к XML-файлу. Второй же параметр – это функция, которая будет выполняться при получении ответа от XML.
Примечание: очень важно понять, что GDownloadURL работает асинхронно – функция, являющаяся вторым параметром GDownloadURL , не будет срабатывать, как только Вы применили этот метод. Чем объемней Ваш XML-файл, тем больше потребуется времени для вызова этой функции-параметра. Не следует помещать никакого кода, отвечающего за размещение маркеров на карте, после метода GDownloadURL – его нужно помещать в функцию-параметр.
Функция-параметр необходима для того, чтобы отыскать все элементы “markers” в XML. Для каждого маркера мы восстанавливаем значения названия, адреса, типа и координат, а затем мы передаем эти значения функции creatMarker , которая помещает маркеры на карту.

Создаем иконки для маркеров
Вы можете использовать класс GIcon для определения произваольных изображений, которые будут отображаться в качестве маркера. Для начала определим два объекта: iconBlue и iconRed.
Предупреждение: Вы можете и не определять столько свойств, сколько показано в примере, но, делая так, Вы рискуете столкнуться с различными ошибками позже.
Также можно создать ассоциативный массив, который будет связывать каждый объект GIcon с определенным типом заведения: рестораном или баром. Такой подход поможет Вам в дальнейшем легко разбираться с маркерами, созданными с использованием данных из внешнего XML-файла.

var iconBlue = new GIcon();
iconBlue.image = ‘http://labs.google.com/ridefinder/images/mm_20_blue.png’ ;
iconBlue.shadow = ‘http://labs.google.com/ridefinder/images/mm_20_shadow.png’ ;
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);

var iconRed = new GIcon();
iconRed.image = ‘http://labs.google.com/ridefinder/images/mm_20_red.png’ ;
iconRed.shadow = ‘http://labs.google.com/ridefinder/images/mm_20_shadow.png’ ;
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);

Создание маркеров и инфо-окон
Вы должны поместить весь код, который необходим для создания маркеров в функцию createMarker . Так как массив customIcons был определен глобально, то мы без помех можем передавать его элементы конструктору класса GMarker . Затем нужно написать HTML-код, который будет отображаться в инфо-окне.
Подсказка: некоторые уроки советуют Вам хранить информацию, отформатированную в виде HTML. Но это не есть хорошо, так как Вы не можете свободно манипулировать HTML-форматированием.
После написания отображаемого HTML-кода нужно добавить события для маркеров, чтобы при щелчке по маркеру появлялось инфо-окно.

function createMarker(point, name, address, type) var marker = new GMarker(point, customIcons[type]);
var html = #034 + name + #034 + address;
GEvent.addListener(marker, ‘click’ , function () marker.openInfoWindowHtml(html);
>);
return marker;
>

Собираем все в кучу
Ниже приведен код, который связывает все, что мы написали выше, в единое целое. Как только страница загружается – срабатывает функция загрузки карты load . Эта функция отображает карту, а затем вызывает метод GDownloadUrl . Удостоверьтесь, что функция GDownloadUrl правильно выполняет свою работу и XML-файл отображается в браузере корректно.
А вот и ссылка на готовый пример.
Счасливого Вам коддинга!

Источник: h.amazingsoftworks.com