Создание пользовательских объектов

Чтобы создать объект-оверлей используйте класс YMaps.IOverlay. В пользовательской функции необходимо определить обработчики для трех методов класса: onAddToMap(), onRemoveFromMap() и onMapUpdate().

Пример ниже создает класс простой метки SimpleOverlay:

// Класс пользовательского оверлея-метки, реализующий класс YMaps.IOverlay
function SimpleOverlay (geoPoint, name, link) {
    var map, _this = this, offset = new YMaps.Point(-10, -29);

    // Вызывается при добавления метки на карту 
    this.onAddToMap = function (pMap, parentContainer) {
        map = pMap;
        getElement().appendTo(parentContainer);
        this.onMapUpdate();
    };

    // Вызывается при удаление метки с карты
    this.onRemoveFromMap = function () {
        if (getElement().parent()) {
            getElement().remove();
        }
    };

    // Вызывается при обновлении карты
    this.onMapUpdate = function () {
        // Смена позиции оверлея
        var position = map.converter.coordinatesToMapPixels(geoPoint).moveBy(offset);
        getElement().css({
            left : position.x,
            top :  position.y
        })
    };

    // Метод открывает балун
    this.openBalloon = function () {
        // Делает активной ссылку, связанную с меткой
        link.addClass("active");

        // Скрывает метку
        getElement().css("display", "none");

        // Открывает балун, при закрытии балуна возвращает первоначальный вид метки
        map.openBalloon(geoPoint, name, {onClose: function () {
            link.removeClass("active");
            getElement().css("display", "");
        }});
    };

    // Получает ссылку на DOM-узел метки
    function getElement () {
        var element = YMaps.jQuery("<div class=\"overlay\"/>");

        // Устанавливает z-index (такой же, как у метки)
        element.css("z-index", YMaps.ZIndex.Overlay);

        // Открывает балун по щелчку кнопкой мыши по метке
        element.bind("click", function () {
            _this.openBalloon();
        });

        // Переопределяет метод после первого вызова,
        // чтобы не создавать DOM-узел дважды 
        return (getElement = function () {return element})();
    }
}

Следующий пример отображает на карте железнодорожные вокзалы Москвы с помощью меток класса SimpleOverlay. По щелчку кнопкой мыши на метке открывается балун с названием вокзала.

Метки создаются с помощью функции, которая, кроме создания нового объекта, создает на него ссылку и добавляет в контейнер новый пункт меню:

// Функция создает метку и ссылку на метку
// station - объект со следующими полями: координаты (point), название (name)
function createOverlay (station)  {
    var link = YMaps.jQuery("<a href=\"#\">" + station.name + "</a>"), // Создание ссылки
        newOverlay = new SimpleOverlay(station.point, station.name, link); // Создание оверлея

    // Прикрепляет обработчик щелчка мыши по ссылке
    link
        .bind("click", function () {
            if (link.hasClass("active")) return;
            newOverlay.openBalloon();
            return false;
        })
        .appendTo(YMaps.jQuery("#links"))

    return newOverlay;
}

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