0

В режиме "Вывод списка объектов карты" нужно, чтобы над пунктом меню была иконка, например: "Иконка памятника" - Известные памятники, "Иконка ресторана" - Рестораны.

Ссылка на пример песочницы api Ymaps: https://yandex.ru/dev/maps/jsbox/2.1/object_list

Код html страницы:

<!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: 100%;
            height: 450px;
        }
            /* Оформление меню (начало)*/
        .menu {
            list-style: none;
            padding: 5px;
            margin: 0;
        }
            /* Оформление меню (конец)*/
    </style>
</head>

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

и парочка javascript

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: "Дом Рыцаря"
                }
            ]}
    ];

второй:

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"></ul>');
        
    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 })
            ;

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

    function createSubMenu (item, collection) {
        // Создаем метку.
            placemark = new ymaps.Placemark(item.center, { balloonContent: item.name });

        // Добавляем метку в коллекцию.
        collection.add(placemark);
        ;
    }

    // Добавляем меню в тэг BODY.
    menu.appendTo($('body'));
    // Выставляем масштаб карты чтобы были видны все группы.
    myMap.setBounds(myMap.geoObjects.getBounds());
}
5
  • добро пожаловать на stack overflow на русском! несвязанные вопросы следует задавать отдельными вопросами. оставьте, пожалуйста, один вопрос, внеся правку (нажав править ниже текста вопроса) 23 ноя 2022 в 9:18
  • как понять несвязанные вопросы?
    – MSozdatel
    23 ноя 2022 в 9:43
  • второй вопрос, который лучше задать отдельно: И еще в этом же режиме нужно сделать так, чтобы изначально маркеров не было видно. Это можно реализовать? 23 ноя 2022 в 9:47
  • его также тут можно комментарием добавить?
    – MSozdatel
    23 ноя 2022 в 9:49
  • Вопрос закрыт, я тупой )))
    – MSozdatel
    24 ноя 2022 в 16:55

1 ответ 1

1

а кто мешает сюда добавить?

var menuItem = $('<li><img></li><li><a href="#">' + group.name + '</a></li>'),

Ваш ответ

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

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