1

В примере Яндекс Карт есть "Вывод списка объектов карты". https://yandex.ru/dev/maps/jsbox/2.1/object_list/

При нажатии на определенную категорию показываются её объекты на карте. У меня есть задача - добавить кнопку "Показать/скрыть все объекты". Помогите, пожалуйста, реализовать.

ymaps.ready(init);

function init() {

    // Создание экземпляра карты.
    var myMap = new ymaps.Map('map', {
            center: [50.443705, 30.530946],
            zoom: 14
        }, {
            searchControlProvider: 'yandex#search'
        }),
        // Контейнер для меню.
        menu = $('<ul class="menu"/>');
        
    for (var i = 0, l = groups.length; i < l; i++) {
        createMenuGroup(groups[i]);
    }

    function createMenuGroup (group) {
        // Пункт меню.
        var menuItem = $('<li><a href="#">' + group.name + '</a></li>'),
        // Коллекция для геообъектов группы.
            collection = new ymaps.GeoObjectCollection(null, { preset: group.style }),
        // Контейнер для подменю.
            submenu = $('<ul class="submenu"/>');

        // Добавляем коллекцию на карту.
        myMap.geoObjects.add(collection);
        // Добавляем подменю.
        menuItem
            .append(submenu)
            // Добавляем пункт в меню.
            .appendTo(menu)
            // По клику удаляем/добавляем коллекцию на карту и скрываем/отображаем подменю.
            .find('a')
            .bind('click', function () {
                if (collection.getParent()) {
                    myMap.geoObjects.remove(collection);
                    submenu.hide();
                } else {
                    myMap.geoObjects.add(collection);
                    submenu.show();
                }
            });
        for (var j = 0, m = group.items.length; j < m; j++) {
            createSubMenu(group.items[j], collection, submenu);
        }
    }

    function createSubMenu (item, collection, submenu) {
        // Пункт подменю.
        var submenuItem = $('<li><a href="#">' + item.name + '</a></li>'),
        // Создаем метку.
            placemark = new ymaps.Placemark(item.center, { balloonContent: item.name });

        // Добавляем метку в коллекцию.
        collection.add(placemark);
        // Добавляем пункт в подменю.
        submenuItem
            .appendTo(submenu)
            // При клике по пункту подменю открываем/закрываем баллун у метки.
            .find('a')
            .bind('click', function () {
                if (!placemark.balloon.isOpen()) {
                    placemark.balloon.open();
                } else {
                    placemark.balloon.close();
                }
                return false;
            });
    }

    // Добавляем меню в тэг BODY.
    menu.appendTo($('body'));
    // Выставляем масштаб карты чтобы были видны все группы.
    myMap.setBounds(myMap.geoObjects.getBounds());
}
// Группы объектов
var groups = [
        {
            name: "Известные памятники",
            style: "islands#redIcon",
            items: [
                {
                    center: [50.426472, 30.563022],
                    name: "Монумент &quot;Родина-Мать&quot;"
                },
                {
                    center: [50.45351, 30.516489],
                    name: "Памятник &quot;Богдану Хмельницкому&quot;"
                },
                {
                    center: [50.454433, 30.529874],
                    name: "Арка Дружбы народов"
                }
            ]},
        {
            name: "Покушайки",
            style: "islands#greenIcon",
            items: [
                {
                    center: [50.50955, 30.60791],
                    name: "Ресторан &quot;Калинка-Малинка&quot;"
                },
                {
                    center: [50.429083, 30.521708],
                    name: "Бар &quot;Сало-бар&quot;"
                },
                {
                    center: [50.450843, 30.498271],
                    name: "Абсент-бар &quot;Палата №6&quot;"
                },
                {
                    center: [50.454834, 30.516498],
                    name: "Ресторан &quot;Спотыкач&quot;"
                }
            ]},
        {
            name: "Оригинальные музейчики",
            style: "islands#orangeIcon",
            items: [
                {
                    center: [50.443334, 30.520163],
                    name: "Музей грамзаписи и старинных музыкальных инструментов"
                },
                {
                    center: [50.446977, 30.505269],
                    name: "Музей истории медицины или Анатомический театр"
                },
                {
                    center: [50.452512, 30.530889],
                    name: "Музей воды. Водно-информационный центр"
                }
            ]},
        {
            name: "Красивости",
            style: "islands#blueIcon",
            items: [
                {
                    center: [50.45987, 30.516174],
                    name: "Замок Ричарда-Львиное сердце"
                },
                {
                    center: [50.445049, 30.528598],
                    name: "&quot;Дом с химерами&quot;"
                },
                {
                    center: [50.449156, 30.511809],
                    name: "Дом Рыцаря"
                }
            ]}
    ];
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Вывод списка объектов карты</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>" type="text/javascript"></script>
    <script src="https://yandex.st/jquery/2.2.3/jquery.min.js" type="text/javascript"></script>
    <script src="groups.js" type="text/javascript"></script>
    <script src="object_list.js" type="text/javascript"></script>
    <style type="text/css">
        html, body{
            width: 100%; padding: 0; margin: 0;
            font-family: Arial;
        }

        #map {
            width: 95%;
            height: 250px;
        }
            /* Оформление меню (начало)*/
        .menu {
            list-style: none;
            padding: 5px;

            margin: 0;
        }
        .submenu {
            list-style: none;

            margin: 0 0 0 20px;
            padding: 0;
        }
        .submenu li {
            font-size: 90%;
        }
            /* Оформление меню (конец)*/
    </style>
</head>

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

</html>

5
  • для начал прикрепи свой код 6 июл 2022 в 18:21
  • Пожалуйста, исправьте вопрос, чтобы он отражал конкретную проблему с достаточным количеством деталей для возможности дать адекватный ответ. 6 июл 2022 в 18:35
  • Код - в примере по ссылке: yandex.ru/dev/maps/jsbox/2.1/object_list 6 июл 2022 в 19:20
  • @АлексейИванов Так откройте редактор вопроса, нажав на кнопку "Править" пож вопросом, нажмите CTRL+M в редаеторе вопроса и впишите код в нужные секции и убедитесь, что код корректно запускается и нет ошибок при запуске
    – EzioMercer
    6 июл 2022 в 19:31
  • 1
    @EzioMercer Спасибо! Первый раз на данном ресурсе, еще не разобрался) 6 июл 2022 в 19:39

1 ответ 1

0

Чутка освежил код:

// Группы объектов
const groups = [{
    name: "Известные памятники",
    style: "islands#redIcon",
    items: [{
        center: [50.426472, 30.563022],
        name: "Монумент &quot;Родина-Мать&quot;"
      },
      {
        center: [50.45351, 30.516489],
        name: "Памятник &quot;Богдану Хмельницкому&quot;"
      },
      {
        center: [50.454433, 30.529874],
        name: "Арка Дружбы народов"
      }
    ]
  },
  {
    name: "Покушайки",
    style: "islands#greenIcon",
    items: [{
        center: [50.50955, 30.60791],
        name: "Ресторан &quot;Калинка-Малинка&quot;"
      },
      {
        center: [50.429083, 30.521708],
        name: "Бар &quot;Сало-бар&quot;"
      },
      {
        center: [50.450843, 30.498271],
        name: "Абсент-бар &quot;Палата №6&quot;"
      },
      {
        center: [50.454834, 30.516498],
        name: "Ресторан &quot;Спотыкач&quot;"
      }
    ]
  },
  {
    name: "Оригинальные музейчики",
    style: "islands#orangeIcon",
    items: [{
        center: [50.443334, 30.520163],
        name: "Музей грамзаписи и старинных музыкальных инструментов"
      },
      {
        center: [50.446977, 30.505269],
        name: "Музей истории медицины или Анатомический театр"
      },
      {
        center: [50.452512, 30.530889],
        name: "Музей воды. Водно-информационный центр"
      }
    ]
  },
  {
    name: "Красивости",
    style: "islands#blueIcon",
    items: [{
        center: [50.45987, 30.516174],
        name: "Замок Ричарда-Львиное сердце"
      },
      {
        center: [50.445049, 30.528598],
        name: "&quot;Дом с химерами&quot;"
      },
      {
        center: [50.449156, 30.511809],
        name: "Дом Рыцаря"
      }
    ]
  }
];

ymaps.ready(init);

function init() {
  // Создание экземпляра карты.
  const myMap = new ymaps.Map('map', {
    center: [50.443705, 30.530946],
    zoom: 14
  }, {
    searchControlProvider: 'yandex#search'
  });
  // Контейнер для меню.
  const menu = $('<ul class="menu"/>');

  let showAll = false;
  const toggleAllBtn = $('<button>Close all</button>');
  const menuItems = [];
  
  toggleAllBtn.appendTo($('body'));

  toggleAllBtn.click(() => {
    menuItems.forEach(menuItem => {
      if (showAll) {
        myMap.geoObjects.add(menuItem.collection);
        menuItem.submenu.show();
      } else {
        myMap.geoObjects.remove(menuItem.collection);
        menuItem.submenu.hide();
      }
    });
    
    showAll = !showAll;
    
    toggleAllBtn.text(`${showAll ? 'Open ' : 'Close '} all`);
  });
  
  for (const group of groups) {
    createMenuGroup(group);
  }

  function createMenuGroup(group) {
    // Пункт меню.
    const menuItem = $('<li><a href="#">' + group.name + '</a></li>');
    // Коллекция для геообъектов группы.
    const collection = new ymaps.GeoObjectCollection(null, {
      preset: group.style
    });
    // Контейнер для подменю.
    const submenu = $('<ul class="submenu"/>');
      
    menuItems.push({
      collection,
      submenu
    });

    // Добавляем коллекцию на карту.
    myMap.geoObjects.add(collection);
    // Добавляем подменю.
    menuItem
      .append(submenu)
      // Добавляем пункт в меню.
      .appendTo(menu)
      // По клику удаляем/добавляем коллекцию на карту и скрываем/отображаем подменю.
      .find('a')
      .click(() => {
        if (collection.getParent()) {
          myMap.geoObjects.remove(collection);
          submenu.hide();
        } else {
          myMap.geoObjects.add(collection);
          submenu.show();
        }
      });

    for (const groupItem of group.items) {
      createSubMenu(groupItem, collection, submenu);
    }
  }

  function createSubMenu(item, collection, submenu) {
    // Пункт подменю.
    const submenuItem = $('<li><a href="#">' + item.name + '</a></li>');
    // Создаем метку.
    const placemark = new ymaps.Placemark(item.center, {
      balloonContent: item.name
    });

    // Добавляем метку в коллекцию.
    collection.add(placemark);
    // Добавляем пункт в подменю.
    submenuItem
      .appendTo(submenu)
      // При клике по пункту подменю открываем/закрываем баллун у метки.
      .find('a')
      .click(() => {
        if (!placemark.balloon.isOpen()) {
          placemark.balloon.open();
        } else {
          placemark.balloon.close();
        }
        return false;
      });
  }

  // Добавляем меню в тэг BODY.
  menu.appendTo($('body'));
  // Выставляем масштаб карты чтобы были видны все группы.
  myMap.setBounds(myMap.geoObjects.getBounds());
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>Вывод списка объектов карты</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>" type="text/javascript"></script>
  <script src="https://yandex.st/jquery/2.2.3/jquery.min.js" type="text/javascript"></script>
  <script src="groups.js" type="text/javascript"></script>
  <script src="object_list.js" type="text/javascript"></script>
  <style type="text/css">
    html,
    body {
      width: 100%;
      padding: 0;
      margin: 0;
      font-family: Arial;
    }
    
    #map {
      width: 95%;
      height: 250px;
    }
    /* Оформление меню (начало)*/
    
    .menu {
      list-style: none;
      padding: 5px;
      margin: 0;
    }
    
    .submenu {
      list-style: none;
      margin: 0 0 0 20px;
      padding: 0;
    }
    
    .submenu li {
      font-size: 90%;
    }
    /* Оформление меню (конец)*/
  </style>
</head>

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

</html>

И так основная логика здесь:

let showAll = false;
const toggleAllBtn = $('<button>Close all</button>');
const menuItems = [];

toggleAllBtn.appendTo($('body'));

toggleAllBtn.click(() => {
  menuItems.forEach(menuItem => {
    if (showAll) {
      myMap.geoObjects.add(menuItem.collection);
      menuItem.submenu.show();
    } else {
      myMap.geoObjects.remove(menuItem.collection);
      menuItem.submenu.hide();
    }
  });
    
  showAll = !showAll;
  
  toggleAllBtn.text(`${showAll ? 'Open ' : 'Close '} all`);
});

Заполняем массив menuItems тут:

menuItems.push({
  collection,
  submenu
});

Описание шагов:

  • Добавили кнопку
  • Навесили слушатель
  • Если надо всё закрыть, то удалем коллекцию и скрываем пункт меню, если не надо, то наоборот
  • По мере объявления пунктов меню и коллеций, записываем их в menuItems
4
  • 1
    Огромное спасибо за помощь!!! 7 июл 2022 в 6:10
  • подскажите, пожалуйста, ещё как вывести кнопки категорий в отдельный <div>, чтобы применить к ним стили, а для каждой кнопки - свой класс? 12 июл 2022 в 12:55
  • @АлексейИванов объявляйте свой div в разметке, а потом замените вот тут menu.appendTo($('body')); селектор на нужный. А классы для кнопок можете сразу назначить при создании, например как тут $('<ul class="submenu"/>');
    – EzioMercer
    12 июл 2022 в 13:34
  • 1
    все получилось, спасибо! 14 июл 2022 в 6:34

Ваш ответ

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

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