Интеграция виджета выбора пункта выдачи на карте
Виджет выбора ПВЗ на карте — обязательный элемент оформления заказа для интернет-магазинов, предлагающих самовывоз. Покупатель видит все доступные точки выдачи на карте, может отфильтровать по типу (постамат/ПВЗ), режиму работы и расстоянию от текущего местоположения.
Источники данных о ПВЗ
Точки выдачи приходят из нескольких источников:
-
СДЭК API —
GET /v2/deliverypoints?city_code={id}&type=PVZ - DHL, BoxBerry, 5Post — собственные API каждого провайдера
- Яндекс.Доставка — endpoint для получения списка ПВЗ
- Собственные точки магазина — хранятся в БД
Агрегация: все точки объединяются в единый формат и хранятся в таблице pickup_points. Обновление — scheduled job раз в 6–12 часов.
pickup_points (
id, provider, external_id, name, address, city_id,
lat, lng, working_hours (jsonb),
max_weight, max_dimensions (jsonb),
has_fitting_room, has_cash, has_card,
is_active, updated_at
)
Карта: Яндекс.Карты vs Google Maps vs Leaflet
Яндекс.Карты JS API 3.0 — лучший выбор для российских пользователей, точнее определяет адреса. Бесплатный лимит 1000 запросов/сутки, далее платно.
Leaflet + OpenStreetMap — бесплатно, без ограничений, хуже геокодирование в РФ. Хорошо подходит для корпоративных сайтов с небольшим трафиком.
Google Maps — высокая стоимость для РФ, часть функций ограничена.
Реализация кластеризации
При 2000+ точек на карте нужна кластеризация — иначе браузер тормозит.
// Яндекс.Карты
import { Clusterer } from '@yandex/ymaps3-clusterer';
const clusterer = new Clusterer({
clusterize: (coordinates, zoom) => {
return zoom < 12; // кластеризовать при масштабе меньше 12
}
});
Для Leaflet — плагин leaflet.markercluster.
Фильтры и поиск
Фильтры на UI:
- Тип: постамат / ПВЗ с сотрудником
- Режим работы: сейчас открыт / 24 часа
- Сервисы: примерочная / оплата картой / наложенный платёж
- Максимальный вес посылки
Поиск по адресу реализуется через геокодирование — вводит адрес, получает координаты, карта центрируется, подсвечиваются ближайшие точки.
Передача данных в заказ
После выбора точки в форме заказа сохраняются:
{
"pickup_type": "pvz",
"pickup_point_id": 1234,
"pickup_provider": "cdek",
"pickup_external_id": "MSK001",
"pickup_address": "Москва, ул. Арбат, 5"
}
Эти данные передаются в API службы доставки при создании отправления.
Мобильная адаптация
На мобильных устройствах карта часто конкурирует с прокруткой страницы. Решение: кнопка "развернуть карту" → карта открывается на полный экран через CSS position: fixed. Либо — отдельная bottom sheet с картой поверх контента.
Определение города пользователя
По умолчанию карта центрируется на город, который определяется через:
- IP-геолокация (api.sypexgeo.net или ipgeolocation.io)
- Геолокация браузера (с разрешения пользователя)
- Адрес доставки из предыдущего заказа (для авторизованных)
Срок разработки: 3–5 рабочих дней для виджета с агрегацией нескольких провайдеров, кластеризацией и фильтрами.