Автоматизация вывода виджета Яндекс.Карты на платформе 1C Bitrix

в 10:21, , рубрики: 1С-Битрикс, bitrix, php, Яндекс API, яндекс.карты

Автоматизация вывода виджета Яндекс.Карты на платформе 1C Bitrix - 1С недавних пор, не по собственной воле, пришлось использовать 1С Битрикс. Не скажу, что получил эстетическое удовольствие от работы с системой, однако ожидал худшего. Итак, проблемы:

  • на странице >200 блоков, каждый из которых содержит информацию о местоположении и виджет bitrix:map.yandex.view. В результате, когда пользователь пытается открыть страницу — процесс браузера съедает все что видит;
  • исходный код страницы — это >6000 строк html текста с элементами php для вывода виджета карт;
  • никакой БД нет. Редактирование этой страницы производилось только руками;
  • местоположение было дано только в виде почтового адреса, от чего добавление карты происходило руками в визуальном редакторе;


После очередного редактирования этой страницы (изменение информации и добавление новых местоположений) мне показалось, что такой подход не совсем логичен и следовало бы оптимизировать этот процесс.

Поставленная цель была такова: автоматизировать процесс вывода виджета карт. Для реализации были поставлены следующие задачи:

  • спроектировать и создать базу данных с исчерпывающей информацией о местоположениях;
  • автоматизировать процесс определения местоположения для виджета;
  • сократить потребление ресурсов браузера клиента;

Таблица с информацией для виджета получилась следующая:

Поле Тип данных
ID int
Наименование varchar(30)
Адрес text
yandex_lat varchar(20)
yandex_lon varchar(20)
LAT varchar(20)
LON varchar(20)

Определение местоположения было отдано геокодеру яндекса. Не сразу бало понятно, каким образом формируются координаты для виджета. Оказалось, что координаты получаются из верхней границы области, внутри которой объект рекомендуется показать на карте и позицией объекта. Разобравшись, был собран следующий скрипт:

<?php
//функция получения XML массива с наиденной информацией по заданному метоположению
function get_XML($adress){
	$xml = simplexml_load_file('https://geocode-maps.yandex.ru/1.x/?geocode='.$adress);
	return $xml;
}
//задаем метоположение
$adr = 'с. Барда, ул. Ленина, д. 52г ';
$name_adr = 'Филиал';

$urlXML = 'https://geocode-maps.yandex.ru/1.x/?geocode='.$adr;
//получаем XML массив
$array = get_XML($adr); 
//Координаты центра объекта
$pos = $array->GeoObjectCollection->featureMember['0']->GeoObject->Point->pos;
echo "<b>pos</b>: $pos n";
//Верхняя граница области, внутри которой объект рекомендуется показать на карте
$upperCorner = $array->GeoObjectCollection->featureMember['0']->GeoObject->boundedBy->Envelope->upperCorner;
echo "<b>upperCorner</b>: $upperCorner n";
//Нижняя граница области, внутри которой объект рекомендуется показать на карте
$lowerCorner = $array->GeoObjectCollection->featureMember['0']->GeoObject->boundedBy->Envelope->lowerCorner;
echo "<b>lowerCorner</b>: $lowerCorner n";
// Разделение строки на массив функцией explode
$posArr = explode(" ",$pos);
$posLeft = explode(".",$posArr[0]);
$posRight = explode(".",$posArr[1]);
$upperCornerArr = explode(" ",$upperCorner);
$upperCornerLeft = explode(".",$upperCornerArr[0]);
$upperCornerRight = explode(".",$upperCornerArr[1]);
$lowerCornerArr = explode(" ",$lowerCorner);
$lowerCornerLeft = explode(".",$lowerCornerArr[0]);
$lowerCornerRight = explode(".",$lowerCornerArr[1]);
$urlMap = "https://maps.yandex.ru/?text=".$posRight[0].'.'.$posRight[1].$upperCornerRight[0].$upperCornerRight[1].' '.$posLeft[0].'.'.$posLeft[1].$upperCornerLeft[0].$upperCornerLeft[1];

/*
LAT - RIGHT
LON - LEFT
*/
$yandex_lat = $posRight[0].'.'.$posRight[1].$upperCornerRight[0].$upperCornerRight[1];
$yandex_lon = $posLeft[0].'.'.$posLeft[1].$upperCornerLeft[0].$upperCornerLeft[1];
$LON = $posLeft[0].'.'.$posLeft[1].$lowerCornerLeft[0].$lowerCornerLeft[1];
$LAT = $posRight[0].'.'.$posRight[1].$lowerCornerRight[0].$lowerCornerRight[1];
$TEXT = $name_adr;
?>

Этот же скрипт на JS

После получения координат данные записываются в базу. Таким образом, 2 задачи решены.

И в завершении, для экономии потребляемых ресурсов пользователя, использовался slideToggle:

<script type="text/javascript">
        function slideTopic(comments,titleTopic) {
          $(comments).slideToggle(250);
          if ($(titleTopic).attr('title')=='Скрыть полную информацию')
            $(titleTopic).attr('title','Показать полную информацию');
          else
            $(titleTopic).attr('title','Скрыть полную информацию');
        };
     </script>

Автор: mrjunk

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js