В предыдущей заметке «Реализация поиска на картах с использованием API Google Maps» я рассмотрел, как можно осуществить поиск по картам Google.
Сейчас мы рассмотрим реализацию поиска по данным пользователя с использованием PHP и MySQL.
Прежде нам нужно создать таблицу markers в базе данных, по которой мы будем осуществлять поиск.
Это можно сделать, используя утилиту PhpMyAdmin выполнив следующий SQL-код:
CREATE TABLE `markers` ( `id` int(11) NOT NULL auto_increment, `name` varchar(120) NOT NULL, `adres` varchar(160) NOT NULL, `lat` float(10,6) NOT NULL, `lng` float(10,6) NOT NULL, PRIMARY KEY (`id`), FULLTEXT KEY `name` (`name`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; |
Здесь, id – уникальный идентификатор записи, name – служит для хранения названия метки, address – адрес метки, поля lat и lng – служат для хранения значений широты и долготы.
Для заполнения таблицы используем файл markers.sql – загрузить
В примере у нас используются три файла: index.html – содержит html и Java script код вывода карты и результатов поиска
Файл phpsqlinfo_dbinfo.php – служит для соединения с базой данных
И файл phpsqlsearch_genxml.php – в нем осуществляется поисковый запрос к таблице в базе данных и формируется XML-код с результатами поиска.
Как и в прошлой заметке за основу я возьму пример для отображения карты с элементами управления.
С начала мы исправим код в разделе BODY, разместив там форму для ввода строки для поиска и кнопки найти, еще область sidebar – для вывода результатов поиска.
Привожу код данной части:
<p> Поиск: <input type="text" id="addressInput"/> <input type="button" onclick="searchLocations()" value="Найти"/> </p> <div id="mymap_div" style="width:800px;"> <div id="sidebar" style="float:left; width: 200px; height: 500px; overflow: auto;"></div> <div id="map" style="margin-left: 200px; width: 600px; height:500px;"></div> </div> |
Далее в раздел HEAD добавляем функцию searchLocations, в ней производится асинхронный вызов php-скрипта phpsqlsearch_genxml.php и в него методом GET передается параметр name – искомая строка.
После этого, обрабатывается ответ, переданный в формате xml и результаты поиска отображаются в области slidebar и на карте.
Код данной функции:
function searchLocations() { var name = document.getElementById('addressInput').value; var searchUrl = 'phpsqlsearch_genxml.php?name=' + name; GDownloadUrl(searchUrl, function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName('marker'); map.clearOverlays(); var sidebar = document.getElementById('sidebar'); sidebar.innerHTML = ''; if (markers.length == 0) { sidebar.innerHTML = 'No results found.'; map.setCenter(new GLatLng(56.317213,43.993976), 12); return; } var bounds = new GLatLngBounds(); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute('name'); var address = markers[i].getAttribute('address'); var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), parseFloat(markers[i].getAttribute('lng'))); var marker = createMarker(point, name, address); map.addOverlay(marker); var sidebarEntry = createSidebarEntry(marker, name, address); sidebar.appendChild(sidebarEntry); bounds.extend(point); } map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); }); } |
Рассмотрим, что выполняется в файле phpsqlsearch_genxml.php
<?php header("Content-type: text/xml"); require("phpsqlinfo_dbinfo.php"); // Get parameters from URL $name = rawurldecode($_GET["name"]); // Start XML file, create parent node $dom = new DOMDocument("1.0"); $node = $dom->createElement("markers"); $parnode = $dom->appendChild($node); $result = mysql_query("SELECT * FROM markers WHERE MATCH ( name ) AGAINST('".$name."' IN BOOLEAN MODE)"); if (!$result) { die("Invalid query: " . mysql_error()); } while ($row = @mysql_fetch_assoc($result)) { $node = $dom->createElement("marker"); $newnode = $parnode->appendChild($node); $newnode->setAttribute("name", $row['name']); $newnode->setAttribute("address", $row['adres']); $newnode->setAttribute("lat", $row['lat']); $newnode->setAttribute("lng", $row['lng']); } echo $dom->saveXML(); ?> |
Здесь принимается преданный параметр name и производиться декодирование URL с помощью команды rawurlencode.
После этого осуществляется запрос к таблице markers в базе данных (файл phpsqlinfo_dbinfo.php содержит команды для соединения с базой данных).
После этого из ответа, используя модель DOM PHP5 формируется xml-файл с данными.
Добавляем после функции searchLocations еще одну createMarker.
В ней к маркеру добавляется обработчик события click, открывается балун с информацией и производится центрирование метки.
Код функции:
function createMarker(point, name, address) { var marker = new GMarker(point); var html = '<b>' + name + '</b><br/><br/>' + address; GEvent.addListener(marker, 'click', function() { map.setCenter(point); marker.openInfoWindowHtml(html); }); return marker; } |
И последняя функция createSidebarEntry.
Ее код:
function createSidebarEntry(marker, name, address) { var div = document.createElement('div'); var html = '<b>' + name + '</b>'; div.innerHTML = html; div.style.cursor = 'pointer'; div.style.marginBottom = '5px'; GEvent.addDomListener(div, 'click', function() { GEvent.trigger(marker, 'click'); }); GEvent.addDomListener(div, 'mouseover', function() { div.style.backgroundColor = '#eee'; }); GEvent.addDomListener(div, 'mouseout', function() { div.style.backgroundColor = '#fff'; }); return div; } |
Здесь создается элемент div с названием найденного объекта, добавляется слушатель события перемещения мыши (меняется цвет фона надписи), а обработчик событие щелчка мыши вызывает открытие балуна с информацией
Полный код можно посмотреть здесьusersearch_gmap.htmll, phpsqlsearch_genxml.php, phpsqlinfo_dbinfo.php.
Давайте проверим наш созданный поиск в работе.
Переходим по ссылке на страницу с картой
В форме поиска набираем — кафе.
Найденные результаты отображаются в боковой панели и виде маркеров на карте.
Щелкнув по одному из названий в панели с боку, например Безухов, арт-кафе ЗАО "Кофебук" , откроется окно с информацией о кафе и произойдет центрирование карты.
Спасибо за публикацию!
Для начинающих очень полезный пример.
Да, вот только в IE8 не работает данный пример.
Запрос не выполняет.
В чём «загвоздка»?
В Firefox и Chrome всё ок!
В IE8, если на латинице к примеру, «Las Vegas» — видит запрос!
Немного позже посмотрю в чем причина, вероятно что-то с кодировками
скажите а есть пример, где вместе реализировано добавление меток, вывод меток и поиск по данным пользователя?
Скажите, а где размещать файлики: phpsqlsearch_genxml.php, phpsqlinfo_dbinfo.php.
Все время пишет : No results found.
Они должны быть в одном катологе. А пишет No results found когда не может ничего найти. Нужно обратить внимание на кодировку данных и файлов скриптов
Увы, не работает пример, если вводить слово «кафе» на кириллице под IE7 — пишет No Result… А под Chrom Google, FF — всё нормально работает!!!
В IE действительно не работает…Кроме того, попытался объединить поиск по данным пользователя с добавлением пользователями данных…Не работает поиск по данным пользователя и вот почему. Записи, добавленные пользователям представлены в такой кодировке: Тес….Записи из базы, которую предлагается импортировать (с данными о кафе) представлены в нормальной кириллице. Поиск по импортированным данным работает (но не в IE), а по данным, введенным пользователем — неработает. ВАЖНО. Вывод данных пользователя из базы работает в обеих вариантах…то есть выводятся маркеры введенные пользователями и импортированные маркеры Кафе…Поэтому к сообществу такой вопрос. Что нужно исправить, чтобы введенные пользователями в балун записи в базу заносились в кириллице как при импорте…
З.Ы. Загрузку изображений сделал…правда пришлось изворачиватся…Использовал библиотеку uploadify, рядом с картой пометил сайдбар с диалогом для загрузки…Картинка загружается через сайдбар, а, непосредственно в балуне пишется название картинки. Пока так, потому-что не нашел как прикрутить диалог загрузки файла к балуну…
Это все ворочу пока на Денвере, так, что,думаю, будут еще грабли при переезде этого хозяйства на хостинг…