1с битрикс настройка яндекс карты
Предположим, что у вас есть инфоблок со свойством "Привязка к яндекс картам". В этом инфоблоке некоторое количество элементов, в принципе любое. Пусть, это будут офисы продаж. Задача: вывести все офисы продаж на карту с метками и основными данными о точке- в бубл (или как, там называется эта штука- при клике на метку).
Собираем все координаты и нужные данные для карты
Для начала нам нужно собрать все координаты, всех элементов в один массив. Для этого, пробежимся методом CIBlockElement::GetList - по всем элементам этого инфоблока. Получив данные из свойства "Привязка к яндекс картам" (в моем случае, его код ATT_YA_MAP) и название элемента.
Пояснения к тому что происходит:
- В свойстве "Привязка к яндекс картам", данные хранятся в виде строки с широтой и долготой, указанные через запятую.
- Мы, с помощью функции explode, разбиваем эту строку на массив $onMap. Запятую используем как разделитель.
- В переменные $mapLAT и $mapLON загоняем широту и долготу (елементы массива $onMap) соответственно
- Создаем массив $arPlacemarks в который передаем широту и долготу. В элемент "TEXT" передали название элемента и номер телефона (из свойства элемента инфоблока - ATT_PHONE)
Из элемента массива $arPlacemarks "TEXT" - как раз и собираются данные для бабла (и как, там называется эта штука- при клике на метку).
Выводим все точки на одну Яндекс карту
Дальше, просто выводим стандартный компонент "bitrix:map.yandex.view" и передаем массив $arPlacemarks в параметр компонента "MAP_DATA" (превращая массив в serialize строку)
В общем-то и все. Должна вывестись единая Яндекс карта, со всеми метками из элементов нужного инфоблока.
Сфокусировать карту в области точек.
Если все точки на карте, более менее не далеко друг от друга и нужно сфокусировать карту в их области. Что бы не показывать всю Россию, например, если точки находятся в Новосибирске.
Можно передать в "MAP_DATA" позицию последней (из GetList) точки, просто добавив:
Мы их передали в yandex_lat и yandex_lon. А параметр yandex_scale - это приближение карты (по моему: 0 - максимально близко и 30- максимально высоко)
Мои каналы:
Каналы на которые я выкладываю видео. Контент дублируется, смотрите где удобнее.
Одностраничный компонент осуществляет отображение карты с сервиса Яндекс.Карты. Компонент является стандартным и входит в дистрибутив модуля.
Компонент относится к модулю Управление структурой.
Параметры
- схема (MAP) - схематичная карта с именами улиц и объектов;
- спутник (SATELLITE) - карта в виде фото со спутника;
- гибрид (HYBRID) - карта в виде фото со спутника с наложенной на нее схемой основных дорог и объектов.
- Панель инструментов (TOOLBAR) - кнопки Переместить карту, Увеличить и Измерить расстояние на карте;
- Ползунок масштаба (ZOOM) - ползунок масштаба для управления масштабированием карты;
- Кнопки масштаба (SMALLZOOM) - кнопки Увеличить масштаб и Уменьшить масштаб для управления масштабированием;
- Мини-карта (MINIMAP) - включает отображение схематичной карты с крупным масштабом в левом нижнем углу карты;
- Тип карты (TYPECONTROL) - кнопки Схема, Спутник или Гибрид для переключения стартового типа карты;
- Шкала масштаба (SCALELINE) - в правом нижнем углу будет отображена шкала масштаба, показывающая масштаб относительно 1 см карты.
- изменение масштаба колесом мыши (ENABLE_SCROLL_ZOOM) - позволяет изменять масштаб вращением колеса мыши;
- изменение масштаба двойным щелчком мыши (ENABLE_DBLCLICK_ZOOM) - позволяет изменять масштаб карты двойным кликом мыши: левая кнопка - увеличение, правая кнопка - уменьшение;
- перетаскивание карты (ENABLE_DRAGGING) - позволяет перетаскивать карту указателем мыши;
- горячие клавиши (ENABLE_HOTKEYS) - позволяет управлять масштабом карты с помощью горячих клавиш.
Пример вызова
Пользовательские комментарии
Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.
Для этого нужно всего лишь авторизоваться на сайте
Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.
Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
Одностраничный компонент осуществляет отображение карты с сервиса Яндекс.Карты. Компонент позволяет выводить саму карту, задавать на ней стартовую позицию и добавлять на карту дополнительную информацию. Компонент является стандартным и входит в дистрибутив модуля.
В визуальном редакторе компонент расположен по пути: Контент > Яндекс.Карты > Яндекс.Карты: настраиваемая карта.
Компонент относится к модулю Управление структурой.
Параметры
- схема (MAP) - схематичная карта с именами улиц и объектов;
- спутник (SATELLITE) - карта в виде фото со спутника;
- гибрид (HYBRID) - карта в виде фото со спутника с наложенной на нее схемой основных дорог и объектов.
- народная карта (PUBLIC) - карта, составляемая пользователями Яндекса.
- народный гибрид (PUBLIC_HYBRID) - карта в виде фото со спутника с наложенной на нее народной картой.
Для смены стартовой позиции необходимо снять опцию зафиксировать, с помощью штатных инструментов масштабирования задать новое стартовое положение. После этого нужно вновь отметить опцию зафиксировать.
Для создания комментария на карте необходимо воспользоваться ссылкой Добавить точки. Двойным кликом на нужной точке на карте вызвать окно добавления текста комментария и ввести нужный текст. Число задаваемых точек не ограничено. После задания всех необходимых точек нужно завершить работу с помощью ссылки Закончить. Для удаления комментариев нужно навести указатель мыши на удаляемую запись и нажать на крестик, появившийся рядом с ней.
Для создания линии на карте необходимо воспользоваться ссылкой "Добавить линию". Двойным кликом на начальной точке линии начните процесс создания маршрута. Одиночными кликами проложите маршрут по карте. Завершите создание линии двойным кликом на последней точке. Появится диалог настроек линии. Введите название линии, выберите цвет, толщину линии и процент прозрачности. Закройте диалог и завершите создание линии с помощью ссылки Закончить добавление линий. Созданная линия появится в списке линий.
Для редактирования параметров (саму линию отредактировать нельзя) нажмите на названии линии, появится диалог для редактирования параметров.
Для удаления линии нужно навести указатель мыши на удаляемую запись и нажать на крестик, появившийся рядом с ней.
В 1С Битрикс уже есть компонент bitrix:map.yandex.view, который выводит Яндекс.Карту и метки на ней. Но, на мой взгляд, он немного неудобен, т.к. все метки хранятся на странице вызова компонента. И, если, планируется большое количество меток, будет неудобно ими управлять.
В этом посте я расскажу как вывести элементы информационного блока на Яндекс.Карту. Я буду использовать стандартный компонент 1С Битрикс bitrix:news.list, который выводит список новостей. Давайте создадим новый тип информационного блока под названием "Объекты на карте":
Далее, добавим новый инфоблок, назовем его "Список объектов":
И добавим свойство с типом "Привязка к Яндекс.Карте" и названием "Координаты на карте":
Если Вы не хотите создавать новый тип и инфоблок, Вы можете использовать уже существующие.
Давайте добавим несколько элементов информационного блока, для того, чтобы вывести их на карте на Яндекс.Карте:
Далее, создайте страницу и разместите на ней компонент bitrix:news.list с шаблоном map. Теперь необходимо кастомизировать шаблон компонента bitrix:news.list. Для этого копируем стандартный шаблон .default из папки /bitrix/components/bitrix/news.list/templates в папку map компонента bitrix:news.list с компонентами вашего шаблона.
Для того, чтобы вывести метку на карте, нужно знать ее координаты. Координаты метки на карте можно получить из свойства элемента инфоблока COORDS. Для этого добавьте в параметр PROPERTY_CODE в вызове компонента bitrix:news.list элемент массива COORDS:
Теперь у нас есть все необходимое для вывода меток на Яндекс.Карту. Удалите код стандартного шаблона. Должно получиться так:
Инициализируйте массив $jsParams, в котором будете хранить метки:
Координаты у свойства с типом "Привязка к Яндекс.Карте" выводятся в виде строки, через запятую, широта и долгота. Поэтому, для того, чтобы получить на выходе объект, разбейте эту строку на массив. Получаем координаты меток, разбиваем строку и добавляем их в массив $jsParams со значением ключа coordPoint:
Теперь выведем Яндекс.Карту, для этого добавьте тег div с идентификатором map, нужной Вам ширины и высоты:
Создайте экземпляр класса карты, в конструкторе которого укажите id map, ее центр и коэффициент масштабирования. У меня будет Москва и масштаб 10:
Создавать карту следует после того, как веб-страница загрузится целиком. Это даст уверенность в том, что контейнер для карты создан и к нему можно обращаться по id. Чтобы инициализировать карту после загрузки страницы, можно воспользоваться функцией ready().
Функция ready вызовется тогда, когда API будет загружен и DOM сформирован:
Давайте теперь добавим метки на карту. Для этого сначала объявим переменную placemarks, в которой будем хранить объект со всеми метками. Используйте метод PhpToJSObject класса CUtil, который преобразует PHP массив в объект JS:
Теперь переберем все элементы объекта placemarks, создадим и метки на карту:
Все метки будут добавлены и выведены на карту. Полный код шаблона map компонента bitrix:news.list:
С помощью кнопки «Список карт» (отмечена красной стрелкой) можно просмотреть уже созданные Вами карты.
В левом части страницы располагается область, в которой задается название и описание для карты.
Конструктор позволяет сделать импорт из файла, для этого нажмите кнопку «Импорт», после чего выберите файл. (поддерживаются следующие форматы: XLSX, CSV, KML, GPX или GeoJSON ).
Чтобы правильно наполнить файл для импорта, скачайте доступные шаблоны, и измените адреса на необходимые Вам.
Для добавления адреса вручную, необходимо указать его в поисковой строке.
Далее, в модельном окне можно настроить внешний вид иконки, изменить адрес и добавить подпись к метке, которая будет отображаться рядом с иконкой на сайте.
Чтобы сохранить метку нажимает кнопку «Готово».
Когда все необходимы адреса будут добавлены на карту нажимаем кнопку «Сохранить и продолжить».
Следующим шагом выбираем как будет отображаться карта.
В левой части сайта расположены настройки карты, справа показано отображение карты.
Рассмотрим настройки карты.
- Интерактивная карта — такая карта будет отзываться на действия пользователей.
- Статическая карта — карта будет представлена в виде PNG изображения.
Указываем значения ширины и высоты. Если необходимо, чтобы карта растягивалась на ширину контейнера, необходимо поставить галочку «Растянуть по ширине».
Важно. Если вы хотите заменить карту на своем сайте, необходимо сделать ее точно такого же размера, как и уже существующая, иначе может нарушиться вся верстка на странице.
После завершения настроек карты нажимает кнопку «Получить код карты».
Далее, копируем полученный код и вставляем в необходимое место на сайте.
Важно. Не рекомендуется самостоятельно вносить изменения в код сайта. Неправильные действия могут нарушить работоспособность сайта.
Читайте также: