1

Нужно создать карту, примерно вот такую, со списком объектов. При нажатии на объект из списка он должен отобразиться на карте (собственно, как на примере). Подгружать список следует ajax из json файла.

Подскажите, как максимально просто реализовать эту задачу. В каком направлении двигаться, желательно пошагово. Я простой верстальщик, и со всем этим никогда не сталкивался.

1 ответ 1

2
        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());
        }


   /* html - code*/
    <!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 локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)-->
        <script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
        <script src="//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, #map {
                width: 100%; padding: 0; margin: 0;
                font-family: Arial;
            }

            #map {
                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>

// Группы объектов
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: "Дом Рыцаря"
                }
            ]}
    ];
1
  • Спасибо большое. 26 июн 2017 в 14:28

Ваш ответ

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

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