О Битрикс

Яндекс карта из элементов инфоблока

Как сформировать метки на Яндекс карте из элементов инфоблока.

Для того, чтобы создать карту на основе элементов, необходимо на нужной странице подключить компонент news.list и скопировать шаблон в шаблон сайта.

Также для инфоблока, который будет использоваться необходимо создать свойств типа "Привязка к Яндекс-Карте" (в данном случае код свойства YANDEX_MAP). И для каждого элемента заполнить это свойство в форме редактирования элемента.

Screenshot_2.png

Содержимое template.php:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<div class="item-list">
    <div id="map"></div>
       <ol>
       <?
          $index = 1;
          foreach($arResult["ITEMS"] as $arItem) { ?>
             <?
             $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
             $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
      ?>
       <?
       $Yandex = explode(",", $arItem["PROPERTIES"]["YANDEX_MAP"]["VALUE"]);
       $Yandex_X = $Yandex[0];
       $Yandex_Y = $Yandex[1];
      ?>
          <div class="list-data" data-index="<?=$index?>" data-name="<?=$arItem[" name"]?>"
             data-yandex-x="<?=$Yandex_X;?>"
             data-yandex-y="<?=$Yandex_Y;?>"
             data-link="<?=$arItem["DETAIL_PAGE_URL"];?>"
             data-namei="<?=$arItem["NAME"];?>"
             data-image="<?=$arItem["PREVIEW_PICTURE"]["SRC"];?>"
             data-cost="<?=$arItem["PROPERTIES"]["COST"]["VALUE"];?>"
             data-ploshad="<?=$arItem["PROPERTIES"]["PLOSHAD"]["VALUE"];?>"
          >
          <li><h6><a href="<?=$arItem["DETAIL_PAGE_URL"];?>"><?=$arItem["NAME"];?></a> <?=$arItem["PROPERTIES"]["ADDRESS"]["VALUE"];?></h6></li>
       </div>
       <? ++$index; } unset($index); ?>
    </ol>
</div>

В div с id="map" будет формироваться карта. Div с классом list-data содержит атрибуты, которые будут использоваться. В переменные $Yandex_X и $Yandex_Y будут записаны соответствующие координаты, полученные из свойства YANDEX_MAP. Также в шаблоне формируется список элементов.

Далее содержимое файла script.js, в котором и будет создаваться карта:

$(document).ready(function(){
    if($("#map").length > 0)
    {
       ymaps.ready(function() {
          var map = new ymaps.Map("map_container", {
             center: [44.894997, 37.316259],
             zoom: 11,
          });
          var ClusterContent = ymaps.templateLayoutFactory.createClass('
$[properties.geoObjects.length] шт.
');
          var clusterIcons=[{
             size:[58, 80]
          }];
          myClusterer = new ymaps.Clusterer({
             clusterIcons: clusterIcons,
             clusterNumbers:[1],
             zoomMargin: [30],
             clusterIconContentLayout: ClusterContent
          });
          var myBalloonLayout = ymaps.templateLayoutFactory.createClass(
             '<address class="address-map" >'+
             '<ul class="balloon-info">'+
             '<li><a href="$[properties.link]">$[properties.namei]</a></li>'+
             '<li><img src="$[properties.image]"></li>'+
             '<li>Цена: $[properties.cost] руб.</li>'+
             '<li>Площади: $[properties.ploshad]</li>'+
             '</ul>'+
             '</address>'
          );
          var Placemark = {};
          $(".list-data").each(function(){
             var X = $(this).attr("data-yandex-x");
             var Y = $(this).attr("data-yandex-y");
             Obj = $(this).attr("pointindex");
             Placemark[Obj] = new ymaps.Placemark([X,Y], {
                name: $(this).attr("data-name"),
                link: $(this).attr("data-link"),
                namei: $(this).attr("data-namei"),
                image: $(this).attr("data-image"),
                cost: $(this).attr("data-cost"),
                ploshad: $(this).attr("data-ploshad"),
             },{
                balloonContentLayout: myBalloonLayout,
                balloonOffset: [5,0],
                balloonCloseButton: true,
                balloonMinWidth: 220,
                balloonMaxWidth:450,
                balloonMinHeught:150,
                balloonMaxHeught:200,
             });
             myClusterer.add(Placemark[Obj]);
          });
          map.geoObjects.add(myClusterer);
          map.behaviors.disable("scrollZoom");
       });
    }
});

Здесь для каждого элемента формируется метка на карте с балуном, который содержит информацию, полученную из атрибутов текущего элемента:

.Screenshot_3.png

И немного стилей:

#map {
    width:100%;
    height:600px;
    display:block;
}

Скачать получившийся шаблон

сайт на Bitrix

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Социальные сети

Рандом новостей