Здравствуйте одноклубники, у меня такой вопрос есть пример Пример работы с несколькими группами объектов на карте там меню создаётся автоматически, а я хочу сделать его такого вида:
<a href="id=1">Известные памятники</a>
<a href="id=2">Покушайки</a>
<a href="id=3">Оригинальные музейчики</a>
<a href="id=4">Красивости</a>
но не знаю как группам присвоить id.
Подскажите пожалуйста как группам присвоить id (на примере)
ml1/DTD/xhtml1-transition al.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=ANpUFE " type="text/javascript"></script>kBAAAAf7jmJwMAHGZHrcKNDsb EqEVjEUtCmufxQMwAAAAAAAAA AAAvVrubVT4btztbduoIgTLAe FILaQ==
<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>