Как интегрировать Яндекс.Карты с 1С и обеспечить двустороннюю связь с JavaScript?

Мы с вами часто сталкиваемся с задачами, требующими визуализации географических данных или автоматизации работы с адресами в 1С. Одним из мощных инструментов для этого является интеграция с картографическими сервисами, такими как Яндекс.Карты, через JavaScript. В этой статье мы подробно разберем, как реализовать такую интеграцию, какие особенности нас ждут, особенно в части двусторонней связи, и какие альтернативы существуют.

Представим ситуацию, когда нам необходимо отобразить точки на карте прямо в форме 1С, а также получать обратно данные от пользователя, например, координаты клика по карте. Часто на начальном этапе мы сталкиваемся с тем, что JavaScript-код на HTML-странице корректно отображает карту и точки, но 1С при этом не реагирует на события, происходящие на карте, и не может получить оттуда данные. Давайте выясним причину такого поведения и рассмотрим подробные решения.

Решение 1: Интеграция с Яндекс.Картами и обеспечение двусторонней связи

Для интеграции Яндекс.Карт в 1С мы обычно используем элемент управления ПолеHTMLДокумента на форме. Этот элемент позволяет нам загружать HTML-страницу, содержащую JavaScript-код для работы с картами.

Получение ключа API и особенности использования

1. Ключ API: Прежде всего, для работы с Яндекс.Картами вам потребуется ключ API. Его можно получить бесплатно с определенными ограничениями на количество запросов. Для коммерческого использования или высоких нагрузок может потребоваться платная лицензия и размещение обработки на веб-сервере.
2. Версия API: Обратите внимание на версию JavaScript API Яндекс.Карт. Часто для интеграции с 1С используют версию 2.1 (jsapi-v2-1), поскольку более новые версии могут иметь особенности совместимости со встроенным в 1С браузером.

Возможности Яндекс.Карт через API

Яндекс предоставляет обширный набор API-продуктов для работы с географическими данными. Мы можем использовать:

• Geosuggest (через suggest-maps.yandex.ru): Позволяет получать список возможных адресов по текстовому запросу, значительно упрощая ввод адресов пользователем.
• Geocoder: Используется для прямого и обратного геокодирования – получения координат по адресу и, наоборот, адреса по координатам.
• Построение маршрутов: API позволяет строить маршруты между несколькими точками, включая мультимаршруты (до десяти транзитных точек), что очень полезно для оптимизации логистических процессов.

Интеграция с этими возможностями позволяет нам не только отображать данные, но и автоматизировать ввод, проверку адресов и планирование маршрутов, например, для торговых представителей в системах 1С:CRM.

Обеспечение двусторонней связи между 1С и JavaScript

Одной из ключевых и наиболее сложной задач является организация двустороннего обмена данными между JavaScript-кодом на HTML-странице и модулем формы 1С. Разберем по шагам, как это сделать, учитывая особенности современных версий платформы 1С и используемого ею WebKit.

Почему прямой вызов функций 1С из JavaScript может не работать?

В более старых версиях 1С (до перехода на WebKit или при использовании устаревших режимов совместимости IE) существовали методы вроде Call1C для прямого вызова серверных процедур из JavaScript. Однако, с переходом ПоляHTMLДокумента на движок WebKit в современных версиях платформы 1С, прямой вызов функций 1С из JavaScript часто становится невозможен или крайне затруднен.

Альтернативный подход: обмен данными через HTML-элементы

Мы будем использовать HTML-элементы на странице в качестве "моста" для обмена данными. Принцип следующий:

1. JavaScript записывает данные: Когда в JavaScript происходит событие (например, клик по карте, выбор адреса), он записывает нужные данные (например, координаты, выбранный адрес) в определенный HTML-элемент на странице (например, в скрытый div) в формате JSON.
2. 1С считывает данные: 1С периодически опрашивает содержимое этого HTML-элемента или реагирует на определенные события ПоляHTMLДокумента (например, ПриИзмененииДокумента) и считывает оттуда данные.

Пример реализации обмена данными:

1. JavaScript-код на HTML-странице:

В HTML-странице, которую мы загружаем в ПолеHTMLДокумента, нам необходимо создать скрытый элемент, куда JavaScript будет записывать данные. Например:

<div id="dataFromJS" style="display:none;"></div>

Затем, в JavaScript, мы создадим функцию, которая будет записывать данные в этот элемент:

// В JavaScript на странице HTML
function sendDataTo1C(data) {
    const dataDiv = document.getElementById('dataFromJS');
    if (dataDiv) {
        dataDiv.innerText = JSON.stringify(data);
        // Дополнительно можно обновить какой-либо другой элемент,
        // чтобы инициировать событие в 1С, если 1С отслеживает изменения DOM.
        // Например, можно изменить значение скрытого input-поля,
        // которое 1С может отследить через событие "ПриИзменении".
    }
}

// Пример использования после инициализации карты и добавления обработчика события:
// Предположим, у нас есть объект карты "myMap"
// myMap.events.add('click', function (e) {
//     const coords = e.get('coords');
//     sendDataTo1C({ type: 'mapClick', coordinates: coords });
// });

// Или, например, при выборе объекта на карте:
// myMap.geoObjects.events.add('click', function (e) {
//     const objectData = e.get('target').properties.getAll();
//     sendDataTo1C({ type: 'objectClick', data: objectData });
// });

2. Код 1С для считывания данных:

В модуле формы 1С, где размещено ПолеHTMLДокумента, нам потребуется обработчик события. Часто используем ПриИзмененииДокумента или ПриНажатии для контроля изменений или действий внутри HTML-документа. Мы будем получать доступ к DOM-модели документа и считывать содержимое нашего элемента.

// В модуле формы 1С
// Обработчик события ПоляHTMLДокумента (например, ПриИзмененииДокумента)
Процедура ПолеHTMLДокументаПриИзмененииДокумента(Элемент)

    // Получаем доступ к DOM документа
    DOMДокумент = Элемент.Документ;
    Если DOMДокумент = Неопределено Тогда
        Возврат;
    КонецЕсли;

    // Находим элемент, куда JS записывает данные
    ЭлементДанных = DOMДокумент.getElementById("dataFromJS");

    Если ЭлементДанных <> Неопределено И ЭлементДанных.innerText <> "" Тогда
        JSONСтрока = ЭлементДанных.innerText;
        Попытка
            // Используем стандартный объект JSON для парсинга
            ЧтениеJSON = Новый ЧтениеJSON;
            ЧтениеJSON.УстановитьСтроку(JSONСтрока);
            ДанныеИзJS = JSON.Прочитать(ЧтениеJSON);
            ЧтениеJSON.Закрыть();

            // Обрабатываем полученные данные
            Сообщить("Получены данные из JS: " + ДанныеИзJS.coordinates);
            // Пример: если тип события 'mapClick', то обрабатываем координаты
            Если ДанныеИзJS.type = "mapClick" Тогда
                Координаты = ДанныеИзJS.coordinates;
                // Далее можно сохранить координаты, использовать их для запросов и т.д.
                Сообщить("Координаты клика: " + Координаты[0] + ", " + Координаты[1]);
            КонецЕсли;

            // Очищаем элемент, чтобы не обрабатывать те же данные повторно
            ЭлементДанных.innerText = "";
        Исключение
            Сообщить("Ошибка при чтении JSON из JS: " + ОписаниеОшибки());
        КонецПопытки;
    КонецЕсли;

КонецПроцедуры

// Для отправки данных из 1С в JavaScript, мы можем модифицировать HTML-страницу
// или вызвать JS-функцию через метод ExecuteScript
Процедура ОтправитьДанныеВJS(Данные)
    Если Элементы.ПолеHTMLДокумента.Документ = Неопределено Тогда
        Возврат;
    КонецЕсли;

    // Преобразуем данные 1С в JSON-строку
    ЗаписьJSON = Новый ЗаписьJSON;
    ЗаписьJSON.УстановитьСтроку();
    JSON.Записать(ЗаписьJSON, Данные);
    JSONСтрока = ЗаписьJSON.ПолучитьСтроку();
    ЗаписьJSON.Закрыть();

    // Вызываем JavaScript-функцию на странице
    // Предполагаем, что на HTML-странице есть функция receiveDataFrom1C(jsonData)
    КомандаJS = "receiveDataFrom1C(" + JSONСтрока + ");";
    Элементы.ПолеHTMLДокумента.ВыполнитьКоманду(КомандаJS);
КонецПроцедуры

Такой подход обеспечивает интерактивные и более производительные веб-интерфейсы, так как многие операции выполняются на стороне клиента, уменьшая количество клиент-серверных вызовов.

Важные моменты по WebKit и ECMAScript:

Мы должны учитывать, что в зависимости от версии платформы 1С, используемый WebKit может поддерживать разные стандарты ECMAScript:

• До версии 8.3.13 требовался ECMAScript 3.
• С версии 8.3.14 поддерживается ECMAScript 6 и выше.
• В версии 8.3.26 используется современный WebKit, что значительно расширяет возможности использования актуальных JavaScript-библиотек.

Настройка реестра для старых версий 1С (Windows):

Для корректной работы ПоляHTMLДокумента с современными JavaScript API карт на старых версиях платформы 1С под Windows, которые не используют WebKit, может потребоваться настройка реестра операционной системы. Это связано с тем, что встроенный браузер по умолчанию может работать в режиме совместимости с устаревшим IE7, что приводит к ошибкам. Добавление параметра в реестр позволяет перевести его в режим эмуляции IE11.

Решение 2: Альтернативные картографические сервисы (OpenStreetMap и Leaflet)

Рассмотрим также альтернативные варианты, которые могут быть предпочтительнее в некоторых случаях.

OpenStreetMap и Leaflet

Многие специалисты рекомендуют использовать связку OpenStreetMap и JavaScript-библиотеку Leaflet. Почему?

• Бесплатность: OpenStreetMap – это бесплатная открытая карта мира, созданная сообществом. Для её использования не требуется ключ API и регистрация.
• Открытый исходный код: Leaflet – это легкая, бесплатная JavaScript-библиотека с открытым исходным кодом, предназначенная для отображения интерактивных карт на веб-сайтах. Она обладает широким функционалом, хорошей документацией и активным сообществом.
• Гибкость: Leaflet позволяет легко интегрировать различные слои карт, маркеры, полигоны и другие элементы.

Когда стоит выбрать OpenStreetMap/Leaflet?

Мы рекомендуем рассмотреть эти варианты, если:

• Бюджет ограничен: Отсутствие необходимости в платных лицензиях и ключах API делает их очень привлекательными.
• Требуется базовая функциональность: Для задач, не требующих специфических коммерческих функций (вроде продвинутых сервисов маршрутизации с учетом пробок в реальном времени, как у Яндекса), OpenStreetMap и Leaflet являются отличным выбором.
• Важна конфиденциальность данных: Открытые решения дают больше контроля над данными и их обработкой.

Ограничения:

Следует учитывать, что OpenStreetMap, хоть и бесплатен, может иметь ограничения в функционале по сравнению с коммерческими сервисами, например, отсутствие встроенных статических карт или сложных алгоритмов маршрутизации, которые предлагают Google или Яндекс. При сравнении с другими коммерческими API, такими как 2ГИС, было отмечено, что их цены могут быть значительно выше, чем у Яндекса, что также является фактором при выборе.

В заключение, мы выяснили, что интеграция 1С с картографическими сервисами через JavaScript – это вполне реализуемая задача. Ключевым моментом является организация двусторонней связи, которую мы рекомендуем реализовывать через обмен данными в HTML-элементах. Выбор между Яндекс.Картами и OpenStreetMap/Leaflet должен основываться на ваших конкретных потребностях, бюджете и требуемом функционале. Внимательно проанализируйте каждый вариант, чтобы принять оптимальное решение для вашего проекта.