В этой статье я расскажу, как можно реализовать карту с адресами магазинов в разных городах, используя API Яндекс.Карт.
В самом начале нам необходимо подготовить исходные данные и занести их в таблицу базы данных MySQL.
Для примера, это будут адреса магазинов М.Видео в нескольких городах России (Екатеринбург, Казань, Нижний Новгород, Пермь,
Самара и Санкт-Петербург).
Создадим в базе данных таблицу mvideo_shops и добавим в нее данные о магазинах.
Сделать это удобнее, используя файл mvideo_shops.sql и инструмент для администрирования базы данных MySQL – phpMyAdmin.
CREATE TABLE `mvideo_shops` ( `id` int(5) NOT NULL auto_increment, `town` varchar(255) NOT NULL, `address` varchar(255) NOT NULL, `lat` varchar(50) NOT NULL, `lon` varchar(50) NOT NULL, `grafrab` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=48 ; -- -- Дамп данных таблицы `mvideo_shops` -- INSERT INTO `mvideo_shops` (`id`, `town`, `address`, `lat`, `lon`, `grafrab`) VALUES (1, 'Екатеринбург', 'Металлургов, 87 ТЦ «МеГа»', '60.5048217360862', '56.8234714252246', 'Ежедневно с 10:00 до 23:00'), (2, 'Екатеринбург', 'Сибирский тракт дублер, 2 ТРЦ «КомсоМолл»', '60.6716237167975', '56.8295163134229', 'Ежедневно с 10:00 до 23:00'), (3, 'Екатеринбург', 'Халтурина, 55 - цоколь ТРЦ «Карнавал»', '60.5502900177664', '56.8531158103851', 'Ежедневно с 10:00 до 22:00'), (4, 'Екатеринбург', '8 Марта, 149 - 2 этаж ТРЦ «Мегаполис»', '60.6124651470383', '56.8068669582072', 'Ежедневно с 10:00 до 22:00'), (5, 'Екатеринбург', 'Радищева, 55 - 1-2 этаж', '60.5814154330541', '56.8276672035226', 'Ежедневно с 10:00 до 23:00'), (6, 'Екатеринбург', 'Вайнера, 10 - 5 этаж ТЦ «Успенский»', '60.5942434654987', '56.8363106943079', 'Понедельник-Суббота – с 9:00 до 23:00'), (7, 'Казань', 'Ямашева проспект, 71а - 3 этаж ТЦ «Бахетле»', '49.1354134993401', '55.8261659934579', 'Ежедневно с 9:00 до 22:00'), (8, 'Казань', 'Победы проспект, 141 СТЦ «Мега»', '49.2132807355924', '55.7809266576282', 'Будние дни с 10.00 до 24:00'), (9, 'Казань', 'Победы проспект, 50б - 3 этаж ТЦ «Проспект»', '49.2067674216523', '55.7482207243935', 'Ежедневно с 9:00 до 22:00'), (10, 'Казань', 'Сибирский тракт, 34 к13-13а ТОЦ «Грани»', '49.1860536431335', '55.8155380993378', 'Ежедневно с 9:00 до 23:00'), (11, 'Казань', 'Декабристов, 79', '49.0934261835592', '55.8174622817804', 'Ежедневно с 9:00 до 23:00'), (12, 'Казань', 'Петербургская, 1 - 5 этаж ТЦ «Кольцо»', '49.1253304068161', '55.7860148984205', 'Ежедневно с 10:00 до 22:00'), (13, 'Нижний Новгород', 'Кстовский район, деревня Федяково, ТРЦ «МЕГА»', '44.0712821502089', '56.2254578163028', 'Ежедневно с 10:00 до 23:00'), (14, 'Нижний Новгород', 'ул. Веденяпина, 2б, ТЦ «Парк Авеню»', '43.8640136334282', '56.2396057010225', 'Ежедневно с 9:00 до 23:00'), (15, 'Нижний Новгород', 'ул. Родионова, 165 к13, ТЦ «Ганза»', '44.0698463087154', '56.3146008935357', 'Ежедневно с 10:00 до 22:00'), (16, 'Нижний Новгород', 'пл. Революции, 9, ТЦ «Республика», 4 этаж', '43.9476577851007', '56.3203292649522', 'Ежедневно с 9:00 до 22:00'), (17, 'Нижний Новгород', 'ул. Белинского, 61, ТЦ «ЭТАЖИ 2»', '44.0181848274614', '56.3163525867483', 'Ежедневно с 10:00 до 23:00'), (18, 'Нижний Новгород', 'Сормовское ш., 15', '43.9273811083217', '56.3208795648619', 'Ежедневно с 9:00 до 23:00'), (19, 'Пермь', 'Куйбышева, 16 - 3 этаж ТРК «Колизей Синема»', '56.2360534149514', '58.0089139873122', 'Ежедневно с 9:00 до 23:00'), (20, 'Пермь', 'Революции, 13 к2 - 1 этаж ТРК «Семья»', '56.259885905869', '58.0070681599393', 'Ежедневно с 10:00 до 23:00'), (21, 'Пермь', 'Мира, 41/1 - цоколь ТРК «Столица»', '56.1890203326263', '57.9775384496457', 'Ежедневно с 10:00 до 21:00'), (22, 'Пермь', 'г. Березники, ул. Пятилетки, 150, ТЦ «Оранж Молл»', '56.79902', '59.419941', 'Ежедневно с 10:00 до 22:00'), (23, 'Самара', 'Коммунистическая, 90/1', '50.1433782620573', '53.2027163807943', 'Ежедневно с 9:00 до 22:00'), (24, 'Самара', 'Московское шоссе, 81а - 2 этаж ТРЦ «Парк Хаус»', '50.2000490107166', '53.2335103857267', 'Ежедневно с 10:00 до 22:00'), (25, 'Самара', 'Московское шоссе 18 км, 25с - 1 этаж ТРК «Московский»', '50.2728531720955', '53.2762418901811', 'Ежедневно с 9:00 до 23:00'), (26, 'Самара', 'Ново-Садовая, 160м - 2-01 офис 2 этаж ТРЦ «МегаСити»', '50.1678699284893', '53.2245278264478', 'Ежедневно с 10:00 до 22:00'), (27, 'Санкт-Петербург', 'Энгельса проспект, 154, ТЦ «Гранд Каньон»', '30.333925617615', '60.0582557677624', 'Ежедневно с 10:00 до 23:00'), (28, 'Санкт-Петербург', 'Лиговский проспект, 26-38 литер «А», ТРЦ «Галерея», 3 этаж', '30.3605767762969', '59.9274339126135', 'Ежедневно с 10:00 до 23:00'), (29, 'Санкт-Петербург', 'Заневский проспект, , 67, к.2, ТК «Заневский каскад»', '30.4377089316302', '59.9330385270183', 'Ежедневно с 10:00 до 23:00'), (30, 'Санкт-Петербург', 'Ленинградская обл., Всеволжский район, Бугровская волость, массив Корабсельки, ТРЦ «МЕГА-Парнас»', '30.3799338504277', '60.0914286110053', 'Ежедневно с 10:00 до 23:00'), (31, 'Санкт-Петербург', 'Невский проспект, 114-116, ТЦ «Невский Центр» - 4 этаж', '30.3589877191229', '59.9323201646961', 'Ежедневно с 10:00 до 23:00'), (32, 'Санкт-Петербург', 'Московский проспект, 44', '30.3197334694415', '59.9125693870999', 'Магазин открыт 24 часа'), (33, 'Санкт-Петербург', 'Пролетарская (Колпино), 36 литер А, ТРК «Меркурий»', '30.5844468853642', '59.7406751223753', 'Ежедневно с 10:00 до 22:00'), (34, 'Санкт-Петербург', 'Савушкина, 141, ТЦ «МЕРКУРИЙ»', '30.2067348154344', '59.9913454359748', 'Ежедневно с 10:00 до 23:00'), (35, 'Санкт-Петербург', 'Академика Павлова, 5 - 2 этаж', '30.317544164066', '59.9774557458568', 'Ежедневно с 10:00 до 23:00'), (36, 'Санкт-Петербург', 'Байконурская, 14А, ТРК «Континент», 2 этаж', '30.27260394691', '60.0022963902692', 'Ежедневно с 10:00 до 23:00'), (37, 'Санкт-Петербург', 'Конституции площадь, 7, ТЦ «Лидер»', '30.308373039588', '59.8511547932662', 'Ежедневно с 10:00 до 23:00'), (38, 'Санкт-Петербург', 'Коллонтай, 3, ТК «Феличита»', '30.4444312049523', '59.9108518116351', 'Ежедневно с 10:00 до 22:00'), (39, 'Санкт-Петербург', 'Балканская площадь, 5 лит Ю - 2 этаж', '30.3791021888766', '59.8276831879754', 'Ежедневно с 10:00 до 23:00'), (40, 'Санкт-Петербург', 'Гражданский проспект, 41 лит Б', '30.3986425839227', '60.0122372712758', 'На реконструкции'), (41, 'Санкт-Петербург', 'Пражская, 48/50, ТРК «Южный полюс»', '30.4033709684658', '59.8638457664971', 'Ежедневно с 10:00 до 22:00'), (42, 'Санкт-Петербург', 'Пулковское ш., 19, ТК «Карусель», 2 этаж', '30.3164482227108', '59.8258580172183', 'Ежедневно с 10:00 до 24:00'), (43, 'Санкт-Петербург', 'Коломяжский проспект, 10', '30.2988363585168', '59.994661636738', 'Ежедневно с 11:00 до 23:00');
После этого создадим файл searcheshop.php, который будет извлекать данные о магазинах М.Видео для конкретного города.
Код файла searcheshop.php:
<?php include("bd.php"); header('Content-Type: text/html; charset=utf-8'); if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') { $town = $_GET['town']; $query1= "SELECT * FROM mvideo_shops where town='$town' ORDER BY address"; $result1 = mysql_query($query1); if(mysql_num_rows($result1)>0) { while ($par1 = mysql_fetch_array($result1)){ $addressshop[] = array("id"=>$par1['id'], "town" => $par1['town'], "address" => $par1['address'], "lat" => $par1['lat'], "lon" => $par1['lon'], "rrab" => $par1['grafrab']); } $json = json_encode($addressshop); echo $json; } } ?>
В нем мы извлекаем информацию о магазинах из базы данных и формирует ответ в формате JSON.
Файл для соединения с базой данных bd.php.
Он имеет следующий код:
< ?php $sdb_name = "localhost"; //адрес сервера базы данных, обычно localhost $user_name = "root"; //логин пользователя $user_password = ""; //пароль пользователя $db_name = "ymap_bd"; //имя базы данных MySQL // соединение с сервером базы данных if(!$link = mysql_connect($sdb_name, $user_name, $user_password)) { echo "<br>Не могу соединиться с сервером базы данных<br >"; exit(); } // выбираем базу данных if(!mysql_select_db($db_name, $link)) { echo "<br/>Не могу выбрать базу данных<br >"; exit(); } mysql_query('SET NAMES utf8'); ?/>
Файл map.html выводит карту с магазинами.
Посмотрим пример в работе
В начале на карту загружается информация о магазинах Екатеринбурга, но если из выпадающего списка выбрать другой город,
то на карте отобразятся магазины для этого города.
С лева от карты — список магазинов.
Щелкнув по какой-либо записи из списка, на карте отобразится местоположение этого магазина с информацией в большем масштабе.
Код файла map.html
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Магазины М.Видео на карте</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://api-maps.yandex.ru/1.1/index.xml? key=AAJ4GE8BAAAAOkNOJwIArpFR_w2NjeymNZKd_pJ2y53XQEMAAAAAAAAAAABqMMktH6XqA6dQaHmVCbkMNlhYfw==" type="text/javascript"></script> <style> #shopconteyner{ width: 100%; } #shops{ float:left; width: 30%; } #YMapsID{ margin-left: 40%; width: 60%; height: 600px; } </style> <script type="text/javascript"> var map; // Создание обработчика для события window.onLoad YMaps.jQuery(function () { // Создание экземпляра карты и его привязка к созданному контейнеру map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]); // Установка для карты ее центра и масштаба map.setCenter(new YMaps.GeoPoint(44.0075,56.326944), 15); //Добавляем элементы управления. map.addControl(new YMaps.TypeControl());//Тип карты, кнопочки Схема, Гибрид, Спутник map.addControl(new YMaps.ToolBar());//Тулбар, кнопки Рука, Лупа, Линейка map.addControl(new YMaps.Zoom());//Увеличение YMaps.jQuery("select").change(function () { var town = YMaps.jQuery("#selecttown :selected").val(); do_search(town); }) .change(); }); function do_search(town){ map.removeAllOverlays(); YMaps.jQuery('#shops').html(''); YMaps.jQuery.getJSON("searcheshop-2.php", {town: town}, function(json){ var src_res="<p><strong>результаты поиска: </strong></p>"; gCollection = new YMaps.GeoObjectCollection("default#nightPoint"); bounds = new YMaps.GeoCollectionBounds(); src_res=src_res+'<p><strong>Найдено объектов: '+json.length+'</strong></p>'; for (i = 0; i < json.length; i++) { var sch = i+1; var placemark=new YMaps.Placemark(new YMaps.GeoPoint(json[i].lat,json[i].lon)); bounds.add(new YMaps.GeoPoint(json[i].lat,json[i].lon)); placemark.setIconContent(sch); placemark.description= '<div style="color:#ff0303;font-weight:bold">'+json[i].address+''; placemark.description = placemark.description+'<strong>Адрес:</strong> '+json[i].address; gCollection.add(placemark); src_res=src_res+'<p>'+sch+'. '+'<a href="#" onClick="return go_to('+json[i].lat+', '+ json[i].lon+",'"+json[i].address+"','"+json[i].rrab+"','"+json[i].id+"');"+'\">'+json[i].address+'</a></p>'; } map.setBounds(bounds); map.addOverlay(gCollection); YMaps.jQuery('#shops').html(src_res); }); } function go_to(lat,lon,address,rejim,id){ map.setCenter(new YMaps.GeoPoint(lat,lon),16); map.removeAllOverlays(); var placemark=new YMaps.Placemark(new YMaps.GeoPoint(lat,lon)); placemark.name='<div style="color:#ff0303;font-weight:bold">'+address+'</div>'; placemark.description = '<div style="font-size:13px;">'; placemark.description = placemark.description+'<div>'; placemark.description = placemark.description+'<strong>Адрес:</strong> '+address+'<br />'; placemark.description = placemark.description+'<strong>Режим работы:</strong> '+rejim+'<br />'; placemark.description = placemark.description+'</div></div>'; map.addOverlay(placemark); placemark.openBalloon(); return false; } </script> </head> <body> <div id="searchform"> <select id="selecttown"> <option value="Екатеринбург">Екатеринбург</option> <option value="Казань">Казань</option> <option value="Нижний Новгород">Нижний Новгород</option> <option value="Пермь">Пермь</option> <option value="Самара">Самара</option> <option value="Санкт-Петербург">Санкт-Петербург</option> </select> </div> <div id="shopconteyner"> <div id="shops"></div> <div id="YMapsID"></div> </div> </body> </html>
В начале мы определяем параметры нашей карты.
Функция do_search служит для отправки параметра о выбранном городе скрипту searcheshop.php, а ответные данные добавляются на карту и в список слева от нее.
Функция go_to служит показа информации об отдельном магазине на более крупном масштабе.
Источник http://webmap-blog.ru/