Как я и обещал в предыдущей заметке «Заменяем карты Google Maps на Яндекс.Карты в компоненте AdsManager для Joomla 1.5», в этот раз я расскажу о том, как использовать в компоненте AdsManager для Joomla 1.5 карты сервиса Kosmosnimki.ru.
Для использования карт сервиса Kosmosnimki.ru на других сайтах существует специальное GeoMixer API.
С документацией по нему можно познакомиться здесь, там же есть несколько примеров использования API – примеры.
Для начала использования GeoMixer API необходимо получить специальный API-ключ для домена Вашего сайта здесь. Для этого предварительно нужно зарегистрироваться на сервере.
И так ключ получен, приступаем к модификации кода плагина.
Это файл plug.php, который находится по адресу <папка установки Joomla>/images/com_adsmanager/plugins/gmap/.
(Поразумевается, что Вы уже установили сам компонент AdsManager 2.5. и плагин к нему для отображения карты Google Maps, см. здесь (https://webmap-blog.ru/yandex-maps/zamenyaem-karty-google-maps-na-yandeks-karty-v-komponente-adsmanager-dlya-joomla-1-5) ).
Заменяем в начале код функции getDetailsDisplay от строки $google_key = $conf->google_key;// до return $return; на следующий:
$return = '<div id="map_canvas'.$fieldid.'" style="width: '.$map_width.'px; height: '.$map_height.'px; overflow:hidden;"></div>';
$return .= '<script charset="windows-1251" src="http://maps.kosmosnimki.ru/api/api.js?key='.$google_key.'"></script>';
$return .= '<script>';
$return .= 'createFlashMap(document.getElementById("map_canvas'.$fieldid.'"), "maps.kosmosnimki.ru", "Kosmosnimki", function(map)';
$return .= '{';
$return .= 'globalFlashMap = map;';
$return .= 'map.moveTo('.$lat.', '.$lng.', 15);';
$return .= 'map.setBaseLayer("Карта");';
$return .= 'map.minimizeTools();';
$return .= 'map.drawing.addObject({ type: "POINT", coordinates: ['.$lat.', '.$lng.']});';
$return .= '});';
$return .= '</script>'; |
Поясню кратко, что здесь делается.
Этот код служит для вывода карты с меткой при просмотре полной информации об объявлении.
В самой первой строке определяется область для вывода карты, ширина и высота окна берутся из соответствующих полей формы поля Карта.
Следующая строка вызывает скрипт API api.js с ключем для вашего сайта.
Дальше идет JavaScript-код в котором определяется сама карта и ее начальные параметры (центр, масштаб, тип карты по умолчанию, элементы управления в свернутом виде).
Строкой map.drawing.addObject({ type: «POINT», coordinates: [‘.$lat.’, ‘.$lng.’]}); мы на карту добавляем маркер (стиль маркера по умолчанию) с координатами центра карты.
Если Вы захотите использовать свой значок для маркера, то в документации есть пример (http://kosmosnimki.ru/geomixer/docs/api_samples/ex_geometry_point.html )
Теперь изменяем затем код функции getFormDisplay от строки
$google_key = $conf->google_key;//ABQIAAAAbgp4ITpmNUShfIO_dNHv_BR3Tz62YPXwBIaKJWeQ0jDUesttEhTdqyqafAWvPNs2HRK7lWBo2Yemww |
до строки до return $return; на следующий:
$return = '<script charset="windows-1251" src="http://maps.kosmosnimki.ru/api/api.js?key='.$google_key.'"></script>';
$return .= '<p><input name="search2" style="width:400px" id="search_string2" type="text" value="Нижний Новгород"> <input id="search_button2" value="Поиск" type="button"></p>';
$return .= '<div id="map_canvas'.$fieldid.'" style="width: '.$map_width.'px; height: '.$map_height.'px; overflow:hidden;"></div><br/>';
$return .= '<input type="hidden" id="gmap_lat'.$fieldid.'" name="gmap_lat'.$fieldid.'" value="'.$lat.'"/>';
$return .= '<input type="hidden" id="gmap_lng'.$fieldid.'" name="gmap_lng'.$fieldid.'" value="'.$lng.'"/>';
$return .= '<b>Если Вы не нашли свой адрес, Вы можете кликнуть по карте для размещения маркера в нужном месте.</b>';
$return .= '<script>';
$return .= 'createFlashMap(document.getElementById("map_canvas'.$fieldid.'"), "maps.kosmosnimki.ru", "Kosmosnimki", function(map) {';
$return .= 'map.moveTo('.$lat.', '.$lng.', 15);';
$return .= 'map.minimizeTools();';
$return .= 'var markers = [];';
$return .= 'map.setHandler("onClick", function() {';
$return .= 'map.drawing.addObject({ type: "POINT", coordinates: [map.getMouseX(), map.getMouseY()]});';
$return .= 'document.getElementById("gmap_lat'.$fieldid.'").value = map.getMouseX();';
$return .= 'document.getElementById("gmap_lng'.$fieldid.'").value = map.getMouseY(); });';
$return .= 'map.drawing.setHandler("onAdd", function(o) { ';
$return .= 'map.drawing.forEachObject(function(o2){';
$return .= 'if (o2 != o)';
$return .= ' o2.remove(); }); });';
$return .= 'document.getElementById("search_button2").onclick = function() {';
$return .= 'map.sendSearchRequest(document.getElementById("search_string2").value, ';
$return .= 'function(results) {';
$return .= 'for (var i = 0; i < markers.length; i++)';
$return .= 'markers[i].remove();';
$return .= 'markers = [];';
$return .= 'for (var key in results) {';
$return .= 'for (var j in results[key]) (function(o) {';
$return .= 'map.moveTo(o.CntrLon, o.CntrLat, 16);';
$return .= 'document.getElementById("gmap_lat'.$fieldid.'").value = o.CntrLon;';
$return .= 'document.getElementById("gmap_lng'.$fieldid.'").value = o.CntrLat;';
$return .= 'var obj = map.addObject({ type: "POINT", coordinates: [o.CntrLon, o.CntrLat] });';
$return .= 'obj.setStyle(';
$return .= '{ marker: { image: "http://maps.kosmosnimki.ru/api/img/marker_flag.png", center: true } },';
$return .= '{ marker: { image: "http://maps.kosmosnimki.ru/api/img/marker_flag_a.png", center: true } } );';
$return .= 'markers.push(obj);';
$return .= 'obj.enableHoverBalloon(function() {';
$return .= 'var parts = [];';
$return .= 'for (var i = o.Path.length - 1; i >= 0; i--)';
$return .= 'parts.push(o.Path[i].join(" "));';
$return .= 'return parts.join("<br />");';
$return .= '});';
$return .= '})(results[key][j]);}';
$return .= 'if (markers.length == 0)';
$return .= 'alert("Ничего не найдено!");}); }});';
$return .= '</script>'; |
Что здесь интересного.
Этот код выводит карту в форме добавления параметров объявления.
Используя элементы управления картой, мы можем найти необходимый объект и кликнув по нему поставить метку, координаты метки занесутся в базу при сохранении объявления.
Для ускорения поиска нужного объекта, используется возможность поиска по адресной базе Kosmosnimki.Ru с посылкой запроса к сервису геокодирования, для этого у нас перед картой расположено поле с id= “search_string2». Карта центрируется по результатам поиска, а все найденные результаты отмечаются на карте метками.
Необходимый объект нужно отметить кликнув по карте.
После всех изменений сохраняем файл plug.php.
Теперь нужно перейти в настройки параметров для поля с картой и ввести ключ GeoMixer API для вашего домена.
После этого можно перейти на Ваш сайт, добавить объявление и наблюдать работу с новой картой.
Скачать архив с изменненым файлом plug.php
И еще одно замечание, иногда геокодер сервиса Kosmosnimki.ru дает сбои, вчера он нормально находил адрес, а сегодня пишет: «Ничего не найдено».
Небольшая видео демонстрация работы плагина
Спасибо Огромное за труд! У меня всё получилось. Единственное хотел спросить как убрать строку поиска города, как у вас на скриншоте «Нижний Новгород» и поиск, у меня городок маленький мне не нужен поиск, пробывал удалить строки:
$return .= ‘ ‘;
работает но с ошибкой. Как я понял что-то с этой строчкой сделать надо да?
$return .= ‘document.getElementById(«search_button2»).onclick = function() {‘;
Спасибо!!!!
Первое нужно удалить строчку return .= ‘ ‘; — это поле поиска с кнопкой, а также весь код для геокодирования.
Т.е код между строчками $google_key = $conf->google_key; и return $return; функции getFormDisplay останется следующий:
$return = '<script charset="windows-1251" src="http://maps.kosmosnimki.ru/api/api.js?key='.$google_key.'"></script>'; $return .= '<div id="map_canvas'.$fieldid.'" style="width: '.$map_width.'px; height: '.$map_height.'px; overflow:hidden;"></div><br/>'; $return .= '<input type="hidden" id="gmap_lat'.$fieldid.'" name="gmap_lat'.$fieldid.'" value="'.$lat.'"/>'; $return .= '<input type="hidden" id="gmap_lng'.$fieldid.'" name="gmap_lng'.$fieldid.'" value="'.$lng.'"/>'; $return .= '<b>Если Вы не нашли свой адрес, Вы можете кликнуть по карте для размещения маркера в нужном месте.</b>'; $return .= '<script>'; $return .= 'createFlashMap(document.getElementById("map_canvas'.$fieldid.'"), "maps.kosmosnimki.ru", "Kosmosnimki", function(map) {'; $return .= 'map.moveTo('.$lat.', '.$lng.', 15);'; $return .= 'map.minimizeTools();'; $return .= 'var markers = [];'; $return .= 'map.setHandler("onClick", function() {'; $return .= 'map.drawing.addObject({ type: "POINT", coordinates: [map.getMouseX(), map.getMouseY()]});'; $return .= 'document.getElementById("gmap_lat'.$fieldid.'").value = map.getMouseX();'; $return .= 'document.getElementById("gmap_lng'.$fieldid.'").value = map.getMouseY(); });'; $return .= '});'; $return .= '</script>';вроде всё правильно сделал, ошибки теперь нет, но стало добавляться бесконечное число маркеров 🙁 [img]http://33strausa.ru/images/com_adsmanager/fields/12222.jpg[/img]
Я кое-что лишнее убрал, код должен быть таким:
$return = ''; $return .= ''; $return .= ''; $return .= ''; $return .= '<b>Если Вы не нашли свой адрес, Вы можете кликнуть по карте для размещения маркера в нужном месте.</b>'; $return .= ''; $return .= 'createFlashMap(document.getElementById("map_canvas'.$fieldid.'"), "maps.kosmosnimki.ru", "Kosmosnimki", function(map) {'; $return .= 'map.moveTo('.$lat.', '.$lng.', 15);'; $return .= 'map.minimizeTools();'; $return .= 'var markers = [];'; $return .= 'map.setHandler("onClick", function() {'; $return .= 'map.drawing.addObject({ type: "POINT", coordinates: [map.getMouseX(), map.getMouseY()]});'; $return .= 'document.getElementById("gmap_lat'.$fieldid.'").value = map.getMouseX();'; $return .= 'document.getElementById("gmap_lng'.$fieldid.'").value = map.getMouseY(); });'; $return .= 'map.drawing.setHandler("onAdd", function(o) { '; $return .= 'map.drawing.forEachObject(function(o2){'; $return .= 'if (o2 != o)'; $return .= ' o2.remove(); }); });'; $return .= '});'; $return .= '';беда… часа 2 пробывал, вот итог ( http://33strausa.ru/images/com_adsmanager/fields/11112.jpg случайно нет возможности готовый вариант сбросить? : (
Последний вопрос от меня 🙂 А можно ли так сделать допустим если пользователь не поставил маркер при добавлении объявления, то карта не показывалась бы?
нашел решение. Может кому-то еще поможет:
Если не изменено значение по умолчанию координат на карте то карта при просмотре объявления не будет показываться:
Решение: открываем imagescom_adsmanagerpluginsgmapplug.php
ищем строку ~24 if ($result)
и меняем на if ($result->lat != ‘ваше значение по умолчанию latityde из админки’)