На страницах своего блога я рассказывал уже о том, как можно вывести данные на карту Google Maps, используя PHP и MySQL.
В этой заметке я продолжу рассказ об этой теме, я расскажу, как можно вывести в информационное окно (балун) html-код: картинку и ссылку на сайт.
В начале, мы в базе данных создадим таблицу markers , в которой будем хранить информацию о метках.
Это можно сделать, используя утилиту PhpMyAdmin выполнив следующий SQL-код:
CREATE TABLE IF NOT EXISTS `markers` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `address` varchar(255) NOT NULL, `ssilka` varchar(255) NOT NULL, `images` varchar(255) NOT NULL, `lat` float(10,6) NOT NULL, `lng` float(10,6) NOT NULL, `type` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; |
Здесь, id – уникальный идентификатор записи, name – служит для хранения названия метки, address – адрес метки, ssilka — адрес для гиперссылки, images — адрес файла с изображением, поля lat и lng – служат для хранения значений широты и долготы соответственно, type – тип объекта.
Добавим в таблицу предварительно мной подготовленные данные.
Это также можно сделать, используя утилиту PhpMyAdmin выполнив следующий SQL-код:
INSERT INTO `markers` (`id`, `name`, `address`, `ssilka`, `images`, `lat`, `lng`, `type`) VALUES (1, 'Кинотеатр Канавинский', 'ул. Фильченкова, 7', 'http://centerfilm.ru.proton.mtw.ru/kt/detail.php?ID=1851', 'images/kanavinskiy.jpg', 43.944336, 56.317978, 'kinoteatr'), (2, 'Кинотеатр Синема Парк', 'ул. Родионова, 187', 'http://www.cinemapark.ru', 'images/sinimapark.jpg', 44.073826, 56.308056, 'kinoteatr'), (3, 'Кинотеатр КАРО ФИЛЬМ в ТЦ Шоколад', 'ул. Белинского, 124', 'http://www.karofilm.ru/cgi-bin/show.pl?option=cinema_description&id=19', 'images/chocolate_1.jpg', 44.026299, 56.319271, 'kinoteatr'), (4, 'Комедия, Нижегородский театр', 'Грузинская ул., 23', 'http://comedia.nnov.ru/', 'images/comedia.jpg', 44.002319, 56.320202, 'teatr'), (5, 'Нижегородский государственный академический театр оперы и балета им. А. С. Пушкина', 'Белинского ул., 59', 'http://www.opera.nnov.ru/', 'images/operteatr.jpg', 44.017063, 56.315697, 'teatr'), (6, 'Нижегородский театр юного зрителя', 'Горького Максима ул., 145', 'http://www.tyuz.ru/', 'images/tyuz.jpg', 44.010487, 56.316444, 'teatr'); |
После этого формируем XML-файл с данными с последующем выводом маркеров на карту Google Maps.
В начале, мы должны получить XML-файл с параметрами маркеров из базы данных MySQL.
Для соединения с базой данных используем файл phpsqlinfo_dbinfo.php из заметки Google Maps – добавление меток на карту пользователями
Для этого я использую самый простой способ – применение оператора echo.
Привожу код файла:
<?php
require("phpsqlinfo_dbinfo.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Выбираем данные о маркерах из таблицы
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Начало XML-файла, вывод с помощью echo
echo '<markers>';
// Повторяем вывод для каждой записи
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'ssilka="' . parseToXML($row['ssilka']) . '" ';
echo 'images="' . parseToXML($row['images']) . '" ';
echo 'lat="' . $row['lng'] . '" ';
echo 'lng="' . $row['lat'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo '/>';
}
//Конец XML-файла
echo '</markers>';
?> |
После того как Вы получили XML-файл с данными необходимо создать карту , используя JavaScript и подгрузить его на нее.
Для того, чтобы загрузить XML-файл на страницу, необходимо использовать API-функцию GDownloadURL. GDownloadURL является как бы оболочкой для метода XMLHttpRequest, который используется для отправки запросов в XML-форме. Первым параметром функции GDownloadURL является путь к XML-файлу. Второй же параметр – это функция, которая будет выполняться при получении ответа от XML.
Примечание: очень важно понять, что GDownloadURL работает асинхронно – функция, являющаяся вторым параметром GDownloadURL, не будет срабатывать, как только Вы применили этот метод. Чем объемней Ваш XML-файл, тем больше потребуется времени для вызова этой функции-параметра. Не следует помещать никакого кода, отвечающего за размещение маркеров на карте, после метода GDownloadURL – его нужно помещать в функцию-параметр.
Функция-параметр необходима для того, чтобы отыскать все элементы “markers” в XML. Для каждого маркера мы восстанавливаем значения названия, адреса, изображения, ссылки, типа и координат, а затем мы передаем эти значения функции creatMarker, которая помещает маркеры на карту.
GDownloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var ssilka = markers[i].getAttribute("ssilka");
var images = markers[i].getAttribute("images");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, ssilka, images, type);
map.addOverlay(marker);
}
}); |
Далее задаем иконки для маркеров аналогично заметке – Организация вывода данных на карту Google Maps, используя PHP и MySQL
После этого мы создаем маркеры и информационные окна.
Вы должны поместить весь код, который необходим для создания маркеров в функцию createMarker. Так как массив customIcons был определен глобально, то мы без помех можем передавать его элементы конструктору класса GMarker. Затем нужно написать HTML-код, который будет отображаться в инфо-окне.
function createMarker(point, name, address, ssilka, images, type) {
var marker = new GMarker(point, customIcons[type]);
var html ='<div style="width: 250px;"><b>' + name +'</b> <br/>' + address+'<br/><img src="'+images+'" with="200"/><br/><a href="'+ssilka+'" target="_blank"/>На сайт</a></div>';
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
} |
Полный код для вывода карты:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Пример вывод данных из базы на карту Google, используя XML-вариант-2</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
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);
var iconGreen = new GIcon();
iconGreen.image = 'http://labs.google.com/ridefinder/images/mm_20_green.png';
iconGreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconGreen.iconSize = new GSize(12, 20);
iconGreen.shadowSize = new GSize(22, 20);
iconGreen.iconAnchor = new GPoint(6, 20);
iconGreen.infoWindowAnchor = new GPoint(5, 1)
var customIcons = [];
customIcons["kinoteatr"] = iconBlue;
customIcons["teatr"] = iconRed;
customIcons["cafe"] = iconGreen;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(56.31,44.01), 13);
GDownloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var ssilka = markers[i].getAttribute("ssilka");
var images = markers[i].getAttribute("images");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, ssilka, images, type);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name, address, ssilka, images, type) {
var marker = new GMarker(point, customIcons[type]);
var html ='<div style="width: 250px;"><b>' + name +'</b> <br/>' + address+'<br/><img src="'+images+'" with="200"/><br/><a href="'+ssilka+'" target="_blank"/>На сайт</a></div>';
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 600px"></div>
<p><a href="/?p=247" title="Организация вывода данных на карту Google Maps, используя PHP и MySQL" target="_blank">Вернуться к тексту заметки</a></p>
</body>
</html> |
Загружаем нашу карту в браузере и наблюдаем
Щелкаем по одному из маркеров
Посмотреть пример в действии можно здесь
Спасибо! Я не думал что можно выводить так на карту
Спасибо Вам за информацию.
Вопрос такой:
Вот если надо обработать GPX файл. Это обычный XML.
Предполжим надо выбрать все точки, это делается элементарно с тегом <wpt
Примерно так как Вы писали:
……
GDownloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("wpt");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("lat");
var address = markers[i].getAttribute("lon");
и так далее…..
Аналочино обрабатывается gpx в случаи с треками, но там другой тег, впрочем это сути не меняет.
Я довольно быстро написал вывод собственных треков и точек на карты Google (через его API)
C треками вообще проблем нет.
Проблема небольшая с точками. Необходимо получить имя точки.
Вот фрагмент GPX:
2010-04-19T06:31:21Z
001
Waypoint
SymbolAndName
Видно что нужно имя в
001
Пока я тупо решаю проблему исправив в блакноте:
То есть искуственно введя атрибут wpt
Cпособ конечно варварский но верный 🙂
К сожалению, потом такой исправленный файл не инпортируется в мапсоурце.
Чего делать? Я просто не понимаю как средствами javaskript (если конечно это возможно) пропарсить xml и получить 001?
В PHP подобная проблема решается несколько проще.
возможно ли таким же способом(с занесением точек ломаной в БД), выводить ломаные линии на карту? заранее, спс.