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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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