Используем API сервиса Kosmosnimki.ru совместно с компонентом AdsManager для Joomla 1.5.

Автор: | 01.06.2011

Как я и обещал в предыдущей заметке «Заменяем карты 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, см. здесь (http://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="Нижний Новгород">&nbsp;&nbsp;<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 дает сбои, вчера он нормально находил адрес, а сегодня пишет: «Ничего не найдено».

Небольшая видео демонстрация работы плагина

Используем API сервиса Kosmosnimki.ru совместно с компонентом AdsManager для Joomla 1.5.: 7 комментариев

  1. Александр

    Спасибо Огромное за труд! У меня всё получилось. Единственное хотел спросить как убрать строку поиска города, как у вас на скриншоте «Нижний Новгород» и поиск, у меня городок маленький мне не нужен поиск, пробывал удалить строки:

    $return .= ‘  ‘;

    работает но с ошибкой. Как я понял что-то с этой строчкой сделать надо да?

    $return .= ‘document.getElementById(«search_button2»).onclick = function() {‘;

    Спасибо!!!!

    1. admin Автор записи

      Первое нужно удалить строчку 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>';
  2. Александр

    вроде всё правильно сделал, ошибки теперь нет, но стало добавляться бесконечное число маркеров 🙁 [img]http://33strausa.ru/images/com_adsmanager/fields/12222.jpg[/img]

    1. admin Автор записи

      Я кое-что лишнее убрал, код должен быть таким:

      $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 .= '';
  3. Александр

    Последний вопрос от меня 🙂 А можно ли так сделать допустим если пользователь не поставил маркер при добавлении объявления, то карта не показывалась бы?

  4. Александр

    нашел решение. Может кому-то еще поможет:
    Если не изменено значение по умолчанию координат на карте то карта при просмотре объявления не будет показываться:
    Решение: открываем imagescom_adsmanagerpluginsgmapplug.php
    ищем строку ~24 if ($result)
    и меняем на if ($result->lat != ‘ваше значение по умолчанию latityde из админки’)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *