Разработка store locator (карта магазинов) на 1С-Битрикс

Разработка store locator (карта магазинов/офисов) на 1С-Битрикс

Мы часто сталкиваемся с задачей: клиент просит добавить на сайт карту с точками продаж, но стандартные инструменты Битрикс не позволяют реализовать поиск по геолокации, фильтрацию и кластеризацию. В итоге пользователь вводит город, а видит список адресов без карты — плохой UX. Чтобы решить эту проблему, мы разрабатываем кастомный store locator на базе инфоблоков и картографического API. Наш опыт — более 10 лет в Битрикс-разработке, 100+ реализованных проектов.

Пользователь хочет быстро найти ближайший магазин и построить маршрут. Без карты это невозможно. Мы создаём компонент, который хранит координаты точек, выводит их на карту с кластеризацией, позволяет фильтровать по типу и городу, а также определяет местоположение пользователя.

Как работает store locator на Битрикс?

Каждая точка продаж — элемент инфоблока. Ключевые свойства — координаты (LAT/LNG), адрес, телефон, режим работы. Мы добавляем геокодирование: при создании точки координаты автоматически подставляются через API Яндекс.Геокодера. Это исключает ручной ввод и ошибки.

Почему важно хранить координаты в инфоблоке?

Хранение LAT/LNG в инфоблоке позволяет выполнять пространственные запросы на стороне PHP — например, поиск точек в радиусе от пользователя. Без этого пришлось бы генерировать координаты на лету, что медленно и ненадёжно. Инфоблоки v2.0 с числовыми свойствами дают точность до 6 знаков — этого достаточно для определения конкретного здания.

Хранение данных о точках продаж

Минимальный набор свойств элемента инфоблока:

Координаты получаем через геокодирование при сохранении элемента. Пример обработчика события OnBeforeIBlockElementAdd:

AddEventHandler('iblock', 'OnBeforeIBlockElementAdd', 'geocodeStoreAddress'); function geocodeStoreAddress(&$arFields) { if ($arFields['IBLOCK_ID'] !== IBLOCK_STORES_ID) return; $address = urlencode($arFields['PROPERTIES']['ADDRESS']['VALUE']); $http = new \Bitrix\Main\Web\HttpClient(); $response = $http->get("https://geocode-maps.yandex.ru/1.x/?apikey=KEY&format=json&geocode=$address"); $data = json_decode($response, true); $coords = $data['response']['GeoObjectCollection']['featureMember'][0]['GeoObject']['Point']['pos']; [$lng, $lat] = explode(' ', $coords); $arFields['PROPERTIES']['LAT']['VALUE'] = $lat; $arFields['PROPERTIES']['LNG']['VALUE'] = $lng; } 

Яндекс.Геокодер API используется бесплатно до 25 000 запросов в сутки.

Выбор картографического API

Сравнение популярных решений:

Для российских проектов мы используем Яндекс.Карты — детальное покрытие и встроенная кластеризация. Кластеризация улучшает производительность в 5 раз при 200+ точках.

Архитектура компонента

Компонент состоит из PHP-бэкенда и JS-фронтенда. Бэкенд получает список точек из инфоблока, опционально фильтрует по городу или радиусу. Данные передаются в JS через JSON в скрипте или через AJAX-endpoint.

$res = CIBlockElement::GetList( [], ['IBLOCK_ID' => IBLOCK_STORES_ID, 'ACTIVE' => 'Y'], false, false, ['ID', 'NAME', 'PROPERTY_LAT', 'PROPERTY_LNG', 'PROPERTY_ADDRESS', 'PROPERTY_PHONE', 'PROPERTY_WORKING_HOURS', 'PROPERTY_POINT_TYPE'] ); $points = []; while ($el = $res->GetNext()) { $points[] = [ 'id' => $el['ID'], 'name' => $el['NAME'], 'lat' => (float)$el['PROPERTY_LAT_VALUE'], 'lng' => (float)$el['PROPERTY_LNG_VALUE'], 'address' => $el['PROPERTY_ADDRESS_VALUE'], 'phone' => $el['PROPERTY_PHONE_VALUE'], 'hours' => $el['PROPERTY_WORKING_HOURS_VALUE'], 'type' => $el['PROPERTY_POINT_TYPE_VALUE'], ]; } 

Фронтенд инициализирует карту, добавляет маркеры с кластеризацией, реализует поиск и фильтрацию. Кластеризация обязательна при 50+ точках — без неё карта тормозит.

// Яндекс.Карты API 3.0 const map = new ymaps3.YMap(document.getElementById('map'), { location: { center: [37.617, 55.755], zoom: 10 } }); const clusterer = new ymaps3.YMapClusterer({ ... }); 

Производительность при 500+ точках

При большом числе точек весь массив в JS передавать неэффективно. Решение:

• Пагинированный AJAX: загружаем точки в границах видимой области карты, подгружаем при перемещении.
• Серверный поиск по радиусу: фильтрация в SQL через формулу гаверсинуса или PostGIS (если PostgreSQL).
• Кеширование: список точек редко меняется, кешируем на 1 час в b_cache.

SELECT *, (6371 * acos(cos(radians(:lat)) * cos(radians(lat)) * cos(radians(lng) - radians(:lng)) + sin(radians(:lat)) * sin(radians(lat)))) AS distance FROM b_iblock_element_prop_... HAVING distance < :radius ORDER BY distance