Оглавление
Часто перед разработчиками сайта встаёт задача отразить на интерактивной карте местоположение каких-либо объектов. Например филиалов компании, магазинов, автозаправочных станций и т.д. Формировать карту в конструкторе яндекс карт каждый раз при появлении нового объекта — неудобно. Для решения этой задачи лучше воспользоваться API Яндекс карт и большими возможностями 1С Битрикс.
И так, разобьём работу на этапы:
- Установка продукта
- Подготовка инфоблока
- Подготовка компонента
- Внедрение JavaScript формирующего Яндекс карту
Установка продукта
Не стану подробно останавливаться на этом вопросе, думаю ни у кого он не вызывает трудностей. Дам лишь совет, пользоваться кодировкой UTF-8 она в любом случае выгоднее т.к. содержит больше символов нежели кирилица Windows (или windows-1251 стандартная битрикс кодировка). Кодировку можно указать во время установки продукта на 3-м шаге «Регистрация»:
Если на следующем шаге будут ошибки , обычно ругается на mbstring.func_overload и mbstring.internal_encoding в файл .htaccess в папке с устанавливаемой CMS укажите следующие директивы и продолжайте установку:
php_value mbstring.func_overload 2
php_value mbstring.internal_encoding UTF-8
На этом всё, переходим к настройке информационного блока.
Подготовка информационного блока
Давайте определимся что мы хотим получить. Допустим у нас есть несколько магазинов которые мы хотим показывать на интерактивной яндекс карте + давать пользователям какую-нибудь доп. информацию о них, например точный адрес магазина, часы работы, контактный телефон и ФИО руководителя. Т.е. по клику на точку на яндекс карте, мы увидим некий блок, так называемый балун с доп. информацией о магазине. Для формирования самой точки на карте, нам потребуется задавать её координаты, для этого в 1С Битрикс существует тип поля привязка к Яндекс карте.
Приступим! Создаём инфоблок «Магазины&qout; со следующими свойствами (Имя свойства — тип — мнемонический код):
- Адрес магазина — тип строка — ADDRESS
- Часы работы — тип строка — HOURS
- Контактный телефон — тип строка — PHONE
- ФИО руководителя — тип строка — SHOP_MANAGER
- Координаты — тип привязка к яндекс карте — YANDEX_MAP
Сохраняем инфоблок и добавляем в него несколько элементов, я добавил 3 магазина с 3-мя адресами в разных районах города Ростов-на-Дону. Важно при добавлении магазинов указать адрес на интерактивной карте Яндекс и сделать двойной щелчёк по заданной точке, чтобы заполнились поля координат точки иначе не получится построить точку на карте.
Добавив несколько элементов переходим к следующему этапу.
Подготовка компонета
Для реализации задумки я решил использовать компонент bitrix:news.list, с его помощью мы выведем на экран список магазинов, данные для формирования карты и контейнер для самой карты. Для того чтобы JavaScript смог построить интерактиыную карты, ему нужно отдать данные объектов, т.е. данные наших магазинов. Для этого есть 2 способа.
- Вывести данные оъектов в специальные атрибуты тегов, т.е. непосредственно в DOM дерево документа
- Подготовить структурированный массив в php и затем с помощью функции 1С Битрикс PhpToJSObject преобразовать массив в JavaScript объект и затем работать с этим JS обектом вытаскивая данные для формирования карты.
Лично я предпочитаю первый способ, т.к. считаю его более наглядным и понятным. И так скопируем компонент news.list в текущий шаблон сайта с помощью интерфейса «Эрмитаж» и укажем следующий код шаблона:
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<div class="shop-list">
<?
$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')));
?>
<?
//Разбиваем координаты яндекс карты на X и Y координату
$Yandex = explode(",", $arItem["PROPERTIES"]["YANDEX_MAP"]["VALUE"]);
$Yandex_X = $Yandex[0];
$Yandex_Y = $Yandex[1];
?>
<!--Засовываем данные для формирования точки на карте в атрибуты контейнера div-->
<div class="shop-data" data-index="<?=$index?>" data-name="<?=$arItem[" name"]?>"
data-yandex-x="<?=$Yandex_X;?>"
data-yandex-y="<?=$Yandex_Y;?>"
data-address="<?=$arItem["PROPERTIES"]["ADDRESS"]["VALUE"];?>"
data-hours="<?=$arItem["PROPERTIES"]["HOURS"]["VALUE"];?>"
data-phone="<?=$arItem["PROPERTIES"]["PHONE"]["VALUE"];?>"
data-shop-manager="<?=$arItem["PROPERTIES"]["SHOP_MANAGER"]["VALUE"];?>"
>
<!--Выводим информацию для пользователя-->
<b><?=$arItem["NAME"]?></b>
<ul>
<li><b>Адрес:</b> <?=$arItem["PROPERTIES"]["ADDRESS"]["VALUE"];?></li>
<li><b>Часы работы:</b> <?=$arItem["PROPERTIES"]["HOURS"]["VALUE"];?></li>
<li><b>Контактный телефон:</b> <?=$arItem["PROPERTIES"]["PHONE"]["VALUE"];?></li>
<li><b>ФИО руководителя:</b> <?=$arItem["PROPERTIES"]["SHOP_MANAGER"]["VALUE"];?></li>
</ul>
</div>
<? ++$index; } unset($index); ?>
<!--Контейнер в который прилетит сформированная яндекс карта-->
<div id="map_container"></div>
</div>
Давайте так же заранее пропишем css стили для контейнера карты, и точек (маркеров) на самой карте
#map_container {
width:100%;
height:600px;
display:block;
}
.marker-circ {
color: #404040;
font-size: 14px;
font-weight: normal;
height: 80px;
line-height: 56px;
width: 58px;
}
.claster {
color: #ffffff;
font-size: 14px;
font-weight: bold;
height: 80px;
line-height: 56px;
width: 58px;
}
Компонент готов, можно переходить к подключению JavaScript сформирующего нам яндекс карту.
Внедрение JavaScript Яндекс карты
Первым делом подключаем JQuery (в моём случае это jQuery v1.9.1) и скрипт яндекс карты, чтобы не держать лишьних скриптов на сервере можно воспользоваться удалёнными файлами.
<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
Затем в отдельном JavaScript файле (назовём его start.js), куда мы будем выносить все наши скрипты (чтобы не писать их прям в DOM дереве документа) пишем код:
$(document).ready(function () {
//Если на странице есть контейнер для яндекс карты с id map_container, начинаем её формировать
if ($("#map_container").length > 0) {
//yandex map
ymaps.ready(function () {
var map = new ymaps.Map("map_container", {
center: [47.223572, 39.725845], //Создаём карту с центром в городе "Ростов-на-Дону"
zoom: 11, //Увеличение 11
});
//Кластера - группируем близко расположенные друг к другу объекты, чтобы при отдалении карты появлялась другая иконка
// с количеством объектов в данной точке
var ClusterContent = ymaps.templateLayoutFactory.createClass('<div class="claster">$[properties.geoObjects.length] шт.</div>');
//Параметры иконки кластера, обычно её делают отличной от точки, чтобы пользователь не путал номер объекта
// и количество объектов
var clusterIcons = [{
href: '/bitrix/templates/furniture_pale-blue/images/map-claster.png',
size: [58, 80],
offset: [-24, -80],
}];
//Создание самого кластера
myClusterer = new ymaps.Clusterer({
clusterIcons: clusterIcons,
clusterNumbers: [1],
zoomMargin: [30],
clusterIconContentLayout: ClusterContent
});
//HTML шаблон балуна, того самого всплывающего блока, который появляется при щелчке на карту
var myBalloonLayout = ymaps.templateLayoutFactory.createClass(
'<address class="address-map">' + '
< p > < strong > $[properties.name] < /strong>'+ '
<br/>
'+ ' < /p>
<ul class="balloon-info">'+ '
<li><strong>Адрес: </strong>$[properties.address]</li>
'+ '
<li><strong>Часы работы: </strong>$[properties.hours]</li>
'+ '
<li><strong>Телефон: </strong>$[properties.phone]</li>
'+ '
<li><strong>Руоководитель: </strong>$[properties.manager]</li>
'+ '</ul>
'+ ' < /address>'
)
;
var Placemark = {}; //Пустой объекта, куда будут помещены точки на для карты
//Перебираем все блоки с картой и считываем данные для формирования точки и балуна по ранее заданному шаблону
$(".shop-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"), //Наименование магазина
address: $(this).attr("data-address"), //Адрес
hours: $(this).attr("data-hours"), //Часы работы
phone: $(this).attr("data-phone"), //Контактный телефон
manager: $(this).attr("data-shop-manager"), //Руководитель
iconContent: "<div class="marker-circ">"+$(this).attr("data-index") + "</div>", //Порядковый номер на карте
}, { //Ниже некоторые параметры точки и балуна
balloonContentLayout: myBalloonLayout,
balloonOffset: [5, 0],
balloonCloseButton: true,
balloonMinWidth: 450,
balloonMaxWidth: 450,
balloonMinHeught: 150,
balloonMaxHeught: 200,
iconImageHref: '/bitrix/templates/furniture_pale-blue/images/map.png', //Путь к картинке точки
iconImageSize: [58, 80],
iconImageOffset: [-24, -80],
iconLayout: 'default#imageWithContent',
iconactive: '/bitrix/templates/furniture_pale-blue/images/map-a.png' //Путь к картинке точки при наведении курсора мыши
});
//Добавляем маркер (точку) через кластер
myClusterer.add(Placemark[Obj]);
});
//Добавление кластеры на карту
map.geoObjects.add(myClusterer);
//Запрещаем изменение размеров карты по скролу мыши
map.behaviors.disable("scrollZoom");
});
}
});
Картинки для точек на карте я скачал с сайта www.iconfinder.com — это зарубежный поисковик по иконкам, многие из которых можно скачать абсолютно бесплатно, что я собственно и сделал. А на этом сервисе от яндекса удобно получать координаты точек и центра карты.
Если Вы всё сделали правильно у Вас должна получиться вот такая карта:
Если что-то не получилось, можете ознакомиться с исходниками. Желаю удачи!
