Наверх
 

Навигация
Опрос
Какие виды уроков Вы хотите видеть на сайте?
Битрикс
DLE
CSS
Joomla
Wordpress
Все для хостинга
Все для фотошопа
Другое

База уроков » » » » Привязка к Яндекс карте.

Привязка к Яндекс карте.

05 сен 2014 | Комментариев: 0 | Просмотров: 2773

Задача: Есть  инфоблок со  свойством «Привязка к Яндекс. Карте»  с символьным кодом «MAP».  У элемента этого инфоблока имеется адрес. Нужно показать этот адрес на карте.

 

Добавляем на нужную страницу компонент  «Яндекс.Карты: настраиваемая карта»(«bitrix:map.yandex.view«) . Сразу копируем шаблон этого компонента(рис.1).

Привязка к Яндекс карте.

Чтобы отобразить наши координаты, которые хранятся в свойстве «MAP»,  нужно считать их из элемента  инфоблока и представить компоненту в понятном для него виде:

 


$mas= CIBlockElement::GetList(array(), array('IBLOCK_ID'=>$arResult[IBLOCK_ID], 'ACTIVE'=>'Y', 'ID'=>$arResult[ID]), false, false, array('ID', 'NAME', 'PROPERTY_MAP'));
while($row = $mas ->Fetch())
{
$arTmp = explode(',', $row['PROPERTY_MAP_VALUE']); // т.к. координаты хранятся через запятую , разделим их
$arResult['POSITION']['yandex_lat']= $arTmp[0]; //в yandex_lat, 'yandex_lon будут храниться координаты
//нашего элемента, для того чтобы при загрузке карта сразу нам показывала область где находится наша метка
$arResult['POSITION']['yandex_lon']=$arTmp[1];
$arResult['POSITION']['yandex_scale']="13"; // масштаб карты
$arResult['POSITION']['PLACEMARKS'][] = array(
'LON' => $arTmp[1],// LON и LAT - координаты элемента
'LAT' => $arTmp[0],
'TEXT' =>$row['NAME'],// имя элемента, которое будет отображаться на метке
);
}
?>

 

Теперь в массиве $arResult хранятся наши координаты и имя элемента в понятном для компонента виде. Вот теперь можно передать $arResult в компонент :

 


<?$APPLICATION->IncludeComponent(
"bitrix:map.yandex.view",
"detail",
Array(
"INIT_MAP_TYPE" => "MAP",
"MAP_DATA" => serialize($arResult['POSITION']),
"MAP_WIDTH" => "300",
"MAP_HEIGHT" => "300",
"CONTROLS" => array("ZOOM", "SMALLZOOM", "SCALELINE"),
"OPTIONS" => array(),
"MAP_ID" => ""
)
);?>

 

Исправим немного отображение элемента на карте. Предварительно скопируем компонент «Яндекс.Карты: настраиваемая карта»(«bitrix:map.yandex.view») в другое пространство имен. Теперь мы можем кастомизировать компонент нашу Яндекс.Карту. Тут нам понадобится документация Апи Яндекс Карт. Найдем в шаблоне компонента файл script.js. Нам интересны две переменные:

 


var props = {};
var preset = {};

 

Первая уже определена , нужно добавить вторую.

Далее найдите такие строки:

 


if (arPlacemark.TEXT.length > 0)
{
var rnpos = arPlacemark.TEXT.indexOf("\n");
value_view = rnpos <= 0 ? arPlacemark.TEXT : arPlacemark.TEXT.substring(0, rnpos);
}
props.balloonContent = arPlacemark.TEXT.replace(/\n/g, '<br />');

 

Их я заменил на следующее:

 


if (arPlacemark.TEXT.length > 0)
{
var rnpos = arPlacemark.TEXT.indexOf("\n");
value_view = rnpos <= 0 ? arPlacemark.TEXT : arPlacemark.TEXT.substring(0, rnpos);
}
props.hintContent = arPlacemark.TEXT .replace(/\n/g, '<br />');
preset.draggable = true;// запрещаем двигать метку
preset.preset = 'twirl#blueStretchyIcon';// стиль для метки на карте
}

 

И плюс к этому добавил в результат созданную нами переменную preset :

 


var obPlacemark = new ymaps.Placemark(
[arPlacemark.LAT, arPlacemark.LON],
props,
preset,//вот она =)
{balloonCloseButton: true}
);

 

Вот что получилось у меня =)

Я передал кроме имени в массив $arResult еще и картинку и некоторые параметры.

 

 

Источник: www.thisis-blog.ru

 




Теги: Битрикс

Ссылка на новость:

    html-cсылка на публикацию
    BB-cсылка на публикацию
    Прямая ссылка на публикацию

ЕЩЕ НА ЭТУ ТЕМУ:

Навигация вперед и назад в элементах инфоблока

Навигация вперед и назад в элементах инфоблока

  В этой статье я расскажу как сделать навигацию вперед и назад в элементе инфоблока.
Не работает визуальный редактор

Не работает визуальный редактор

В этой статье расскажу почему бывает не работает визуальный редактор.  
Вывести картинку раздела и подраздела битрикса

Вывести картинку раздела и подраздела битрикса

В этой статье расскажу и покажу как вывести картинку раздела или подраздела категорий. Следовательно картинка берется с товара и становится в раздел.
Как выгрузить товары только в наличии из Битрикса в Яндекс Маркет

Как выгрузить товары только в наличии из Битрикса в Яндекс Маркет

По умолчанию Битрикс выгружает в YML (Яндекс Маркет) все активированные товары.
Связь способов доставки с платежными системами в компоненте bitrix:sale.order.ajax

Связь способов доставки с платежными системами в компоненте bitrix:sale.order.ajax

Часто требуется сделать так, чтобы в оформлении заказа какие-то платежные системы показывались только для определенных служб доставки. Например, для доставки
Отправка письма на почту через веб-форму для Битрикса

Отправка письма на почту через веб-форму для Битрикса

Этим уроком я расскажу как сделать, чтоб на Битриксе работала отправка письма на почту через веб-форму. Сразу отвечу на резонный вопрос о том что ведь есть в
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.