0

Всем привет. Про API яндекс карт узнал на прошлой неделе после того как встала определенная задача, нужно было вывести на карту N-количество полигонов, но что бы координаты этих полигонов задавались не в ручную, а брались из свойств инфоблоков Битрикса. С этим как то справился, вот код того что получилось:

<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();

use \Bitrix\Main\Localization\Loc;
 {  
    ?>
    <script src="https://api-maps.yandex.ru/2.1?apikey=(Тут был мой ключ)&lang=ru_RU"
        type="text/javascript"></script>

    <script type="text/javascript">

        ymaps.ready(function () {

            // Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
            var myMap = new ymaps.Map('map',
                {
                    center: [48.48, 135.08],
                    zoom: 14,
                    controls: ['zoomControl', 'typeSelector',  'fullscreenControl'] // "Элементы управления (Зум, слои, фулскрин)
                    
                })


            <?foreach ($arResult as $item) { if (!empty($item["PREVIEW_PICTURE"])) {           
              
            ?>

            <? if($counter_i == count($arResult)) { echo ";"; } else { echo ","; $counter_i++;} ?>

            <?

            } else {
             //Цвет заливки
            if(!empty($item['PROPERTY_COLORIMGPLACE_VALUE'])) {
                $iconColor = $item['PROPERTY_COLORIMGPLACE_VALUE'];
            } else {
                $iconColor = '65dbc653'; //Если цвет не задан, то будет этот.
            }  
            //Цвет обводки
            if(!empty($item['PROPERTY_COLORSTROKE_VALUE'])) {
                $strokeColor = $item['PROPERTY_COLORSTROKE_VALUE'];
            } else {
                $strokeColor = '1102b8e2'; //Если цвет не задан, то будет этот.
            }

            $body = ''; 

            ?>
            // Построение полигона
            Polygon<?=$item['ID']?> = new ymaps.Polygon(                 
                
                [[<?=$item['PROPERTY_MESTO_VALUE']?>]], // Получение координат
                
                {
                // Содержимое балуна    
                balloonContentHeader: '<a href="https:ссылка/"><?=$item['NAME']?></a>', // Заголовок 
                balloonContent: '<b>Куратор: </b>' + '<?=$item['PROPERTY_BALOON_VALUE']["TEXT"]?><br/>' + '<b>Адрес: </b>' + '<?=$item['PROPERTY_ADRESS_VALUE']?><br/>' + '<b>Район: </b>' + '<?=$item['PROPERTY_RAION_VALUE']?><br/>'  + '<b>Дата создания: </b>' + '<?=$item['PROPERTY_DATE_CREATE_VALUE']?><br/>', // Содержимое
                balloonContentFooter: 'Телефон: </b>' + '<?=$item['PROPERTY_CONTACTS_VALUE']["TEXT"]?>', // Футер
                clusterCaption: "<?=$item['PROPERTY_RAION_VALUE']?>", // Кластер объекта
                hintContent: "<?=$item['NAME']?>" // Подсказка объекта

            }, {
                
                fillColor: '<?=$iconColor?>', // Цвет заливки
                fillOpacity: 0.45, // Прозрачность заливки
                strokeColor: '<?=$strokeColor?>', // Цвет обводки
                strokeWidth: 2, // Толщина обводки
                strokeOpacity: 0.5 // Прозрачность обводки
            })<? if($counter_i == count($arResult)) { echo ";"; } else { echo ","; $counter_i++;} ?>


            <? } //endif?>

            <? } //endforeach?>

            <?
            foreach ($arResult as $item) {
                echo "myMap.geoObjects.add(Polygon".$item['ID'].");";  // Добавлени полигонов на карту
            }
            ?>

        });

    </script>

    <div id="map" style="width: <?= $arParams['mapWidht'] ?>; height: <?= $arParams['mapHeight'] ?>"></div>

    <?
}
?>

Все отлично работает, полигоны появляются их описание тоже.

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

Мне такой способ совсем не подходит ибо добавление объектов должно происходить разными людьми и периодически карта будет изменятся.

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

Вот код того что получилось:

<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();

use \Bitrix\Main\Localization\Loc;
 {  
    ?>
    <script src="https://api-maps.yandex.ru/2.1?apikey=(Тут был мой ключ)&lang=ru_RU"
        type="text/javascript">
    </script>

    <script type="text/javascript">

        ymaps.ready(function () {

            // Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
            var myMap = new ymaps.Map('map',
                {
                    center: [48.48, 135.08],
                    zoom: 13,
                    controls: ['zoomControl', 'typeSelector',  'fullscreenControl'] // "Элементы управления (Зум, слои, фулскрин)
                    
                });

        // Функция, которая по состоянию чекбоксов в меню показывает или скрывает геообъекты из выборки.
        function checkState () {
            var shownObjects,
                byСluster = new ymaps.GeoQueryResult();
                        
            // Отберем объекты по форме.
            if ($('#Железнодорожный').prop('checked')) {
                byСluster = myObjects.search('clusterCaption = "Железнодорожный"');
            }
            if ($('#Индустриальный').prop('checked')) {
                byСluster = myObjects.search('clusterCaption = "Индустриальный"').add(byСluster);
            }
            if ($('#Кировский').prop('checked')) {
                byСluster = myObjects.search('clusterCaption = "Кировский"').add(byСluster);
            }
            
            // Мы отобрали объекты по цвету и по форме. Покажем на карте объекты которые совмещают нужные признаки.
            shownObjects = byСluster.addToMap(myMap);
            // Объекты, которые не попали в выборку, нужно убрать с карты.
            myObjects.remove(shownObjects).removeFromMap(myMap);
        }
        
        $('#Железнодорожный').click(checkState);
        $('#Индустриальный').click(checkState);
        $('#Кировский').click(checkState);  

                    
            <?foreach ($arResult as $item) { if (!empty($item["PREVIEW_PICTURE"])) {           
              
            ?>

            <? if($counter_i == count($arResult)) { echo ";"; } else { echo ","; $counter_i++;} ?>

            <?

            } else {
             //Цвет заливки
            if(!empty($item['PROPERTY_COLORIMGPLACE_VALUE'])) {
                $iconColor = $item['PROPERTY_COLORIMGPLACE_VALUE'];
            } else {
                $iconColor = '65dbc653'; //Если цвет не задан, то будет этот.
            }  
            //Цвет обводки
            if(!empty($item['PROPERTY_COLORSTROKE_VALUE'])) {
                $strokeColor = $item['PROPERTY_COLORSTROKE_VALUE'];
            } else {
                $strokeColor = '1102b8e2'; //Если цвет не задан, то будет этот.
            }

            $body = ''; 

            ?>
            // Построение полигона
            Polygon<?=$item['ID']?> = new ymaps.Polygon(                 
                
                [[<?=$item['PROPERTY_MESTO_VALUE']?>]], // Получение координат
                
                {
                // Содержимое балуна    
                balloonContentHeader: '<a href="https:ссылка"><?=$item['NAME']?></a>', // Заголовок 
                balloonContent: '<b>Куратор: </b>' + '<?=$item['PROPERTY_BALOON_VALUE']["TEXT"]?><br/>' + '<b>Адрес: </b>' + '<?=$item['PROPERTY_ADRESS_VALUE']?><br/>' + '<b>Район: </b>' + '<?=$item['PROPERTY_RAION_VALUE']?><br/>'  + '<b>Дата создания: </b>' + '<?=$item['PROPERTY_DATE_CREATE_VALUE']?><br/>', // Содержимое
                balloonContentFooter: 'Телефон: </b>' + '<?=$item['PROPERTY_CONTACTS_VALUE']["TEXT"]?>', // Футер
                clusterCaption: "<?=$item['PROPERTY_RAION_VALUE']?>", // Кластер объекта
                hintContent: "<?=$item['NAME']?>" // Подсказка объекта

            }, {
                
                fillColor: '<?=$iconColor?>', // Цвет заливки
                fillOpacity: 0.45, // Прозрачность заливки
                strokeColor: '<?=$strokeColor?>', // Цвет обводки
                strokeWidth: 2, // Толщина обводки
                strokeOpacity: 0.5 // Прозрачность обводки
            })<? if($counter_i == count($arResult)) { echo ";"; } else { echo ","; $counter_i++;} ?>


            <? } //endif?>

            <? } //endforeach?>

            <?
            foreach ($arResult as $item) {
                echo "myMap.geoObjects.add(Polygon".$item['ID'].");";  // Добавлени полигонов на карту
            }
            ?>           

        })

    </script>

    <div id="map" style="width: <?= $arParams['mapWidht'] ?>; height: <?= $arParams['mapHeight'] ?>"></div>

    <?
}
?>

Но вот почему то ничего фильтровать у меня не хочет. То -ли как говорится я дурак, то-ли лыжи не едут. Подскажите в какую сторону вообще копать то? Вот ссылка на пример из песочницы яндекса

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

Дополняю сообщение примером работы скрипта, это первый вариант кода, который я описал в начале сообщения:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Многоугольник</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=3261ce08-c60a-4114-96f8-ce820abf124a" type="text/javascript"></script>

  <script type="text/javascript">
    ymaps.ready(function() {

      // Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
      var myMap = new ymaps.Map('map', {
          center: [48.48, 135.08],
          zoom: 12,
          controls: ['zoomControl', 'typeSelector', 'fullscreenControl'] // "Элементы управления (Зум, слои, фулскрин)

        }),
        objectManager = new ymaps.ObjectManager({
          // Кластеризация меток
          clusterize: true
        });
      myMap.geoObjects.add(objectManager);


      // Создание списка районов (фильтров).
      var listBoxItems = ['Железнодорожный', 'Индустриальный', 'Кировский', 'Краснафлотский', 'Центральный']
        .map(function(title) {
          return new ymaps.control.ListBoxItem({
            data: {
              content: title
            },
            state: {
              selected: true
            }
          })
        }),
        reducer = function(filters, filter) {
          filters[filter.data.get('content')] = filter.isSelected();
          return filters;
        },


        // Теперь создадим список из 5 пунктов "районов".
        listBoxControl = new ymaps.control.ListBox({
          data: {
            content: 'Районы',
            title: 'Фильтр по районам'
          },
          items: listBoxItems,
          state: {

            expanded: false, // Список по умолчанию свёрнутый
            filters: listBoxItems.reduce(reducer, {})
          }
        });
      myMap.controls.add(listBoxControl);

      // Добавим отслеживание изменения признака, выбран ли пункт списка.
      listBoxControl.events.add(['select', 'deselect'], function(e) {
        var listBoxItem = e.get('target');
        var filters = ymaps.util.extend({}, listBoxControl.state.get('filters'));
        filters[listBoxItem.data.get('content')] = listBoxItem.isSelected();
        listBoxControl.state.set('filters', filters);
      });
      // Отслеживание изменений в элементе управления.список.государственное поле.
      var filterMonitor = new ymaps.Monitor(listBoxControl.state);


      filterMonitor.add('filters', function(filters) {
        // Применим фильтр.
        objectManager.setFilter(getFilterFunction(filters));
      });

      function getFilterFunction(categories) {
        return function(obj) {
          var content = obj.properties.balloonContent;
          return categories[content]
        }
      }

      $.ajax({
        url: "data.json"
      }).done(function(data) {
        objectManager.add(data);
      });

      // Построение полигона
      Polygon106497 = new ymaps.Polygon(

          [
            [
              [48.4872099152, 135.044750889],
              [48.4865858624, 135.045233687],
              [48.4863005786, 135.044150075],
              [48.4869567290, 135.043726286],
              [48.4872099152, 135.044750889]
            ]
          ], // Получение координат

          {
            // Содержимое балуна    
            balloonContentHeader: '<a href="https://ссылка/">ТОС &quot;Виктория&quot;</a>', // Заголовок 
            balloonContent: '<b>Куратор: </b>' + 'Имя<br/>' + '<b>Адрес: </b>' + 'адрес<br/>' + '<b>Район: </b>' + 'Кировский<br/>' + '<b>Дата создания: </b>' + '10.02.2020<br/>', // Содержимое
            balloonContentFooter: 'Телефон: </b>' + 'цифры', // Футер
            clusterCaption: "Кировский", // Кластер объекта
            hintContent: "ТОС &quot;Виктория&quot;" // Подсказка объекта

          }, {

            fillColor: 'ff0000', // Цвет заливки
            fillOpacity: 0.45, // Прозрачность заливки
            strokeColor: '020202', // Цвет обводки
            strokeWidth: 2, // Толщина обводки
            strokeOpacity: 0.5 // Прозрачность обводки
          }),


        // Построение полигона
        Polygon106500 = new ymaps.Polygon(

          [
            [
              [48.5206, 135.107],
              [48.5215, 135.108],
              [48.5217, 135.107],
              [48.5217, 135.107],
              [48.5212, 135.106],
              [48.5206, 135.107]
            ]
          ], // Получение координат

          {
            // Содержимое балуна    
            balloonContentHeader: '<a href="https://ссылка/">ТОС &quot;Максимум Света&quot;</a>', // Заголовок 
            balloonContent: '<b>Куратор: </b>' + 'имя<br/>' + '<b>Адрес: </b>' + 'пер. Краснодарский, дом 19а<br/>' + '<b>Район: </b>' + 'Железнодорожный<br/>' + '<b>Дата создания: </b>' + '11.02.2020<br/>', // Содержимое
            balloonContentFooter: 'Телефон: </b>' + 'цифры', // Футер
            clusterCaption: "Железнодорожный", // Кластер объекта
            hintContent: "ТОС &quot;Максимум Света&quot;" // Подсказка объекта

          }, {

            fillColor: '4cd46365', // Цвет заливки
            fillOpacity: 0.45, // Прозрачность заливки
            strokeColor: '525252c3', // Цвет обводки
            strokeWidth: 2, // Толщина обводки
            strokeOpacity: 0.5 // Прозрачность обводки
          }),


        // Построение полигона
        Polygon121371 = new ymaps.Polygon(

          [
            [
              [48.4751158751, 135.061937151],
              [48.4765480869, 135.064731156],
              [48.4703986385, 135.073185479],
              [48.4690278941, 135.070227689],
              [48.4751158751, 135.061937151]
            ]
          ], // Получение координат

          {
            // Содержимое балуна    
            balloonContentHeader: '<a href="https://ссылка">ТОС &quot;Камская 6&quot;</a>', // Заголовок 
            balloonContent: '<b>Куратор: </b>' + '<br/>' + '<b>Адрес: </b>' + 'ул. Камская, дом 6<br/>' + '<b>Район: </b>' + '<br/>' + '<b>Дата создания: </b>' + '13.02.2020<br/>', // Содержимое
            balloonContentFooter: 'Телефон: </b>' + '', // Футер
            clusterCaption: "Южный", // Кластер объекта
            hintContent: "ТОС &quot;Камская 6&quot;" // Подсказка объекта

          }, {

            fillColor: '99fc99', // Цвет заливки
            fillOpacity: 0.45, // Прозрачность заливки
            strokeColor: 'ff007f', // Цвет обводки
            strokeWidth: 2, // Толщина обводки
            strokeOpacity: 0.5 // Прозрачность обводки
          }),



        myMap.geoObjects.add(Polygon106497);
      myMap.geoObjects.add(Polygon106500);
      myMap.geoObjects.add(Polygon121371);
    });
  </script>
  <style>
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
</body>

</html>

В данном примере я так понимаю ничего не работает изза этого куска кода:

 $.ajax({
        url: "data.json"
      }).done(function(data) {
        objectManager.add(data);
      });

Если я правильно понимаю то тут подключается база "data.json" но у меня получение координат построено подругому.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Многоугольник</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=3261ce08-c60a-4114-96f8-ce820abf124a" type="text/javascript"></script>

  <script type="text/javascript">
    ymaps.ready(function() {

      // Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
      var myMap = new ymaps.Map('map', {
        center: [48.48, 135.08],
        zoom: 12,
        controls: ['zoomControl', 'typeSelector', 'fullscreenControl'] // "Элементы управления (Зум, слои, фулскрин)

      });

      // Функция, которая по состоянию чекбоксов в меню показывает или скрывает геообъекты из выборки.
      function checkState() {
        var shownObjects,
          byСluster = new ymaps.GeoQueryResult();

        // Отберем объекты по кластеру.
        if ($('#jdr').prop('checked')) {
          byСluster = geoObjects.search('clusterCaption = "Железнодорожный"');
        }
        if ($('#industr').prop('checked')) {
          byСluster = geoObjects.search('clusterCaption = "Индустриальный"').add(byСluster);
        }
        if ($('#kirov').prop('checked')) {
          byСluster = geoObjects.search('clusterCaption = "Кировский"').add(byСluster);
        }

        // Мы отобрали объекты по кластеру. Покажем на карте объекты которые совмещают нужные признаки.
        shownObjects = byСluster.addToMap(myMap);
        // Объекты, которые не попали в выборку, нужно убрать с карты.
        geoObjects.remove(shownObjects).removeFromMap(myMap);
      }

      $('#jdr').click(checkState);
      $('#industr').click(checkState);
      $('#kirov').click(checkState);



      // Построение полигона
      Polygon106497 = new ymaps.Polygon(
          [
            [
              [48.4872099152, 135.044750889],
              [48.4865858624, 135.045233687],
              [48.4863005786, 135.044150075],
              [48.4869567290, 135.043726286],
              [48.4872099152, 135.044750889]
            ]
          ], // Получение координат

          {
            // Содержимое балуна    
            balloonContentHeader: '<a href="https://ссылка/">ТОС &quot;Виктория&quot;</a>', // Заголовок 
            balloonContent: '<b>Куратор: </b>' + 'Имя<br/>' + '<b>Адрес: </b>' + 'адрес<br/>' + '<b>Район: </b>' + 'Кировский<br/>' + '<b>Дата создания: </b>' + '10.02.2020<br/>', // Содержимое
            balloonContentFooter: 'Телефон: </b>' + 'цифры', // Футер
            clusterCaption: "Кировский", // Кластер объекта
            hintContent: "ТОС &quot;Виктория&quot;" // Подсказка объекта

          }, {

            fillColor: 'ff0000', // Цвет заливки
            fillOpacity: 0.45, // Прозрачность заливки
            strokeColor: '020202', // Цвет обводки
            strokeWidth: 2, // Толщина обводки
            strokeOpacity: 0.5 // Прозрачность обводки
          }),


        // Построение полигона
        Polygon106500 = new ymaps.Polygon(

          [
            [
              [48.5206, 135.107],
              [48.5215, 135.108],
              [48.5217, 135.107],
              [48.5217, 135.107],
              [48.5212, 135.106],
              [48.5206, 135.107]
            ]
          ], // Получение координат

          {
            // Содержимое балуна    
            balloonContentHeader: '<a href="https://ссылка/">ТОС &quot;Максимум Света&quot;</a>', // Заголовок 
            balloonContent: '<b>Куратор: </b>' + 'имя<br/>' + '<b>Адрес: </b>' + 'пер. Краснодарский, дом 19а<br/>' + '<b>Район: </b>' + 'Железнодорожный<br/>' + '<b>Дата создания: </b>' + '11.02.2020<br/>', // Содержимое
            balloonContentFooter: 'Телефон: </b>' + 'цифры', // Футер
            clusterCaption: "Железнодорожный", // Кластер объекта
            hintContent: "ТОС &quot;Максимум Света&quot;" // Подсказка объекта

          }, {

            fillColor: '4cd46365', // Цвет заливки
            fillOpacity: 0.45, // Прозрачность заливки
            strokeColor: '525252c3', // Цвет обводки
            strokeWidth: 2, // Толщина обводки
            strokeOpacity: 0.5 // Прозрачность обводки
          }),


        // Построение полигона
        Polygon121371 = new ymaps.Polygon(

          [
            [
              [48.4751158751, 135.061937151],
              [48.4765480869, 135.064731156],
              [48.4703986385, 135.073185479],
              [48.4690278941, 135.070227689],
              [48.4751158751, 135.061937151]
            ]
          ], // Получение координат

          {
            // Содержимое балуна    
            balloonContentHeader: '<a href="https://ссылка">ТОС &quot;Камская 6&quot;</a>', // Заголовок 
            balloonContent: '<b>Куратор: </b>' + '<br/>' + '<b>Адрес: </b>' + 'ул. Камская, дом 6<br/>' + '<b>Район: </b>' + '<br/>' + '<b>Дата создания: </b>' + '13.02.2020<br/>', // Содержимое
            balloonContentFooter: 'Телефон: </b>' + '', // Футер
            clusterCaption: "Южный", // Кластер объекта
            hintContent: "ТОС &quot;Камская 6&quot;" // Подсказка объекта

          }, {

            fillColor: '99fc99', // Цвет заливки
            fillOpacity: 0.45, // Прозрачность заливки
            strokeColor: 'ff007f', // Цвет обводки
            strokeWidth: 2, // Толщина обводки
            strokeOpacity: 0.5 // Прозрачность обводки
          }),



      myMap.geoObjects.add(Polygon106497);
      myMap.geoObjects.add(Polygon106500);
      myMap.geoObjects.add(Polygon121371);
    });
  </script>
  <style>
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <div style="padding: 5px;">

    <div>
      Фильтр по Районам <br>
      <input type='checkbox' id='jdr' checked=true>Железнодорожный</input><br>
      <input type='checkbox' id='industr' checked=true>Индустриальный</input><br>
      <input type='checkbox' id='kirov' checked=true>Кировский</input>
    </div>
  </div>
</body>

</html>

3
  • Описание большое и вроде как подробное, но можете минимальный собранный пример представить, чтобы мы наглядно могли "пощупать", где фильтрация срывается? Собирать на базе вашего собственные примеры для отладки - не самое продуктивное занятие.
    – YaCor'
    22 мар 2022 в 10:38
  • Попробую, я сперва и хотел собранный код предоставить, но меня затормозило только то что переменные из Битрикса получает скрипт. Думаю если вставить значения в ручную должно то получится. Всмысле получится пример, а не фильтрация
    – Егор
    22 мар 2022 в 10:43
  • Коды добавил, но почему то во втором варианте чекбоксы видны только если развернуть фрагмент и выполнить код, они под картой появляются
    – Егор
    22 мар 2022 в 23:20

1 ответ 1

0

Ну по прошествию чуть больше недели я все же победил этот код, фильтрация работает исправно)))

Вот что в итоге получилось:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Многоугольник</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=3261ce08-c60a-4114-96f8-ce820abf124a" type="text/javascript"></script>

  <script type="text/javascript">
    ymaps.ready(init);

    function init() {

      // Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
      var myMap = new ymaps.Map('map', {
        center: [48.48, 135.08],
        zoom: 12,
        controls: ['zoomControl', 'typeSelector', 'fullscreenControl'] // "Элементы управления (Зум, слои, фулскрин)

      }, {
        searchControlProvider: 'yandex#search'
      });

      // Функция, которая по состоянию чекбоксов в меню
      // показывает или скрывает геообъекты из выборки.
      function checkState() {
        var shownObjects,
          byCoppp = new ymaps.GeoQueryResult();

        // Отберем объекты по цвету. 
        if ($('#jdr').prop('checked')) {
          // Будем искать по двум параметрам:
          // - для точечных объектов по полю preset;
          // - для контурных объектов по цвету заливки.
          byCoppp = myObjects.search('options.fildColor = "Железнодорожный"');
        }
        if ($('#industr').prop('checked')) {
          byCoppp = myObjects.search('options.fildColor = "Индустриальный"')
            // После того, как мы нашли все зеленые объекты, добавим к ним
            // объекты, найденные на предыдущей итерации.
            .add(byCoppp);
        }
        if ($('#kirov').prop('checked')) {
          byCoppp = myObjects.search('options.fildColor = "Кировский"')
            .add(byCoppp);
        }
        if ($('#centr').prop('checked')) {
          byCoppp = myObjects.search('options.fildColor = "Центральный"')
            .add(byCoppp);
        }
        if ($('#krasnflot').prop('checked')) {
          byCoppp = myObjects.search('options.fildColor = "Краснофлотский"')
            .add(byCoppp);
        }


        // Мы отобрали объекты по цвету и по форме. Покажем на карте объекты,
        // которые совмещают нужные признаки.
        shownObjects = byCoppp.addToMap(myMap);
        // Объекты, которые не попали в выборку, нужно убрать с карты.
        myObjects.remove(shownObjects).removeFromMap(myMap);
      }

      $('#jdr').click(checkState);
      $('#industr').click(checkState);
      $('#kirov').click(checkState);
      $('#centr').click(checkState);
      $('#krasnflot').click(checkState);




      // Создадим объекты из их JSON-описания и добавим их на карту.
      window.myObjects = ymaps.geoQuery({
        type: "FeatureCollection",
        features: [


          {
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: [
                [
                  [48.4872099152, 135.044750889],
                  [48.4865858624, 135.045233687],
                  [48.4863005786, 135.044150075],
                  [48.4869567290, 135.043726286],
                  [48.4872099152, 135.044750889]
                ]
              ]

            },
            options: {
              fillColor: 'ff0000', // Цвет заливки
              fillOpacity: 0.45, // Прозрачность заливки
              strokeColor: '020202', // Цвет обводки
              strokeWidth: 2, // Толщина обводки
              strokeOpacity: 0.5, // Прозрачность обводки
              fildColor: "Кировский" // Кластер объекта 

            },
            // Содержимое балуна
            properties: {

              hintContent: "ТОС &quot;Виктория&quot;" // Подсказка объекта
            }
          },



          {
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: [
                [
                  [48.5206, 135.107],
                  [48.5215, 135.108],
                  [48.5217, 135.107],
                  [48.5217, 135.107],
                  [48.5212, 135.106],
                  [48.5206, 135.107]
                ]
              ]

            },
            options: {
              fillColor: '4cd46365', // Цвет заливки
              fillOpacity: 0.45, // Прозрачность заливки
              strokeColor: '525252c3', // Цвет обводки
              strokeWidth: 2, // Толщина обводки
              strokeOpacity: 0.5, // Прозрачность обводки
              fildColor: "Железнодорожный" // Кластер объекта 

            },
            // Содержимое балуна
            properties: {

              hintContent: "ТОС &quot;Максимум Света&quot;" // Подсказка объекта
            }
          },



          {
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: [
                [
                  [48.4751158751, 135.061937151],
                  [48.4765480869, 135.064731156],
                  [48.4703986385, 135.073185479],
                  [48.4690278941, 135.070227689],
                  [48.4751158751, 135.061937151]
                ]
              ]

            },
            options: {
              fillColor: '99fc99', // Цвет заливки
              fillOpacity: 0.45, // Прозрачность заливки
              strokeColor: 'ff007f', // Цвет обводки
              strokeWidth: 2, // Толщина обводки
              strokeOpacity: 0.5, // Прозрачность обводки
              fildColor: "Центральный" // Кластер объекта 

            },
            // Содержимое балуна
            properties: {

              hintContent: "ТОС &quot;Камская 6&quot;" // Подсказка объекта
            }
          },



          {
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: [
                []
              ]

            },
            options: {
              fillColor: '65dbc653', // Цвет заливки
              fillOpacity: 0.45, // Прозрачность заливки
              strokeColor: '1102b8e2', // Цвет обводки
              strokeWidth: 2, // Толщина обводки
              strokeOpacity: 0.5, // Прозрачность обводки
              fildColor: "" // Кластер объекта 

            },
            // Содержимое балуна
            properties: {

              hintContent: "" // Подсказка объекта
            }
          },


        ]

      }).addToMap(myMap);
    }
  </script>
  <style>
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <div style="padding: 5px;">


    <div class="overSelect"></div>
  </div>
  <div id="checkboxes">
    <label for="one">
                        <input type='checkbox' id='jdr' checked=true>Железнодорожный</label>
    <label for="two">
                        <input type='checkbox' id='industr' checked=true>Индустриальный</label>
    <label for="three">
                        <input type='checkbox' id='kirov' checked=true>Кировский</label>
    <label for="three">
                        <input type='checkbox' id='centr' checked=true>Центральный</label>
    <label for="three">
                        <input type='checkbox' id='krasnflot' checked=true>Краснофлотский</label>
  </div>
  
</body>

</html>

Теперь все фильтруется как нужно! Осталось теперь придумать как туда поиск запилить, боюсь код полностью придется менять((

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.