Битрикс. Отображаем список наших магазинов с помощью компоненты Яндекс.Карты
27.06.2013
Задача: есть список дилерских магазинов определённого вендора. Координаты каждого магазина известны. Надо отобразить эти магазины на карте с помощью компоненты Яндекс.Карты.
В общем, сделать красиво, а не просто список городов и магазинов в них.
Сегодня учимся использовать Яндекс.Карты, добавлять на неё несколько меток, а также понимаем, что Битрикс ещё не идеален =)
Мы хотим получить нечто вроде вот такого:
Первый шаг.
Добавляем на страницу компоненту. Компоненты -- Контент -- Яндекс.Карты -- Яндекс.Карты: настраиваемая карта
Второй шаг.
Копируем шаблон компоненты, назовём его shops. Я копирую обычно в дефолтовый шаблон /bitrix/templates/.default/components/bitrix/map.yandex.view/shops
Третий шаг.
Идём в папку скопированного шаблона, создаём файл result_modifier.php
У меня географические координаты магазина хранятся в свойстве COORDINATES типа Привязка к Яндекс.Карте. В файле result_modifier.php мы получаем список координат и имена магазинов, которые будем отображать на карте. При гетлисте получаем координату типа 53.717603,91.452242, которую парсим и распихиваем по свойствам массива. Смотрим в код:
$hShopz = CIBlockElement::GetList(array(), array('IBLOCK_ID'=>$IBLOCK_ADDRESS_ID, 'ACTIVE'=>'Y'), false, false, array('ID', 'NAME', 'PROPERTY_COORDINATES'));
while($row = $hShopz->Fetch())
{
$arTmp = explode(',', $row['PROPERTY_COORDINATES_VALUE']);
$arResult['POSITION']['PLACEMARKS'][] = array(
'LON' => $arTmp[1],
'LAT' => $arTmp[0],
'TEXT' => $row['NAME'],
);
}
|
Компонента автоматически подхватывает добавленные нами в arResult свойства и размещает метки на карте. Да вот незадача, названия магазинов на метках не отображаются.
Четвёртый шаг.
Лезем в документацию Яндекса, дабы раскусить, почему не растёт кокос. Оказывается, нам надо передавать ещё немного настроек для того, чтобы метки работали, как нам это надо. Благо, шаблон компоненты Яндекс.Карты скопировался вместе с script.js, так что мы можем его редактировать как угодно в своих целях.
Сначала находим строку
var props = {};
и добавляем под ней новый объектик, в котором будем указывать дополнительные свойства для метки
var preset = {};
Теперь исправляем основные настройки. Я делаю под себя, мне не нравятся выпадающие хинты, я их комментирую.
//props.balloonContent = arPlacemark.TEXT.replace(/\n/g, ' '); //props.hintContent = value_view; props.iconContent = value_view; //добавляю свойство "Подпись метки" preset.preset = 'twirl#blueStretchyIcon'; //округлая, синяя, подстраивающаяся под контент preset.draggable = false; //запрещаем её двигать |
И, наконец, передаём настройки в функцию, которая будет формировать текущую метку.
var obPlacemark = new ymaps.Placemark( [arPlacemark.LAT, arPlacemark.LON], props, preset ); |
Сохраняем изменения, обновляем кеш компонентов. Радуемся =)
Просмотров:
10446
