Клуб API Карт

Присвоение id для группы объектов

Пост в архиве.

Здравствуйте одноклубники, у меня такой вопрос есть пример Пример работы с несколькими группами объектов на карте там меню создаётся автоматически, а я хочу сделать его такого вида:

<a href="id=1">Известные памятники</a>
<a href="id=2">Покушайки</a>
<a href="id=3">Оригинальные музейчики</a>
<a href="id=4">Красивости</a>

но не знаю как группам присвоить id.

Подскажите пожалуйста как группам присвоить id (на примере)

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Примеры. Построение меню списка групп.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==" type="text/javascript"></script>
    <script type="text/javascript">
        // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);

            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(30.530946,50.443705), 14);

            // Добавление элементов управления
            map.enableScrollZoom();
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.Zoom());

            // Группы объектов
            var groups = [
                createGroup("Известные памятники", [
                    createPlacemark(new YMaps.GeoPoint(30.563022,50.426472), "Монумент \"Родина-Мать\""),
                    createPlacemark(new YMaps.GeoPoint(30.516489,50.45351), "Памятник \"Богдану Хмельницкому\""),
                    createPlacemark(new YMaps.GeoPoint(30.529874,50.454433), "Арка Дружбы народов")
                ], "default#redPoint"),
                createGroup("Покушайки", [
                    createPlacemark(new YMaps.GeoPoint(30.60791,50.50955), "Ресторан \"Калинка-Малинка\"", "пр.Владимира Маяковского, 47"),
                    createPlacemark(new YMaps.GeoPoint(30.521708,50.429083), "Бар \"Сало-бар\"", "ул. Анри Барбюса, 5а"),
                    createPlacemark(new YMaps.GeoPoint(30.498271,50.450843), "Абсент-бар \"Палата №6\"", "бульвар Воровского, 31а"),
                    createPlacemark(new YMaps.GeoPoint(30.516498,50.454834), "Ресторан \"Спотыкач\"", "Владимирская,16")
                ], "default#greenPoint"),
                createGroup("Оригинальные музейчики", [
                    createPlacemark(new YMaps.GeoPoint(30.520163,50.443334), "Музей грамзаписи и старинных музыкальных инструментов"),
                    createPlacemark(new YMaps.GeoPoint(30.505269,50.446977), "Музей истории медицины или Анатомический театр"),
                    createPlacemark(new YMaps.GeoPoint(30.530889,50.452512), "Музей воды. Водно-информационный центр")
                ], "default#orangePoint"),
                createGroup("Красивости", [
                    createPlacemark(new YMaps.GeoPoint(30.516174,50.45987), "Замок Ричарда-Львиное сердце"),
                    createPlacemark(new YMaps.GeoPoint(30.528598,50.445049), "\"Дом с химерами\""),
                    createPlacemark(new YMaps.GeoPoint(30.511809,50.449156), "Дом Рыцаря")
                ])
            ];

            // Создание списка групп
            for (var i = 0; i < groups.length; i++) {
                addMenuItem(groups[i], map, YMaps.jQuery("#menu"));
            }
        })

        // Добавление одного пункта в список
        function addMenuItem (group, map, menuContainer) {

            // Показать/скрыть группу на карте
            YMaps.jQuery("<a class=\"title\" href=\"#\">" + group.title + "</a>")
                .bind("click", function () {
                    var link = YMaps.jQuery(this);

                    // Если пункт меню "неактивный", то добавляем группу на карту,
                    // иначе - удаляем с карты
                    if (link.hasClass("active")) {
                        map.removeOverlay(group);
                    } else {
                        map.addOverlay(group);
                    }

                    // Меняем "активность" пункта меню
                    link.toggleClass("active");

                    return false;
                })

                // Добавление нового пункта меню в список
                .appendTo(
                    YMaps.jQuery("<li></li>").appendTo(menuContainer)
                )
        };

        // Создание группы
        function createGroup (title, objects, style) {
            var group = new YMaps.GeoObjectCollection(style);

            group.title = title;
            group.add(objects);
           
            return group;
        };

        // Создание метки
        function createPlacemark (point, name, description) {
            var placemark = new YMaps.Placemark(point);

            placemark.name = name;
            placemark.description = description;

            return placemark
        }
    </script>

    <style type="text/css">
        /* Оформление меню (начало)*/

            #menu {
                list-style: none;

                margin: 0;
                padding: 0;
            }

            #menu a {
                text-decoration: none;

                border-bottom: dashed 1px;
            }
           
            a.active {
                color: #000;
            }

        /* Оформление меню (конец)*/
    </style>
</head>

<body>
    <table>
    <tr>
        <td><div id="YMapsID" style="width:800px;height:700px"></div></td>
        <td valign="top"><ul id="menu"></ul></td>
    </tr>
    <table>
</body>
</html>
 

5 комментариев

Если хотя бы немного вникнуть в код этого простого примера,

то даже не умея программировать, можно понять что нужно поменять

всего 3 строчки.

И это будет гораздо быстрее чем писать этот пост и 3 дня ждать ответа.

 

 

addMenuItem(groups[i], i, map, YMaps.jQuery("#menu"));
            }
        })

        // Добавление одного пункта в список
        function addMenuItem (group, index, map, menuContainer) {

            // Показать/скрыть группу на карте
            YMaps.jQuery("id=\"" + (index + 1) +"\">" + group.title + "")

 

Благодарю вас за ответ, простите мне мою непросвещённость, но что надо подставить в ссылки?

при таких ссылках при нажатии выдаёт ошибку и пишет файл не найден

При нажатии на такую ссылку

  • Известные памятники
  • ничего не происходит

    Я неправильно сформулировал свой вопрос. id как таковые мне не нужны, у меня есть меню и я хотел узнать как в него вставлят ссылки чтобы выводить группы в нужной мне последовательности.

    Скажите пожалуйста что надо писать вместо вопросов в этом примере


      категория 1
      group 1
      group 3
      group 5


       категория 2
       group 2
       group 4
       group 3