Создание пользовательских объектов
Чтобы создать объект-оверлей используйте класс 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;
}