При автоматизации торговой деятельности, логистики или выездного обслуживания часто возникает задача визуализировать географическое расположение объектов — складов, клиентов, торговых точек или маршрутов доставки прямо на форме 1С. Разберем по шагам, как встроить интерактивную карту Google Maps в форму, динамически передать в нее список координат и настроить взаимодействие с пользователем.
В платформе 1С:Предприятие отображение веб-контента реализуется через специальный элемент управления — ПолеHTMLДокумента. Данный элемент позволяет загружать произвольный HTML-код, выполнять сценарии на языке JavaScript и вызывать встроенные функции картографических API.
Проанализируем базовый алгоритм интеграции:
ПолеHTMLДокумента.УстановитьТекст.Рассмотрим структуру шаблона HTML-документа, который мы помещаем в макет с именем ТекстКарты. В тело скрипта добавляется специальный маркер-разделитель (например, [=-парТочкы-=]), который в дальнейшем будет заменяться кодом создания маркеров на стороне 1С.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
html, body, #map_canvas { height: 100%; margin: 0; padding: 0; }
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ"></script>
<script>
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(56.37, 37.50);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myLatlng,
disableDoubleClickZoom: true
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
[=-парТочкы-=]
}
function inf(marker, tekst, map) {
google.maps.event.addListener(marker, 'click', function($event) {
var iw = new google.maps.InfoWindow();
iw.setContent(tekst);
iw.setPosition(marker.getPosition());
iw.open(map);
});
}
function inf2(marker, map) {
google.maps.event.addListener(marker, 'dragend', function($event) {
alert(marker.getPosition());
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Рассмотрим подробнее код процедуры 1С, которая обходит таблицу значений с торговыми точками, генерирует вызовы API создания маркеров с подписями и передает итоговую разметку в поле формы.
Процедура ОтобразитьКартуНажатие(Элемент)
// 1. Формируем исходную таблицу с координатами торговых точек
тз = Новый ТаблицаЗначений;
тз.Колонки.Добавить("ТТ");
тз.Колонки.Добавить("Широта");
тз.Колонки.Добавить("Долгота");
нс = тз.Добавить();
нс.ТТ = "Магазин №1";
нс.Широта = 56.1;
нс.Долгота = 37.1;
нс = тз.Добавить();
нс.ТТ = "Магазин №2";
нс.Широта = 56.5;
нс.Долгота = 37.5;
нс = тз.Добавить();
нс.ТТ = "Склад Центральный";
нс.Широта = 56.8;
нс.Долгота = 37.8;
// 2. Генерируем фрагмент JavaScript-кода для создания объектов Marker
СтрокаМаркеров = "";
Для Каждого Стр Из тз Цикл
ШиротаСтр = Формат(Стр.Широта, "ЧРД=.; ЧГ=");
ДолготаСтр = Формат(Стр.Долгота, "ЧРД=.; ЧГ=");
СтрокаМаркеров = СтрокаМаркеров +
"var marker = new google.maps.Marker({" +
"position: new google.maps.LatLng(" + ШиротаСтр + "," + ДолготаСтр + ")," +
"label: {color: '#FF0000', text: '" + Стр.ТТ + "'}," +
"draggable: true," +
"map: map" +
"});" +
"inf(marker, 'Информация: " + Стр.ТТ + "', map);" +
"inf2(marker, map);";
КонецЦикла;
// 3. Получаем текст шаблона, подставляем сгенерированный JS и загружаем в поле
МакетКарты = ПолучитьМакет("ТекстКарты");
ТекстHTML = МакетКарты.ПолучитьТекст();
ТекстHTML = СтрЗаменить(ТекстHTML, "[=-парТочкы-=]", СтрокаМаркеров);
ЭлементыФормы.ПолеHTMLДокумента.УстановитьТекст(ТекстHTML);
КонецПроцедуры
Посмотрим на ключевые свойства объекта google.maps.Marker, позволяющие гибко настраивать отображение точек:
label. Можно передавать как простую строку (label: 'Имя'), так и составной объект с настройкой цвета (label: {color: '#FF0000', text: 'Имя'}).icon (например, icon: 'C:/image.png' или ссылка на внешний веб-ресурс).draggable: true.click через google.maps.event.addListener, внутри которого инициализируется объект google.maps.InfoWindow.dragend, из которого методом marker.getPosition() можно извлечь обновленные широту и долготу.Выясним причину возможных неполадок при работе с картографическими сервисами внутри 1С и способы их устранения:
<head> метатег <meta http-equiv="X-UA-Compatible" content="IE=edge">, а также настраиваем параметр FEATURE_BROWSER_EMULATION в реестре Windows для процессов 1cv8.exe со значением 11000.C:/... не поддерживаются. Иконки маркеров необходимо встраивать в формате Base64 (data:image/png;base64,...) либо загружать по протоколу HTTPS.Формат(Значение, "ЧРД=.; ЧГ="), чтобы десятичный разделитель гарантированно был точкой, а группировка разрядов отсутствовала.