Добрый день!
Создала карту, на которой при загрузке имеются метки. Имеется меню в виде списка, если пункт меню активен, то на карту добавляются метки, относящиеся к данному пункту, если не активно, то метки удаляются.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример-2 Работаем с грпуппами объектов на Яндекс.Карте v1.1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://api-maps.yandex.ru
<script type="text/javascript">
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
// Создание экземпляра карты и его привязка к созданному контейнеру
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]
// Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(39.876772, 59.231417), 11);
// Добавление элементов управления
map.addControl(new YMaps.ToolBar()
map.addControl(new YMaps.TypeControl()
map.addControl(new YMaps.Zoom()
map.addControl(new YMaps.ScaleLine()
var searchControl = new YMaps.SearchControl({
resultsPerPage: 5, // Количество объектов на странице
useMapBounds: 1 // Объекты, найденные в видимой области карты
// будут показаны в начале списка
}
map.addControl(searchControl); //добавлена строка поиска
/////////////////////////
var bounds = map.getBounds(),
pointLb = bounds.getLeftBottom(),
span = bounds.getSpan(
var gCollection = new YMaps.GeoObjectCollection(
gCollection.add([
new YMaps.Placemark(new YMaps.GeoPoint(39.895772,59.253343), "АЗС №6, Лукойл"),
new YMaps.Placemark(new YMaps.GeoPoint(39.6783974
new YMaps.Placemark(new YMaps.GeoPoint(39.816657,59.217752), "АЗС №23, Лукойл"),
new YMaps.Placemark(new YMaps.GeoPoint(39.9695234
new YMaps.Placemark(new YMaps.GeoPoint(39.917053,59.200454), "АЗС №35, Лукойл"),
new YMaps.Placemark(new YMaps.GeoPoint(39.9263504
new YMaps.Placemark(new YMaps.GeoPoint(39.7926901
new YMaps.Placemark(new YMaps.GeoPoint(39.811357,59.199389), "АЗС №48, Лукойл"),
new YMaps.Placemark(new YMaps.GeoPoint(39.8984397
new YMaps.Placemark(new YMaps.GeoPoint(39.8929780
new YMaps.Placemark(new YMaps.GeoPoint(39.9313540
]
map.addOverlay(gCollection);
/////////////////////////
// Группы объектов
var groups = [
createGroup("Лукойл", [
createPlacemark(new YMaps.GeoPoint(39.895772,59.253343), "АЗС №6, Лукойл"),
createPlacemark(new YMaps.GeoPoint(39.6783974
createPlacemark(new YMaps.GeoPoint(39.816657,59.217752), "АЗС №23, Лукойл"),
createPlacemark(new YMaps.GeoPoint(39.9695234
createPlacemark(new YMaps.GeoPoint(39.917053,59.200454), "АЗС №35, Лукойл"),
createPlacemark(new YMaps.GeoPoint(39.9263504
createPlacemark(new YMaps.GeoPoint(39.7926901
createPlacemark(new YMaps.GeoPoint(39.811357,59.199389), "АЗС №48, Лукойл"),
createPlacemark(new YMaps.GeoPoint(39.8984397
createPlacemark(new YMaps.GeoPoint(39.8929780
createPlacemark(new YMaps.GeoPoint(39.9313540
], "default#gasStationIcon"),
createGroup("Shell", [
createPlacemark(new YMaps.GeoPoint(39.8307247
createPlacemark(new YMaps.GeoPoint(39.914376,59.214293), "АЗС, Shell"),
createPlacemark(new YMaps.GeoPoint(39.9276799
], "default#gasStationIcon"),
createGroup("Энтиком-Инвест", [
createPlacemark(new YMaps.GeoPoint(39.8109348
createPlacemark(new YMaps.GeoPoint(39.8249216
createPlacemark(new YMaps.GeoPoint(39.8542067
createPlacemark(new YMaps.GeoPoint(39.8991404
], "default#gasStationIcon"),
createGroup("АЗС, ЗАО ВОМЗ-Авто", [
createPlacemark(new YMaps.GeoPoint(39.8740145
], "default#gasStationIcon")
];
// Создание списка групп
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-image: url("http://komandirovka.vol-info.ru/images/li_img.png");
padding: 0;
}
#menu li{
padding: 0;
}
#menu a {
font-family:Arial,Helvetica,Sans-Serif;
font-size:13px;
}
a.active {
color: #9A171F;
}
/* Оформление меню (конец)*/
</style>
</head>
<body>
<div id="YMapsID" style="width:520px;height:400px; border:solid #FFF 4px;"></div> <br/>
<ul id="menu"></ul>
</body>
</html>
Можно посмотреть по адресу: http://komandirovka.vol-info.ru/map2.php
Мне необходимо, чтобы при нажатии на ссылку в меню, метки, которые присутствуют на карте при загрузке удалялись, а все остальное работало, как работает...
Помогите пожалуйста, кто знает.