Объекты на карте

Как создать меню с помощью элемента управления
Как изменить отображение ломаной
Управление группами объектов с помощью меню

Как создать меню с помощью элемента управления
Как изменить отображение ломаной
Управление группами объектов с помощью меню

Как создать меню с помощью элемента управления

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

Чтобы создать "Путеводитель по офисам" выполните следующие шаги:

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

// Создает группу меток, обозначающих положение офисов Яндекса на карте
var group = new YMaps.GeoObjectCollection();
group.add(createPlacemark(new YMaps.GeoPoint(37.678514, 55.758255), 'Москва (Самокатная)', 'Москва, ул. Самокатная, дом 1, строение 21'));
// ...
// остальные метки опущены для краткости (см. исходный код примера)

// Добавляет группу меток на карту
map.addOverlay(group);

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

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

    return placemark;
}

Создайте заготовку для будущего элемента согласно интерфейсу YMaps.IControl.

// Управляющий элемент "Путеводитель по офисам"
function OfficeNavigator (offices) {

    // Обработчик добавления элемента на карту
    this.onAddToMap = function (map, position) {
        // Действия при добавлении элемента на карту
    }

    // Обработчик удаления элемента с карты
    this.onRemoveFromMap = function () {
        // Действия при удалении элемента с карты
    };
}

Определите обработчики для двух методов класса YMaps.IControl: onAddToMap(), вызываемого при добавлении элемента управления на карту и onRemoveFromMap(), вызываемого при удалении элемента.

В метод onAddToMap() передается указатель на карту и расположение элемента управления на карте (в примере - верхний правый угол). Для указания расположения элементов управления используйте класс [!TITLE ../../ref/reference/controlposition.md]:

// Действия при добавлении элемента на карту
this.onAddToMap = function (map, position) {
        this.container = YMaps.jQuery("<ul></ul>")
        this.map = map;
        this.position = position || new YMaps.ControlPosition(YMaps.ControlPosition.TOP_RIGHT, new YMaps.Size(10, 10));

        // CSS-свойства, определяющие внешний вид элемента
        this.container.css({
            position: "absolute",
            zIndex: YMaps.ZIndex.CONTROL,
            background: '#fff',
            listStyle: 'none',
            padding: '10px',
            margin: 0
        });
        
        // Формирует список офисов
        this._generateList();
        
        // Располагает элемент управления в верхнем правом углу карты
        this.position.apply(this.container);
        
        // Добавляет элемент управления на карту
        this.container.appendTo(this.map.getContainer());
}

При вызове метода onRemoveFromMap() необходимо удалить созданный элемент управления с карты и обнулить значения созданных полей:

// Обработчик удаления элемента управления с карты
this.onRemoveFromMap = function () {
    if (this.container.parent()) {
        this.container.remove();
        this.container = null;
    }
    this.map = null;
};

Реализуйте внутреннюю логику работы элемента управления и создайте обработчики для всех связанных с ним событий.

По щелчку на элементе списка, карта будет плавно сдвигаться в точку положения выбранного офиса и открывать балун.

// Формирует выпадающий список офисов
this._generateList = function () {
    var _this = this;
    
    // Вызывает функцию-обработчик для каждого объекта
    offices.forEach(function (obj) {
        // Создает ссылку на объект
        var li = YMaps.jQuery("<li><a href=\"#\">" + obj.name + "</li>"),
            a = li.find("a"); 
        
        // Создает обработчик щелчка мыши по ссылке
        li.bind("click", function () {
            _this.map.panTo(obj.getGeoPoint(), {
                flying: 1,
                callback: function () {
                    obj.openBalloon();
                }
            });
            return false;
        });
        
        // Создает слушатели событий открытия и закрытия балуна объекта
        YMaps.Events.observe(obj, obj.Events.BalloonOpen, function () {
            a.css("text-decoration", "none");
        });
        
        YMaps.Events.observe(obj, obj.Events.BalloonClose, function () {
            a.css("text-decoration", "");
        });
        
        // Добавляет ссылку на объект в общий список
        li.appendTo(_this.container);
    });
};

Создайте и добавьте элемент управления на карту.

// Создает элемент управления "Путеводитель по офисам"
map.addControl(new OfficeNavigator(group));

Открыть пример в новом окне

Узнайте больше

Создание пользовательских элементов управления

Как изменить отображение ломаной

Пример ниже создает ломаную, отрезки которой имеют направление (ломаную-вектор). Направление отображается стрелками, что удобно при отображении маршрутов.

Класс ломаной-вектора наследуется от стандартного класса ломаной YMaps.Polyline и переопределяет только необходимые методы.

Стрелки имеют треугольную форму и отрисовываются с помощью многоугольников определенного стиля.

Острие стрелки располагается в центре каждого отрезка ломаной, а ее основание отстоит от центра отрезка на фиксированное количество пикселов (в зависимости от длины ломаной).

Чтобы создать ломаную-вектор, выполните следующие действия:

Реализуйте функцию, производящую наследование без исполнения родительского конструктора.

Например, с помощью функции extend():
```
function extend (child, parent) {
    var c = function () {};
    c.prototype = parent.prototype;
    c.prototype.constructor = parent;
    return child.prototype = new c();
};
```

Переопределите следующие методы интерфейса YMaps.IOverlay: onAddToMap(), onRemoveFromMap() и onMapUpdate().

Примечание

Чтобы сохранить функциональность ломаной, в переопределенных методах необходимо вызывать методы родительского класса.

function PolylineWithArrows (points, options) {
    // Вызывает родительский конструктор
    YMaps.Polyline.call(this, points, options);

    // Вызывается при добавлении объекта на карту
    this.onAddToMap = function (map, mapContainer) {
        YMaps.Polyline.prototype.onAddToMap.call(this, map);
    }

    // Вызывается при удалении объекта с карты
    this.onRemoveFromMap = function () {
        YMaps.Polyline.prototype.onRemoveFromMap.call(this);
    }

    // Вызывается при обновлении карты
    this.onMapUpdate = function () {
        YMaps.Polyline.prototype.onMapUpdate.call(this);
    }
}
extend(PolylineWithArrows, YMaps.Polyline);

Создайте группу для хранения стрелок (многоугольников) и добавьте обработчик события перерисовки ломаной.

Все стрелки хранятся в группе. Для перерисовки стрелок после каждого обновления линии обрабатывается событие ломаной PositionChange. Указатель на это событие хранится в переменной listener.
```
function PolylineWithArrows (points, options) {
    // Вызов родительского конструктора
    YMaps.Polyline.call(this, points, options);

    // Группа, в которой содержатся стрелки
    var arrows = new YMaps.GeoObjectCollection(this.getComputedStyle()),
    
        // Обработчик событий ломаной
        listener;
    ...
```

Добавьте действия, необходимые для отрисовки стрелок при добавлении, обновлении или удалении ломаной с карты.

При добавлении на карту создается обработчик события PositionChange, затем группа стрелок добавляется на карту и стрелки отрисовываются. При обновлении карты обновляются и стрелки. При удалении ломаной с карты удаляются и стрелки, и обработчик события PositionChange.

...
// Вызывается при добавлении объекта на карту
this.onAddToMap = function (map, mapContainer) {
    YMaps.Polyline.prototype.onAddToMap.call(this, map);
    
    // Перерисовывает стрелки при изменении позиции вершины ломаной
    listener = YMaps.Events.observe(this, this.Events.PositionChange, function () {
        this.updateArrows();
    }, this);
    
    // Добавляет группу стрелок на карту
    map.addOverlay(arrows);

    // Обновляет стрелки
    this.updateArrows();
}

// Вызывается при удалении ломаной с карты
this.onRemoveFromMap = function () {
    // Удаляет стрелки с карты
    this.getMap().removeOverlay(arrows);

    // Удаляет ломаную с карты
    YMaps.Polyline.prototype.onRemoveFromMap.call(this);

    // Удаляет обработчик событий
    listener.cleanup();
}

// Вызывается при обновлении карты
this.onMapUpdate = function () {
    // Обновляет ломаную на карте
    YMaps.Polyline.prototype.onMapUpdate.call(this);

    // Перерисовывает стрелки
    this.updateArrows();
}
...

Открыть пример в новом окне

Узнайте больше

Ломаная

Пример демонстрирует как создать элемент управления в виде меню, позволяющий добавлять и скрывать группы объектов с карты.

Реализуйте две вспомогательные функции: для создания отдельной метки и группы меток.

В функцию создания метки передаются координаты точки, к которой должна быть привязана метка, ее имя и описание:
```
// Создает метку
function createPlacemark (point, name, description) {
    var placemark = new YMaps.Placemark(point);

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

    return placemark
}
```
В функцию создания группы меток передается название группы (так же будет называться соответствующий пункт меню), массив меток и стиль группы.
```
// Создает группу меток
function createGroup (title, objects, style) {
    var group = new YMaps.GeoObjectCollection(style);

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

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

// Создает группы меток
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"),
    ...
];

Реализуйте функцию addMenuItem, добавляющую отдельный пункт меню в список.

// Добавляет отдельный пункт меню
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)
        )
};

Сформируйте меню.

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

Открыть пример в новом окне

Объекты на карте

Как создать меню с помощью элемента управленияКак создать меню с помощью элемента управления

Узнайте большеУзнайте больше

Как изменить отображение ломанойКак изменить отображение ломаной

Узнайте большеУзнайте больше

Управление группами объектов с помощью менюУправление группами объектов с помощью меню

Была ли статья полезна?

Как создать меню с помощью элемента управления

Узнайте больше

Как изменить отображение ломаной

Узнайте больше

Управление группами объектов с помощью меню