Пример интерактивной работы с картами Google.

16.10.12

Интеграция - WEB-интеграция

В этой публикации приведен пример, как можно взаимодействовать с Google Maps API, интерактивно создавать и редактировать объекты карты, обрабатывать события объектов карты.

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование По подписке [?] Купить один файл
карты инфостарт2.dt
.dt 86,24Kb
195
195 Скачать (1 SM) Купить за 1 850 руб.

К сожалению, прошлая публикация была потёрта в результате какой то ошибке на сервере базы данных, поэтому приходится создавать новую, улучшенную версию. В этой публикации я постараюсь рассмотреть способ взаимодействия с картами не как со статичным объектом, когда предварительно формируется текст html страницы, который показывается пользователю, а как с объектом, обладающим "рычагами" для управления.

В тестовом примере показаны: рисование полигонов в статике из данных БД, рисование маркеров в статике, создание маркеров интерактивно без перерисовки карты, перемещение маркеров.

Массив статических элементов передается при формировании страницы, как xml блок, ввиду чего, к сожалению, страница некорректно работает в firefox. Проблема легко лечится вынесением массива из html блока и формированием объектов динамически.

Для динамических изменений веб страницы необходимо вызывать её скриптовые функции. В 1С это выглядит довольно "неудобно":

Функция Скрипт(Элемент,Код)
    Результат = Элемент.Документ.parentWindow.Eval(Код);
    Возврат Результат;
КонецФункции

Для собственного удобства я обернул вызов javascript кода в функцию. Здесь "Элемент" - поле HTML текста, а "Код" - код на языке javascript. Для вызова доступны глобальные переменные блока и функции оттуда же. Поэтому, для создания маркера мы создаем функцию в макете html страницы, которая по списку параметров создает маркер:

function placemarker(iconId,lat,lng,title,GUID){
         var pos = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
         var marker = new google.maps.Marker({ position: pos, map: map, title: title, icon: icons[iconId] });
        }

В функцию передаются текстовые значения координат, названия точки и иконки (если она есть)

Кроме того, что маркер размещается на поле HTML документа, необходимо отразить его создание в базе данных. Для этого создаются подписки на события нажатия на карту.

google.maps.event.addListener(map, 'click', mapClick);

function mapClick(event) {
         sender = "map";
         eventname = "click";
         latlng = event.latLng;
        }

Обработчик устанавливает значения глобальных переменных, к сожалению более красивого способа я пока не нашёл. Эти глобальные переменные доступны в обработчике нажатия на поле HTML документа в 1С. С помощью переменной sender определяется объект, с которым произошло событие, с помощью eventname - само событие, а в переменной latlng находятся координаты, если они применимы.

В обработке нажатия на поле HTML текста осуществляется обработка всех подобных событий.

&НаКлиенте
Процедура ПолеHTMLТекстаПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
    ИсточникСобытия  = Скрипт(Элемент,"sender");
    Событие    = Скрипт(Элемент,"eventname");
    Если ИсточникСобытия = "map" И Событие = "dragend" Тогда
        Возврат;
    КонецЕсли;
    Широта = Скрипт(Элемент,"latlng.lat()");
    Долгота = Скрипт(Элемент,"latlng.lng()");
    Если ИсточникСобытия = "marker" Тогда
        GUID  = Скрипт(Элемент,"myGUID");
        ТК = ПолеHTMLТекстаПриНажатииНаСервере(GUID);
        Если Событие = "click" Тогда
            Если НЕ ТК = Неопределено ИЛИ ВводНовыхОбъектов Тогда
                ПараметрыФормы  = Новый Структура("Ключ",ТК);
                Форма = ПолучитьФорму("Справочник.ОбъектыРазвития.ФормаОбъекта",ПараметрыФормы);
                ДанныеФормы = Форма.Объект;
                ЗаполнитьНаСервере(ДанныеФормы,Широта,Долгота);
                КопироватьДанныеФормы(ДанныеФормы,Форма.Объект);
                Форма.ОткрытьМодально();
            КонецЕсли;
        ИначеЕсли Событие = "dragend" Тогда
            ПараметрыОбновления = Новый Структура("Широта,Долгота,GUID",Широта,Долгота,GUID);
            Структура = Новый ФиксированнаяСтруктура(ПараметрыОбновления);
            ОбновитьКоординатыТК(Структура);
        КонецЕсли;
    ИначеЕсли ИсточникСобытия = "map" И Событие = "click" И ВводНовыхОбъектов Тогда
        ВводНовогоТК = Истина;
        ПараметрыФормы  = Новый Структура("Ключ",ТК);
        Форма = ПолучитьФорму("Справочник.ОбъектыРазвития.ФормаОбъекта",ПараметрыФормы);
        ДанныеФормы = Форма.Объект;
        ЗаполнитьНаСервере(ДанныеФормы,Широта,Долгота);
        КопироватьДанныеФормы(ДанныеФормы,Форма.Объект);
        Форма.ОткрытьМодально();
    КонецЕсли;
КонецПроцедуры

Следующим образом получаются значения глобальных переменных, играющих роль параметров события. Дальнейшая обработка тривиальна, рассматривать её не будем.

ИсточникСобытия = Скрипт(Элемент,"sender");

Широта = Скрипт(Элемент,"latlng.lat()");

Долгота = Скрипт(Элемент,"latlng.lng()");

Аналогичным образом осуществляется и перемещение маркеров. Только вместо события карты вызывается событие маркера, которое привязывается к нему при создании.

См. также

Сайты и интернет-магазины WEB-интеграция Системный администратор Программист Пользователь Платформа 1С v8.3 Конфигурации 1cv8 1С:Управление торговлей 11 Автомобили, автосервисы Россия Управленческий учет Платные (руб)

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM разных брендов в одной информационной базе в ручном и автоматическом режиме.

36000 руб.

03.08.2020    17879    19    22    

17

Сайты и интернет-магазины Интеграция WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 Управленческий учет Платные (руб)

Интеграция 1С и Битрикс 24. Разработка имеет двухстороннюю синхронизацию 1С и Bitrix24 задачами. Решение позволяет создавать пользователя в 1С из Битрикс24 и наоборот. Данная разработка технически подходит под все основные конфигурации линейки продуктов 1С:Предприятие 8.3 (платформа начиная с 8.3.23). При приобретении предоставляется 1 месяц бесплатных обновлений разработки. Доступна демо-версия продукта с подключением Вашего Битрикс24

7200 руб.

04.05.2021    20002    13    17    

17

WEB-интеграция 8.3.8 Конфигурации 1cv8 Автомобили, автосервисы Беларусь Украина Россия Казахстан Управленческий учет Платные (руб)

Расширение предназначено для конфигурации "1С:Предприятие 8. Управление Автотранспортом. ПРОФ". Функционал модуля: 1. Заполнение регистров сведений по подсистеме "Мониторинг", а именно: события по мониторингу, координаты по мониторингу, пробег и расход по мониторингу, текущее местоположение ТС по мониторингу 2. Заполнение путевого листа: пробег по мониторингу, время выезда/заезда, табличная часть ГСМ, места стоянок по геозонам. 3. Отчеты по данным загруженным в регистры сведений. 4. Предусмотрена автоматическая загрузка данных в фоновом режиме (условия работы данной загрузке читайте в описании товара) Модуль работает без включенной константы по настройкам мониторинга. Модуль формы предоставляется с открытым кодом, общий модуль защищен. Любой заинтересованный пользователь, имеет возможность скачать демо-версию расширения.

22656 руб.

25.05.2021    14485    42    8    

18

WEB-интеграция Программист Руководитель проекта Платформа 1С v8.3 Конфигурации 1cv8 1С:Франчайзи, автоматизация бизнеса Платные (руб)

Расширение значительно упрощает написание API на 1С. Веб программисты получают простой и понятный доступ к 1С. Описание API создаётся автоматически и представляется в виде удобном как для человека, так и для программной обработки.

24000 руб.

27.09.2024    1486    1    0    

3
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. maxlenium 36 17.10.12 08:31 Сейчас в теме
Интересная разработка. Правда она идет в виде конфигурации, т.е. она оторвана от клиентской базы? Все данные надо заносить вручную?
3. logos 214 17.10.12 08:49 Сейчас в теме
(1) maxlenium, Это пример, шаблон. Я его выдернул из одного своего проекта, по сути база тут нужна, как хранилище точек с дополнительными характеристиками. В полной версии ещё были фильтры по областям, рисованным на карте, по дополнительным признакам, но это было уже достаточно тривиально, поэтому было обрезано. Обработка возможна и без привязки к БД, но в её рамках хотелось показать взаимодействие, как GUIDы объектов передаются туда-обратно на хтмл страницу и параллельно модификации карты меняются и объекты БД с ней связанные.
2. maxlenium 36 17.10.12 08:39 Сейчас в теме
Кстати, я бы сказал даже отличная разработка. Нужно просто разобраться с некоторыми кнопками. Фактически создание и корректировка объектов идет на карте.
4. CagoBHuK 33 17.10.12 10:58 Сейчас в теме
5. logos 214 17.10.12 11:08 Сейчас в теме
(4) CagoBHuK, Прям дежавю какое то. "Давно сделано" просит денег. Эта разработка - бесплатная.
6. logos 214 17.10.12 11:10 Сейчас в теме
(4) CagoBHuK, Хотя, Вас, как автора http://forum.infostart.ru/forum24/topic42266/ вполне можно понять. Своё детище нужно защищать и продвигать. :-)
7. akomar 458 20.10.12 20:39 Сейчас в теме
Поставил +. Очень хорошая бесплатная разработка.
SunShinne; +1 Ответить
8. logos 214 20.10.12 22:59 Сейчас в теме
9. Sergey Kamnev 22.10.12 10:04 Сейчас в теме
1. Есть ли кэширование?
2. Есть ли возможность работать офф-лайн (версия Яндекс.Карты под Android может быть скачена для оффлайн просмотра, правда, при этом не работает поиск)?
3. Почему Google Maps, а не Яндекс.Карты?
10. logos 214 22.10.12 10:22 Сейчас в теме
(9) Sergey Kamnev,
1. Сейчас работает сугубо интерактивно, вопрос кэширования не поднимался.
2. Соответственно, вопрос не поднимался.
3. АПИ у гугла приятнее документирован. Основной упор ставился именно на взаимодействие с сеансом 1С, у яндекса описание объектов событий, передаваемых в обработчик события я не нашёл, может плохо искал. За сим был избран гугл.
11. Sergey Kamnev 22.10.12 13:24 Сейчас в теме
logos, ясно, спасибо за ответ.

Программу взял на заметку. Спасибо за труд!
12. free-lancer-2018 206 21.02.13 16:09 Сейчас в теме
Отличная разработка.
Долго мучался с картами и проблемой отлавливания событий в 1С - сразу снялись все вопросы.
Спасибо автору :)
SunShinne; +1 Ответить
13. SunShinne 633 03.01.14 19:15 Сейчас в теме
Ставлю + безусловно. Однако у меня не работает - карты вообще не отображаются.
14. SunShinne 633 03.01.14 19:37 Сейчас в теме
может Гугл что-то поменял в кодах?
15. SunShinne 633 03.01.14 19:46 Сейчас в теме
при попытке поставить флаг "Ввод новых объектов" в карте объектов развития выводится следующая ошибка:
{Обработка.КартаСостоянийТК.Форма.Форма.Форма(56)}: Метод объекта не обнаружен (Eval)
Результат = Элемент.Документ.parentWindow.Eval(Код);
16. SunShinne 633 09.01.14 20:49 Сейчас в теме
Нашел ошибку в коде Java - Обработки.КартаСостоянияТК.Макеты.МакетГуглВерсия3Текст надо заменить в тексте map_canvas на map-canvas, после исправления все работает.
25. andrey235 2 17.11.19 11:15 Сейчас в теме
Карта вообще не отображается в 1С, хоть и учел изменения из (16). Автор писал, что учтет в публикации, но не сделал этого. Выгрузил итоговый скрипт в текстовый файл html, добавил свой google key в заголовок. После этого карта запускается из html в браузере, но никаких меток не выводит. В 1С всё равно не отображается. Помогите, пож., я пока совсем зелёный в этом.
26. logos 214 18.11.19 11:18 Сейчас в теме
(25) Это писалось в 2012 году, когда в платформу был встроен движок IE 9 (кажется), тогда это работало. Потом многое было переписано в угоду большей безопасности, современным браузерам. Некоторые наработки по использованию ПолеHTMLДокумента я публиковал в другой статье, про работу с большими данными. Оттуда можно взять "скелет" фрейма и в него уже положить страницу с гуглокартами. Подозреваю, что ещё и апи у гуглокарт могло с тех пор поменяться.
Вот ссылка на статью.
Постараюсь найти время и актуализировать эту статью под современные реалии.
17. SunShinne 633 09.01.14 20:54 Сейчас в теме
то же исправление требуется для ОбластиНаКарте.Макет
18. logos 214 13.01.14 10:05 Сейчас в теме
Действительно, поменял гугл. Раньше у них в апи было предопределено имя map_canvas, потом заменили подчеркивание на тире. Альтернативный вариант - можно вручную для map_canvas задавать его размеры, что создает лишние проблемы с ресайзом итп. Сам недавно случайно заметил этот нюанс, обновить публикацию забыл. Спасибо за комментарий.
19. JIeHIH 17.01.14 19:27 Сейчас в теме
Возможно не совсем в тему, но все же, столкнулся с проблемой.
Стоит цель не программно дописывать код скрипта по добавлению координат полигона, а через функцию скрипта передавать координаты. Как я понимаю это нужно делать в обработчике события ДокументСформирован, вот только почему то при попытке обратиться к объекту у которого есть метод по добавлению координат, возвращается ошибка мол нет такого объекта, если я выполняю перед этим инициализацию программно через 1с, то переменную видит.
И еще почему то событие ДокументСформирован срабатывает дважды.
21. logos 214 18.01.14 16:15 Сейчас в теме
(19) JIeHIH, Криво, но можно использовать глобальную переменную, которая хранит ссылку на полигон, вызывать методы, добавляющие точки в полигон через eval.
(20) kovaleks78, По списку адресов сложнее, нужно делать запросы к тому же гуглу или яндексу, чтоб получить координаты по адресу, а так не принципиально чем. У меня, например, выводится список точек на карте, правда не по адресам, а по координатам.
22. JIeHIH 20.01.14 10:39 Сейчас в теме
(21) Возможно я немного некорректно изложил проблему, в скрипте я завел глобальную переменную, которая является полигоном, код взял у гугла в примерах, там создается объект полигона у которого есть методы добавления координат, присвоение этого полигона переменной происходит в момент обновления страницы, так вот задача узнать когда это произойдет, когда отработает скрипт.
20. kovaleks78 4 17.01.14 22:14 Сейчас в теме
Есть задача вывести на карте района точки по списку адресов в 1С. Что посоветуете использовать для решения?
23. 7OH 70 22.11.17 16:18 Сейчас в теме
"Ваш браузер не поддерживается Google Maps JavaScript API. Выберите другой.Подробнее...Закрыть"
Что посоветуете делать?
24. Mellow 59 12.12.17 17:14 Сейчас в теме
(23) 1С использует стандартный com компонент webbrowser который предоставляет windows. По умолчанию для всех приложений эта компонента работает в режиме совместимости IE7. Для смены режима совместимости требуется добавить в реестр ключ с именем приложения и кодом уровня совместимости.

Подробнее здесь: https://weblog.west-wind.com/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version
Оставьте свое сообщение