Отображение карты

Для отображения карты на форме в 1С можно использовать бесплатную JavaScript библиотеку Leaflet. На официальном сайте есть подробная документация с описанием всех доступных функций. Здесь я покажу как отобразить карту с маркерами нужных координат. Основной прием — показать HTML-документ со встроенным JS-скриптом. Изменяя скрипт, выводим нужную информацию. Минимальный набор действий, которые нужно произвести, чтобы показать карту, это: инициализировать объект-карту L.map(), спозиционировать карту на нужную точку L.setView(), заполнить тайлами (изображениями участков карты) L.tileLayer(), на этом этапе на экране будет карта с кнопками зума, остается добавить маркеры L.marker().

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

Вот шаблон текста для HTML-документа, его можно сохранить, например, в общих макетах, если предполагается использование в нескольких местах.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>
</head>
<body>
    <div id="map" class="map" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"></div>
    <script type="text/javascript">
    	var map = L.map('map').setView([&Широта, &Долгота],13);
    	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar', attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}).addTo(map);
    	&ДобавитьМаркеры
    </script>
</body>
</html>

В шаблоне есть три параметра: &Широта, &Долгота — это координаты точки, которая будет в центре экрана при загрузке карты, с помощью третьего параметра — &ДобавитьМаркеры можно добавить текст скрипта, которым будут отображены маркеры. Используемый в этом примере провайдер тайлов — OpenStreetMap, можно использовать любые другие сервисы, достаточно переписать вызов в методе L.tileLayer().

Для добавления маркера используется такой код:

var marker = L.marker([&Широта,&Долгота]).addTo(map);

Если маркеров будет несколько, им нужно присвоить уникальные имена. Если нужно добавить к маркеру подсказку, текст, который появится при наведении курсора, можно добавить опцию title:

var marker = L.marker([&Широта,&Долгота],{title:'&Наименование'}).addTo(map);

Ниже приведен пример модуля обработки, которая выводит на карту все записи из регистра сведений КоординатыКонтрагентов. Текстовый ревизит формы, в котором отображается HTML документ — ОкноКарты, текст шаблона страницы сохранен в общем мекете ПросмторКартыLeafletHTML.

Вам также может понравиться