Розробка 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