API Яндекс.Карт Работаем с группой маркеров – версия 2

Автор: | 23.01.2010
13 комментариев

На своем блоге я уже рассказывал, как можно работать с группами маркеров в API Яндекс.Карт версии 1.0 — API Яндекс.Карт Работаем с группой маркеров.

В этой заметке я раскажу Вам про особенности работы  с группами маркеров в API Яндекс.Карт версии 1.1

И так в начале новый код примера:

<!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>Пример-1 Работаем с грпуппами объектов на Яндекс.Карте v1.1</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(43.99150,56.31534), 11);
 
            // Добавление элементов управления
            map.enableScrollZoom();
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.Zoom());
 
		 //Кинотеатры
            var k = new YMaps.Style();
            k.iconStyle = new YMaps.IconStyle();
            k.iconStyle.offset = new YMaps.Point(-15, -15);
            k.iconStyle.href = "http://webmap-blog.ru/examples/Ris/kinoteatrs.jpg";
            k.iconStyle.size = new YMaps.Point(30, 30);
            YMaps.Styles.add("kino#customPoint", k);
 
            //Театры
            var s = new YMaps.Style();
            s.iconStyle = new YMaps.IconStyle();
            s.iconStyle.offset = new YMaps.Point(-15, -15);
            s.iconStyle.href = "http://webmap-blog.ru/examples/Ris/theatr.jpg";
            s.iconStyle.size = new YMaps.Point(30, 30);
            YMaps.Styles.add("teatr#customPoint", s);
 
            //Гостиницы
            var hs = new YMaps.Style();
            hs.iconStyle = new YMaps.IconStyle();
            hs.iconStyle.offset = new YMaps.Point(-15, -15);
            hs.iconStyle.href = "http://webmap-blog.ru/examples/Ris/hotels.jpg";
            hs.iconStyle.size = new YMaps.Point(30, 30);
            YMaps.Styles.add("hotel#customPoint", hs);
 
 
            //Вокзалы
            var v = new YMaps.Style();
            v.iconStyle = new YMaps.IconStyle();
            v.iconStyle.offset = new YMaps.Point(-15, -15);
            v.iconStyle.href = "http://webmap-blog.ru/examples/Ris/trans_main.jpg";
            v.iconStyle.size = new YMaps.Point(30, 30);
            YMaps.Styles.add("vokzal#customPoint", v);
 
// Группы объектов
            var groups = [
                createGroup("Кинотеатры", [
                                createPlacemark(new YMaps.GeoPoint(43.865382,56.354627), "Кинотеатр Буревестник"),
createPlacemark(new YMaps.GeoPoint(43.976737,56.269141), "Кинотеатр Зарница"),
createPlacemark(new YMaps.GeoPoint(43.959184,56.237457), "Кинотеатр Импульс"),
createPlacemark(new YMaps.GeoPoint(43.934355,56.313329), "Кинотеатр Искра"),
createPlacemark(new YMaps.GeoPoint(43.944335,56.317977), "Кинотеатр Канавинский"),
createPlacemark(new YMaps.GeoPoint(43.859471,56.241259), "Кинотеатр Мир"),
createPlacemark(new YMaps.GeoPoint(43.993976,56.317213), "Кинотеатр Октябрь"),
createPlacemark(new YMaps.GeoPoint(43.996303,56.318596), "Кинотеатр Орленок"),
createPlacemark(new YMaps.GeoPoint(43.837983,56.343429), "Кинотеатр Ракета"),
createPlacemark(new YMaps.GeoPoint(44.00481,56.323812), "Киноцентр Рекорд"),
createPlacemark(new YMaps.GeoPoint(43.93104,56.286148), "Кинотеатр Россия"),
createPlacemark(new YMaps.GeoPoint(44.073827,56.308056), "Кинотеатр Синема Парк"),
createPlacemark(new YMaps.GeoPoint(43.93404,56.328928), "Кинотеатр Смена"),
createPlacemark(new YMaps.GeoPoint(43.871158,56.347345), "Кинотеатр Сормовский"),
createPlacemark(new YMaps.GeoPoint(44.026297,56.31927), "Каро Фильм в ТЦ Шоколад"),
createPlacemark(new YMaps.GeoPoint(43.978839,56.274389), "Кинотеатр Электрон"),
createPlacemark(new YMaps.GeoPoint(43.826198,56.363992), "Кинотеатр Юность")
                ], "kino#customPoint"),
 
                createGroup("Театры", [
createPlacemark(new YMaps.GeoPoint(43.9321,56.340704), "Вера,  Детский театр"),
createPlacemark(new YMaps.GeoPoint(44.002321,56.320203), "Театр Комедиа"),
createPlacemark(new YMaps.GeoPoint(44.00136,56.324117), "Театр Драмы"),
createPlacemark(new YMaps.GeoPoint(43.995898,56.318371), "Театр Кукол"),
createPlacemark(new YMaps.GeoPoint(44.017063,56.315695),"Театр Оперы и балета"),
createPlacemark(new YMaps.GeoPoint(44.010487,56.316444), "Театр Юнного Зрителя"),
createPlacemark(new YMaps.GeoPoint(43.933915,56.307501), "Преображение,  Муниципальный театр ритмопластики"),
createPlacemark(new YMaps.GeoPoint(44.003588,56.324736), "Учебная сцена,  Учебный театр Театрального училища")
                ], "teatr#customPoint"),
 
                createGroup("Гостиницы", [
        	createPlacemark(new YMaps.GeoPoint(43.861663,56.242589), "Гостиница Автозаводская"),
createPlacemark(new YMaps.GeoPoint(44.023432,56.329737), "Гостиница Александровский сад"),
createPlacemark(new YMaps.GeoPoint(43.793158,56.219372), "Гостиница Аэрофлот"),
createPlacemark(new YMaps.GeoPoint(44.025183,56.293517), "Гостиница Берег"),
createPlacemark(new YMaps.GeoPoint(44.010963,56.329093), "Гостиница Волжский откос"),
createPlacemark(new YMaps.GeoPoint(43.869505,56.243214), "Гостиница Волна"),
createPlacemark(new YMaps.GeoPoint(43.991676,56.326308), "Гостиница На Ильинке"),
createPlacemark(new YMaps.GeoPoint(44.000183,56.324501), "Гостиница Никола Хаус"),
createPlacemark(new YMaps.GeoPoint(43.929701,56.321112), "Гостиница Николь"),
createPlacemark(new YMaps.GeoPoint(44.01982,56.328369), "Гостиница Октябрьская"),
createPlacemark(new YMaps.GeoPoint(43.813981,56.310253), "Гостиница Орион"),
createPlacemark(new YMaps.GeoPoint(43.961062,56.331368), "Гостиница Сервис-Ярмарка"),
createPlacemark(new YMaps.GeoPoint(43.990239,56.323163), "Гостиница Сергиевская"),
createPlacemark(new YMaps.GeoPoint(43.924617,56.333469), "Гостиница Стрелка"),
createPlacemark(new YMaps.GeoPoint(43.826198,56.311017), "Гостиница Трансэкспедитор"),
createPlacemark(new YMaps.GeoPoint(43.995629,56.325409), "Гостиница У Домика Петра"),
createPlacemark(new YMaps.GeoPoint(44.006004,56.3251), "Гостиница ГП Областной дом крестьянина"),
createPlacemark(new YMaps.GeoPoint(43.95233,56.317537), "Гостиница Дома артиста"),
createPlacemark(new YMaps.GeoPoint(44.030205,56.323847), "Гостиница НГЛУ им. Н. А. Добролюбова"),
createPlacemark(new YMaps.GeoPoint(43.864457,56.362207), "Гостиница ОАО Красное Сормово"),
createPlacemark(new YMaps.GeoPoint(43.974959,56.294955), "Гостиница учебно-методического центра Облсовпрофа"),
createPlacemark(new YMaps.GeoPoint(43.920907,56.329617), "Гостиница ФГУП ОКБ машиностроения им. И. И. Африкантова"),
createPlacemark(new YMaps.GeoPoint(43.825793,56.341533), "Гостиница ЧП Хажаев Р. Ж.")
                ], "hotel#customPoint"),
 
                createGroup("Вокзалы", [
          createPlacemark(new YMaps.GeoPoint(43.945763,56.321621), "Московский вокзал"),
createPlacemark(new YMaps.GeoPoint(43.987903,56.329552), "Речной вокзал"),
createPlacemark(new YMaps.GeoPoint(43.981202,56.304545), "Автовокзал"),
createPlacemark(new YMaps.GeoPoint(43.950641,56.324631), "Автстанция Канавинская"),
createPlacemark(new YMaps.GeoPoint(44.041596,56.321711), "Автостанция Сенная")
                ], "vokzal#customPoint")
            ];
 
            // Создание списка групп
            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>

Первое отличие это номер версии в коде определения ключа к API Яндекс.Карт

http://api-maps.yandex.ru/1.1/index.xml?key=…

В состав данной версии API входит фреймворк jQuery.

За создание группы отвечает функция createGroup.

В нее передаются следующие параметры:

  • Наименование – title,
  • Набор объектов (точек) – object,
  • Стиль отображения для конкретной группы – style

Класс YMaps.GeoObjectCollection объединяет объекты в группу .

Функция createPlacemark создает отдельную метку.

Создаем массив групп меток groups, на основе которого будет формироваться меню .

Функция addMenuItem добавляет отдельный пункт меню в список.

В цикле мы формируем меню

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

Посмотреть пример в действии.

В этом примере мы определяли свои значки для обозначения меток, но можно использовать и встроенные в API.

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

Полный перечень встроенных стилей значков содержится здесь

Для второго примера я использовал следующие стили:

"default#cinemaIcon" – кинотеатры;
"default#teatherIcon" – театры;
"default#campingIcon" – гостиницы;
"default#trainIcon" – вокзалы

Код примера:

<!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>Пример-2 Работаем с грпуппами объектов на Яндекс.Карте v1.1</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(43.99150,56.31534), 11);
 
            // Добавление элементов управления
            map.enableScrollZoom();
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.Zoom());
 
 
// Группы объектов
            var groups = [
                createGroup("Кинотеатры", [
                                createPlacemark(new YMaps.GeoPoint(43.865382,56.354627), "Кинотеатр Буревестник"),
createPlacemark(new YMaps.GeoPoint(43.976737,56.269141), "Кинотеатр Зарница"),
createPlacemark(new YMaps.GeoPoint(43.959184,56.237457), "Кинотеатр Импульс"),
createPlacemark(new YMaps.GeoPoint(43.934355,56.313329), "Кинотеатр Искра"),
createPlacemark(new YMaps.GeoPoint(43.944335,56.317977), "Кинотеатр Канавинский"),
createPlacemark(new YMaps.GeoPoint(43.859471,56.241259), "Кинотеатр Мир"),
createPlacemark(new YMaps.GeoPoint(43.993976,56.317213), "Кинотеатр Октябрь"),
createPlacemark(new YMaps.GeoPoint(43.996303,56.318596), "Кинотеатр Орленок"),
createPlacemark(new YMaps.GeoPoint(43.837983,56.343429), "Кинотеатр Ракета"),
createPlacemark(new YMaps.GeoPoint(44.00481,56.323812), "Киноцентр Рекорд"),
createPlacemark(new YMaps.GeoPoint(43.93104,56.286148), "Кинотеатр Россия"),
createPlacemark(new YMaps.GeoPoint(44.073827,56.308056), "Кинотеатр Синема Парк"),
createPlacemark(new YMaps.GeoPoint(43.93404,56.328928), "Кинотеатр Смена"),
createPlacemark(new YMaps.GeoPoint(43.871158,56.347345), "Кинотеатр Сормовский"),
createPlacemark(new YMaps.GeoPoint(44.026297,56.31927), "Каро Фильм в ТЦ Шоколад"),
createPlacemark(new YMaps.GeoPoint(43.978839,56.274389), "Кинотеатр Электрон"),
createPlacemark(new YMaps.GeoPoint(43.826198,56.363992), "Кинотеатр Юность")
                ], "default#cinemaIcon"),
                createGroup("Театры", [
createPlacemark(new YMaps.GeoPoint(43.9321,56.340704), "Вера,  Детский театр"),
createPlacemark(new YMaps.GeoPoint(44.002321,56.320203), "Театр Комедиа"),
createPlacemark(new YMaps.GeoPoint(44.00136,56.324117), "Театр Драмы"),
createPlacemark(new YMaps.GeoPoint(43.995898,56.318371), "Театр Кукол"),
createPlacemark(new YMaps.GeoPoint(44.017063,56.315695),"Театр Оперы и балета"),
createPlacemark(new YMaps.GeoPoint(44.010487,56.316444), "Театр Юнного Зрителя"),
createPlacemark(new YMaps.GeoPoint(43.933915,56.307501), "Преображение,  Муниципальный театр ритмопластики"),
createPlacemark(new YMaps.GeoPoint(44.003588,56.324736), "Учебная сцена,  Учебный театр Театрального училища")
                ], "default#teatherIcon"),
                createGroup("Гостиницы", [
        	createPlacemark(new YMaps.GeoPoint(43.861663,56.242589), "Гостиница Автозаводская"),
createPlacemark(new YMaps.GeoPoint(44.023432,56.329737), "Гостиница Александровский сад"),
createPlacemark(new YMaps.GeoPoint(43.793158,56.219372), "Гостиница Аэрофлот"),
createPlacemark(new YMaps.GeoPoint(44.025183,56.293517), "Гостиница Берег"),
createPlacemark(new YMaps.GeoPoint(44.010963,56.329093), "Гостиница Волжский откос"),
createPlacemark(new YMaps.GeoPoint(43.869505,56.243214), "Гостиница Волна"),
createPlacemark(new YMaps.GeoPoint(43.991676,56.326308), "Гостиница На Ильинке"),
createPlacemark(new YMaps.GeoPoint(44.000183,56.324501), "Гостиница Никола Хаус"),
createPlacemark(new YMaps.GeoPoint(43.929701,56.321112), "Гостиница Николь"),
createPlacemark(new YMaps.GeoPoint(44.01982,56.328369), "Гостиница Октябрьская"),
createPlacemark(new YMaps.GeoPoint(43.813981,56.310253), "Гостиница Орион"),
createPlacemark(new YMaps.GeoPoint(43.961062,56.331368), "Гостиница Сервис-Ярмарка"),
createPlacemark(new YMaps.GeoPoint(43.990239,56.323163), "Гостиница Сергиевская"),
createPlacemark(new YMaps.GeoPoint(43.924617,56.333469), "Гостиница Стрелка"),
createPlacemark(new YMaps.GeoPoint(43.826198,56.311017), "Гостиница Трансэкспедитор"),
createPlacemark(new YMaps.GeoPoint(43.995629,56.325409), "Гостиница У Домика Петра"),
createPlacemark(new YMaps.GeoPoint(44.006004,56.3251), "Гостиница ГП Областной дом крестьянина"),
createPlacemark(new YMaps.GeoPoint(43.95233,56.317537), "Гостиница Дома артиста"),
createPlacemark(new YMaps.GeoPoint(44.030205,56.323847), "Гостиница НГЛУ им. Н. А. Добролюбова"),
createPlacemark(new YMaps.GeoPoint(43.864457,56.362207), "Гостиница ОАО Красное Сормово"),
createPlacemark(new YMaps.GeoPoint(43.974959,56.294955), "Гостиница учебно-методического центра Облсовпрофа"),
createPlacemark(new YMaps.GeoPoint(43.920907,56.329617), "Гостиница ФГУП ОКБ машиностроения им. И. И. Африкантова"),
createPlacemark(new YMaps.GeoPoint(43.825793,56.341533), "Гостиница ЧП Хажаев Р. Ж.")
                ], "default#campingIcon"),
                createGroup("Вокзалы", [
          createPlacemark(new YMaps.GeoPoint(43.945763,56.321621), "Московский вокзал"),
createPlacemark(new YMaps.GeoPoint(43.987903,56.329552), "Речной вокзал"),
createPlacemark(new YMaps.GeoPoint(43.981202,56.304545), "Автовокзал"),
createPlacemark(new YMaps.GeoPoint(43.950641,56.324631), "Автстанция Канавинская"),
createPlacemark(new YMaps.GeoPoint(44.041596,56.321711), "Автостанция Сенная")
                ], "default#trainIcon")
            ];
 
            // Создание списка групп
            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>

Посмотреть пример в действии.

В упоминаемой мной в начале поста, заметке API Яндекс.Карт Работаем с группой маркеров содержится еще один пример, когда параметры, свойства и координаты меток храниться в файлах формата YMapsML.

Используем фреймворк jQuery для отображения и скрытия файлов формата YMapsML на Яндекс.Карте

Учитывая то, что фреймворк jQuery уже встроен в API код данного примера будет иметь следующий вид:

<!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>Пример-3 Работаем с грпуппами объектов на Яндекс.Карте с использованием jQuery</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script src="http://api-maps.yandex.ru/1.1/?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script> 
<style> 
 
.link:hover
{
text-decoration: none;
}
.link
{
cursor: pointer;
text-decoration: underline;
}
 
 
 
#show_hotels {
    background: url('http://webmap-blog.ru/examples/Ris/hotels.jpg') no-repeat left center;
    padding: 8px 0 6px 45px;
    line-height: 30px;
    margin-bottom: 3px;
}
 
#show_kinoteatrs {
    background: url('http://webmap-blog.ru/examples/Ris/kinoteatrs.jpg') no-repeat left center;
    padding: 8px 0 6px 45px;
    line-height: 30px;
    margin: 3px 0;
}
 
#show_teatrs {
    background: url('http://webmap-blog.ru/examples/Ris/theatr.jpg') no-repeat left center;
    padding: 8px 0 6px 45px;
    line-height: 30px;
    margin: 3px 0;
}
 
#show_vokzals {
    background: url('http://webmap-blog.ru/examples/Ris/trans_main.jpg') no-repeat left center;
    padding: 8px 0 6px 45px;
    line-height: 30px;
    margin: 3px 0;
}
 
 
 
    </style> 
 
 <script type="text/javascript"> 
 
            var xml_path = 'http://webmap-blog.ru/xml/';
 
  // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 11);
 
            // Добавление элементов управления
            map.enableScrollZoom();
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.Zoom());
 
// Кинотеатры
var kinoteatrs = new YMaps.YMapsML(xml_path+'kinonn.xml');
YMaps.Events.observe(kinoteatrs, kinoteatrs.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
 
 
YMaps.jQuery("#show_kinoteatrs").toggle(function(){
map.addOverlay(kinoteatrs);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(kinoteatrs);
YMaps.jQuery(this).css("font-weight","normal");
});     
 
 
// Гостиницы
var hotels = new YMaps.YMapsML(xml_path+'hotelsnn.xml');
YMaps.Events.observe(hotels, hotels.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
 
 
YMaps.jQuery("#show_hotels").toggle(function(){
map.addOverlay(hotels);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(hotels);
YMaps.jQuery(this).css("font-weight","normal");
});
 
// Театры
var teatrs = new YMaps.YMapsML(xml_path+'teatrnn.xml');
YMaps.Events.observe(teatrs, teatrs.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
 
 
YMaps.jQuery("#show_teatrs").toggle(function(){
map.addOverlay(teatrs);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(teatrs);
YMaps.jQuery(this).css("font-weight","normal");
});     
 
// Вокзалы и автостанции
var vokzals = new YMaps.YMapsML(xml_path+'vokzalnn.xml');
YMaps.Events.observe(vokzals, vokzals.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
 
 
YMaps.jQuery("#show_vokzals").toggle(function(){
map.addOverlay(vokzals);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(vokzals);
YMaps.jQuery(this).css("font-weight","normal");
});     
 
 })
 
    </script> 
</head> 
 
<body> 
    <table border="0" cellspacing="5" cellpadding="5"> 
  <tr> 
    <td><div id="YMapsID" style="width:800px;height:600px"></div></td> 
    <td valign="top"> 
    <p><span id="show_kinoteatrs" class="link">Кинотеатры</span></p> 
    <p><span id="show_teatrs" class="link">Театры</span></p> 
    <p><span id="show_hotels" class="link">Гостиницы</span></p> 
    <p><span id="show_vokzals" class="link">Вокзалы и автостанции</span></p> 
</td> 
  </tr> 
  <tr> 
    <td colspan="2"><p><a href="/?p=255" title="API Яндекс.Карт Работаем с группой маркеров" target="_blank">Вернуться к тексту заметки</a></p></td> 
  </tr> 
</table> 
</body> 
 
</html>

Посмотреть пример в действии.

 

API Яндекс.Карт Работаем с группой маркеров – версия 2: 13 комментариев

  1. James

    Подскажите, как можно прикрутить древовидное меню с группами объектов. А так же в раскрывающейся информации разместить HTML код и картинки? Данные хранить в XML и использовать стандартные яндекс стили
    .

    Ответить ↓
  3. Сергей

    Да, очень хотелось бы узнать как можно «прикрутить» ссылки на группы объектов к динамическому выпадающему списку!
    Заранее благодарен!

    Ответить ↓
  5. Сергей

    Просто сказка , пробую , пробую себе поставить !

    Ответить ↓
  6. Сергей

    подскажите плиз, как в описание меток вставить место надписей код ? (а именно нужна картинка и ссылка)

    Ответить ↓
  7. Юрий

    Доброго времени суток, подскажите пожалуйста, как например можно в «Гостиница ЧП Хажаев Р. Ж.» изменить иконку на свою, а остальные иконки остались (т.е. изменить только несколько иконок, допустим в 2-3х кинотеатрах)?

    Ответить ↓
  8. ustus

    Всем привет. Кто знает как сделать эти ссылки со своим стилем. Т.е. вынести их в html?

    Ответить ↓
  9. rpo

    закрой тэг table в первых двух исходниках, а то я 2 часа голову ломал, чтож такой перекос в IE =)

    Ответить ↓
    1. admin Автор записи

      У Вас тут несколько ошибок:

      — строка 244 — вызывается не существующий скрипт;
      — строка 26 — нет файла со стилями;

      Еще вы подключаете библиотеку jQuery в строке 239 , она тоже может конфликтовать с API Яндекс.Карт, т.к. они используют у себя jQuery 1.3

      Ответить ↓
  11. Алексей

    Спасибо за ответ. Разобрался, все работает, как нужно. Переделал на новую версию.

    Ответить ↓
  12. Виктор

    Всем привет!Для начала хочу сказать, большое спасибо админу этого сайта, очень много раз помогали примеры с этого сайта. С яндекс картами работаю не давно, чуть подправил под себя этот пример. Сделал так что бы стиль меток можно было задавать отдельно, то есть не по группам, а каждой метке отдельно. Может не совсем красиво получилось. Вот пример:
    Изменил функцию
    // Создание метки
    function createPlacemark (point, name, description, st) {
    var placemark = new YMaps.Placemark(point, {style:st});
    placemark.name = name;
    placemark.description = description;

    return placemark
    }

    И при создании группы добавился один параметр

    createPlacemark(new YMaps.GeoPoint(44.041596,56.321711), «Автостанция Сенная» , » , «default#redSmallPoint» )
    Так же можно добавить надпись на метки
    Добавив эту строку в функции createPlacemark
    placemark.setIconContent(name);

    Ответить ↓

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *