Google maps + 1С с поиском адресов v 2.0

05.04.15

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

По мотивам действующих здесь публикаций на данную тему вывешиваю результат, отражающий карту и позволяющий ставить метки по адресам из таблицы
Код открытый.

V 2.0 добавлено:
Дополненный и улучшенный код поля HTML объекта 1С.
Данный код может использоваться для замены кода поля HTML документа обработки текущей публикации.

Скачать файлы

Наименование Файл Версия Размер
обработка
.epf 9,82Kb
164
.epf 9,82Kb 164 Скачать
HTML-пример
.html 12,26Kb
8
.html v 2 12,26Kb 8 Скачать

Google maps на управляемых формах. Позволяет отмечать на карте список адресов. Код открытый. Для любых конфигурация.

v 2.0:

Особенностью данного кода является формирование массива адресов в момент события поля HTML "ДокументСформирован" посредством выполнения команды: 

//Формирвоание массива объектов для добавления меток на карту
// AdressName - наименование адресного объекта
// TextHTML - HTML-описание объекта
// IconID - номер картинки метки
function putMarkerFromMassivStruktur(AdressName, TextHTML, IconID) {
     var ObjAdress = {
          AdressName: AdressName,
          TextHTML: TextHTML,
          IconID: IconID
     };
     adressObjectsArray.push(ObjAdress);
}

Отображение массива меток можно запустить командой:

//Вывод массива адресных объектов
function showAdressObjects() {
     for (var i = 0; i < adressObjectsArray.length; i++) {
          window.setTimeout(addMarkerForAddress(adressObjectsArray[i].AdressName, adressObjectsArray[i].TextHTML, adressObjectsArray[i].IconID, false), i * 1000);
     }
}

Здесь код "window.setTimeout(" выполняет запрос к API Google Maps с временной задержкой ( i * 1000) млСек. Это позволяет отобразить больше меток адресов при помощи бесплатного ключа. В некоторых случаях (при наличии платного ключа или отсутствия встроенной функции временной задержки в браузере или малого числа точек) рекомендуется заменить данную функцию на аналог без задержки:

//Вывод массива адресных объектов
function showAdressObjects() {
     for (var i = 0; i < adressObjectsArray.length; i++) {
          addMarkerForAddress(adressObjectsArray[i].AdressName, adressObjectsArray[i].TextHTML, adressObjectsArray[i].IconID, false);
     }
}

Также можно вывести отражение массива точек посредством команды, отображаемой в поле HTML документа. Для этого стоит дополнить тело HTML документа новой командой в группе команд "panel_findAdress". Например, так:

<div id="panel_findAdress">
     <input id="findAdress" type="textbox" value="Введите адрес..."/>
     <input type="button" value="Поиск" onclick="showFindAddress()"/>
     <input type="button" value="Все точки" onclick="showAdressObjects()"/>
     <input type="button" value="..." onclick="LetsRock_StopRock()"/>
</div>

Приятным дополнением является возможность отображения при клике на метке описания метки, поддерживающего формат HTML:

//Добавления описания HTML к метке
// marker - объект, представляющий собой метку
// TextHTML - HTML-описание метки
function bindInfoWindow(marker, TextHTML) {
     if (map != null) {
          var infoWindow = new google.maps.InfoWindow;
          google.maps.event.addListener(marker, 'click', function () {
               infoWindow.setContent(TextHTML);
               infoWindow.open(map, marker);
          });

     } else alert('Карта не инициализирована');
}

Код снабжен примерами дополнительного пользовательского интерактива: включение динамического движения установленных маркеров (LetsRock_StopRock()) и выбора картинки метки при установке на карту (getImageAdress(IconID))

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

//Удаление все установленных меток на карте и чистка массива маркеров
function clearMarkerOnMap() {
     if (markersArray) {
          for (i in markersArray) {
               markersArray[i].setMap(null);
          }
     markersArray.length = 0;
     }
}

Отказ от использования данной функции позволит добавлять метки на карту без очистки ранее установленных меток с карты.

Полный текст поля HTML документа можно скачать за стартмани или скопировать ниже безвозмездно:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
#panel_findAdress { position: absolute; top: 90%; left: 20%; padding: 5px; border: 1px solid #999}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">
</script>
<script type="text/javascript">
var map = null; //карта GoogleMaps
var markersArray = []; //массив установленных меток
var adressObjectsArray = []; //массив объектов для установки меток
////////////////////////////////////////////////////////////////////////////////////////////////
// ОСНОВНЫЕ ПРОЦЕДУРЫ И ФУНКЦИИ

//Инициализация карты и отображение карты на форме
// latitude - широта
// longitude - долгота
// showErrorWindow - признак отображения сообщение о заполнении центра карты по умолчанию
function showGoogleMap(latitude, longitude, showErrorWindow) {
var latlng = new google.maps.LatLng(latitude, longitude);
//Параметр начального представления карты
var myOptions = {
zoom: 8, //масштаб
center: latlng, //центр
mapTypeId: google.maps.MapTypeId.ROADMAP //тип карты
};
//Отображение карты на форме 
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//Сообщение пользователю о показе центра по-умолчанию
if (showErrorWindow) {
var infowindow = new google.maps.InfoWindow({
map: map,
position: latlng,
content: 'Ошибка инициализации центра карты. Центр карты установлен по умолчанию.'
});

}

//Определение центрального местоположения отображения карты
function initialize() {
//1. Определяем координаты по местоположению домена
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(location_found, location_NO_found);
} else location_NO_found; //2. Определяем координаты по представлению адреса
}

////////////////////////////////////////////////////////////////////////////////////////////////
// КОМАНДЫ ФОРМЫ

//Поиск адреса по представлению и сдвиг карты в центр поиска при удачном результате
function showFindAddress() {
clearMarkerOnMap();
var findAdress = document.getElementById('findAdress').value;
addMarkerForAddress(findAdress, findAdress, 3, true);
}

//Все маркеры начинают двигаться
function LetsRock_StopRock() {
if (markersArray) {
for (i in markersArray) {
if (markersArray[i].getAnimation() != null) {
markersArray[i].setAnimation(null);
} else {
markersArray[i].setAnimation(google.maps.Animation.BOUNCE);
};
}
}
}

//Вывод массива адресных объектов
function showAdressObjects() {
for (var i = 0; i < adressObjectsArray.length; i++) {
window.setTimeout(addMarkerForAddress(adressObjectsArray[i].AdressName, adressObjectsArray[i].TextHTML, adressObjectsArray[i].IconID, false), i * 1000);
}
}

////////////////////////////////////////////////////////////////////////////////////////////////
// ВСПОМОГАТЕЛЬНЫЕ ПРОЦЕДУРЫ И ФУНКЦИИ

//Установка метки по координатам
// latitude - широта
// longitude - долгота 
// LocationName - наименование метки 
// TextHTML - HTML-описание метки
// IconID - номер картинки метки
// SetCenter - признак смены центра карты
function addMarkerForLocation(latitude, longitude, LocationName, TextHTML, IconID, SetCenter) {
if ((latitude != null) && (longitude != null)) {
var IconAdress = getImageAdress(IconID);
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(latitude, longitude),
title: LocationName,
animation: google.maps.Animation.DROP,
icon: IconAdress
});
bindInfoWindow(marker, TextHTML);
markersArray.push(marker);
if (SetCenter) { map.setCenter(results[0].geometry.location, 5) };
} else alert('Координаты не определены');
}

//Установка метки по представлению адреса
// AdressName - наименование адресного объекта
// TextHTML - HTML-описание метки
// IconID - номер картинки метки
// SetCenter - признак смены центра карты
function addMarkerForAddress(AdressName, TextHTML, IconID, SetCenter){
getLocation(AdressName, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latitude = results[0].geometry.location.lat();
longitude = results[0].geometry.location.lng();
addMarkerForLocation(latitude, longitude, AdressName, TextHTML, IconID, SetCenter); 
} else alert('Адрес не был определен: ' + status);
});
}

//Получение координат по наименованию адреса
// address - строка адреса, к примеру 'Самара, Кутякова'
// checkResult - функция для обработки результата запроса
function getLocation(address, checkResult) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: address }, checkResult);
}

//Отображение центра карты по геолокации из браузера
function location_found(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
showGoogleMap(latitude, longitude, false);
}

//Отображение геолокации по представлению адреса
function location_NO_found() {
getLocation('Самара', function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latitude = results[0].geometry.location.lat();
longitude = results[0].geometry.location.lng();
showGoogleMap(latitude, longitude, false);
} else showGoogleMap(55.755826, 37.6173, true); //координаты центра по умолчанию (Москва)
});
}

//Выбор картинки метки
// IconID - номер картинки метки
function getImageAdress(IconID) {
IconAdress = ''; //стандартная метка
if (IconID == 1) { IconAdress = 'http://google-maps-icons.googlecode.com/files/factory.png' }; //синяя фабрика
if (IconID == 2) { IconAdress = 'http://google-maps-icons.googlecode.com/files/firstaid.png' }; //красная первая помощь
if (IconID == 3) { IconAdress = 'http://google-maps-icons.googlecode.com/files/dentist.png' }; //красная стоматология
if (IconID == 4) { IconAdress = 'http://google-maps-icons.googlecode.com/files/doctor.png' }; //красная министерство
if (IconID == 5) { IconAdress = 'http://google-maps-icons.googlecode.com/files/drugs.png' }; //красная аптека
if (IconID == 99) { IconAdress = 'http://mindmix.ru/i/smiles/devil.png' }; //метка дьявола
return IconAdress;
}

//Добавления описания HTML к метке
// marker - объект, представляющий собой метку
// TextHTML - HTML-описание метки
function bindInfoWindow(marker, TextHTML) {
if (map != null) {
var infoWindow = new google.maps.InfoWindow;
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(TextHTML);
infoWindow.open(map, marker);
});

} else alert('Карта не инициализирована');
}

//Удаление все установленных меток на карте и чистка массива маркеров
function clearMarkerOnMap() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}

//Формирвоание массива объектов для добавления меток на карту
// AdressName - наименование адресного объекта
// TextHTML - HTML-описание объекта
// IconID - номер картинки метки
function putMarkerFromMassivStruktur(AdressName, TextHTML, IconID) {
var ObjAdress = {
AdressName: AdressName,
TextHTML: TextHTML,
IconID: IconID
};
adressObjectsArray.push(ObjAdress);
}

//Очистка массива объектов адресов
function clearAdressObjectsArray() {
clearMarkerOnMap();
if (adressObjectsArray) {
adressObjectsArray.length = 0;
};
}

</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
<div id="panel_findAdress">
<input id="findAdress" type="textbox" value="Введите адрес..."/>
<input type="button" value="Поиск">
<input type="button" value="Все точки">
<input type="button" value="...">
</div>
</body>
</html>

Google api googl maps геолокация

См. также

Интеграция Альфа Авто 5 / Альфа Авто 6 и AUTOCRM / Инфотек

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

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

36000 руб.

03.08.2020    15746    10    17    

11

Интеграция 1С — Битрикс24. Обмен задачами

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

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

5040 руб.

04.05.2021    17548    6    15    

13

Интеграция с сервисом vetmanager

WEB-интеграция Платформа 1С v8.3 Бухгалтерский учет 1С:Бухгалтерия 3.0 Бытовые услуги, сервис Платные (руб)

Внешняя обработка разрабатывалась для загрузки документов из Ветменеджер в 1С: Бухгалтерия 3.0

12000 руб.

02.02.2021    16359    42    49    

23

[Расширение] БОР-Навигатор.Культура

Зарплата Бюджетный учет WEB-интеграция Обмен с ГосИС Платформа 1С v8.3 Сложные периодические расчеты 1С:Зарплата и кадры государственного учреждения 3 Государственные, бюджетные структуры Россия Бюджетный учет Платные (руб)

Расширение конфигурации, включающее в себя объекты, необходимые для подготовки и сдачи отчета "Штатная численность" системы "БОР-Навигатор.Культура" в программе "1С:Зарплата и кадры государственного учреждения", редакция 3.1.

8400 руб.

01.02.2019    25741    9    0    

7

Заполнение по ИНН или наименованию реквизитов контрагента по данным сайта ФНС

Обмен с ГосИС WEB-интеграция Платформа 1С v8.3 Управляемые формы 1С:Комплексная автоматизация 1.х 1С:Бухгалтерия 2.0 1С:Управление торговлей 10 1С:Управление производственным предприятием 1С:Управление нашей фирмой 1.6 1С:Бухгалтерия государственного учреждения 1С:Документооборот 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Платные (руб)

Обработка является альтернативой механизму, разработанному фирмой 1С и заполняющему реквизиты контрагента по ИНН или наименованию. Не требуется действующей подписки ИТС. Вызывается как внешняя дополнительная обработка, т.е. используется, непосредственно, из карточки контрагента. Заполнение по ИНН или наименованию реквизитов контрагента по данным сайта ФНС (egrul.nalog.ru) для БП 2.0, БП 3.0, БГУ 1.0, БГУ 2.0, УТ 10.3, УТ 11.x, КА 1.1, КА 2.x, УПП 1.x, ERP 2.x, УНФ 1.5, УНФ 1.6, УНФ 3.0, ДО 2.1

2400 руб.

28.04.2016    88579    160    215    

318
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. maxlenium 36 26.07.12 18:29 Сейчас в теме
А в чем отличие от других публикаций?
4. dour-dead 271 27.09.12 10:41 Сейчас в теме
(1) maxlenium,
Код открытый. Для любых конфигурация.
3. krund 30.07.12 13:50 Сейчас в теме
Прикольно. Автор молодец.
5. dryms 249 01.11.12 18:32 Сейчас в теме
Оставьте свое сообщение