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

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

1 этап.

Добавляем Яндекс карты.

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

2 этап.

Готовим координаты для Yandex карты.

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

<?php
$arResult['POSITION']['yandex_lat'] = $arTmp['0']; //в  yandex_lat, yandex_lon будут храниться координаты

// которые будут в центре при загрузке карты

$arResult['POSITION']['yandex_lon'] = $arTmp['1'];

$arResult['POSITION']['yandex_scale']='13'; // масштаб карты
$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']['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" => ""

)

);?>

3 этап.

Привязка к карте, последнии шаги.

Исправим немного отображение элемента на карте. Предварительно скопируем компонент «Яндекс.Карты: настраиваемая карта»(«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 еще и картинку и некоторые параметры.

Поделиться

Facebook

0

VK

Twitter

Linkedin

Pinterest

0