Как выводить адреса и метки на Яндекс и Google Картах в управляемых формах 1С?

← На главную

Задача отображения списка адресов на интерактивной карте с произвольными комментариями к каждой точке часто возникает при автоматизации логистики, работы курьеров или торговых представителей. Однако при использовании старых наработок разработчики 1С регулярно сталкиваются с ошибками: карта перестает загружаться, выдает сообщения о недействительном ключе (invalid key) или некорректно обрабатывает геокодирование адресов.

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

Причины ошибок при работе со старыми картами в 1С

Проанализируем ситуацию, почему решения, созданные несколько лет назад, перестают функционировать при открытии в современных версиях платформы 1С:

Отключение устаревших версий JS API карт. Картографические сервисы полностью прекратили поддержку версий API 1.x и 2.0. Если в макете указана ссылка на устаревший скрипт, библиотека карт не может инициализироваться.
Обязательность API-ключа и протокола HTTPS. Современные сервисы (Яндекс Карты, Google Maps) требуют использования зарегистрированного API-ключа и работающего соединения по протоколу HTTPS. Запросы по HTTP или без ключа блокируются сервером геосервиса.
Режим совместимости встроенного браузера. В тонком клиенте 1С на платформе ниже 8.3.14 элемент формы Поле HTML документа использует движок Internet Explorer (Trident). По умолчанию он может запускаться в режиме совместимости с IE7/IE8, что приводит к синтаксическим ошибкам при исполнении современного JavaScript.

Разбор макета HTML для работы с картой и метками

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Карта заказов</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="https://api-maps.yandex.ru/2.1/?apikey=ВАШ_API_КЛЮЧ&lang=ru_RU" type="text/javascript"></script>
    <script type="text/javascript">
        var map;
        var placemark;
        
        window.onload = function () {
            map = new YMaps.Map(document.getElementById("YMapsID"));
            map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
            
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.Zoom());
            map.addControl(new YMaps.ScaleLine());
            map.enableScrollZoom();
        }

        function AddPlacemark(Name, Descr, Cont, Att, Latt, Params) {
            placemark = new YMaps.Placemark(new YMaps.GeoPoint(Latt, Att), Params);
            placemark.name = Name;
            placemark.description = Descr;
            
            if (Cont != "") {
                placemark.setIconContent(Cont);
            }
            
            map.addOverlay(placemark);
            return placemark;
        }
    
        function AddPlacemarkByAddress(Name, Descr, Cont, Address, Params) {
            geocoder = new YMaps.Geocoder(Address, {results: 1});    
            
            YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {
                placemark = new YMaps.Placemark(this.get(0).getGeoPoint(), Params);
                placemark.name = Name;
                placemark.description = Descr;
                
                if (Cont != "") {
                    placemark.setIconContent(Cont);
                }
                map.addOverlay(placemark);
            });
        }
    </script>
</head>
<body>
    <div id="YMapsID" style="width:100%;height:100%"></div>
</body>
</html>

Посмотрим на ключевые моменты этого кода:

Метатег <meta http-equiv="X-UA-Compatible" content="IE=edge" /> заставляет встроенный браузер 1С использовать самый актуальный режим рендеринга страницы.
Функция AddPlacemark принимает имя метки, текстовое описание (комментарий), содержимое и географические координаты, после чего добавляет объект на карту.
Функция AddPlacemarkByAddress осуществляет поиск координат через геокодер по передаваемому текстовому адресу прямо в JS-скрипте.

Пошаговый порядок настройки управляемой формы в 1С

Рассмотрим, как правильно связать макет HTML и обработку на платформе 1С:Предприятие 8.3 (Управляемые формы):

Создание реквизита формы: В управляемой форме добавьте реквизит с типом Строка (например, ТекстHTML).
Размещение элемента: Перетащите реквизит на форму и укажите вид элемента Поле HTML документа.
Загрузка макета: В событии формы ПриОткрытии или ПриСозданииНаСервере прочитайте HTML-макет из макета обработки и запишите его в реквизит ТекстHTML.
Передача данных в JavaScript: После загрузки документа вызовите подготовленные функции скрипта. В управляемых формах 1С для вызова JS-функций из кода 1С используется метод элемента формы ИсполнитьСкрипт() (или evalAction() для устаревших версий платформы).

Пример кода на 1С для вызова функции добавления метки из 1С:


&НаКлиенте
Процедура ДобавитьМеткуНаКарту(Название, Комментарий, Широта, Долгота)
    
    // Формируем вызов JavaScript-функции, определенной в макете
    Скрипт = СтрШаблон("AddPlacemark('%1', '%2', '%1', %3, %4, {})",
        Название,
        Комментарий,
        СтрЗаменить(Строка(Широта), ",", "."),
        СтрЗаменить(Строка(Долгота), ",", "."));
        
    Элементы.ПолеКарты.ИсполнитьСкрипт(Скрипт);
    
КонецПроцедуры

Как выводить адреса и метки на Яндекс и Google Картах в управляемых формах 1С?

Причины ошибок при работе со старыми картами в 1С

Разбор макета HTML для работы с картой и метками

Пошаговый порядок настройки управляемой формы в 1С

Рекомендации по повышению надежности работы с картами

Читайте также