Создание простого редактора меток

В данной статье будет рассмотрен процесс создания простого редактора меток. Разрабатываемый редактор позволит осуществлять добавление и перемещение меток в заданную географическую точку, смену их внешнего вида и удаление. Также  редактор позволит формировать ссылки на созданные карты с метками.

Создаваемый редактор можно разбить на несколько обособленных частей, каждая из которых будет решать свой набор задач:

• PointsClicker – класс, предназначенный для создания и хранения меток;
• EditInterfaceLayout – интерфейс редактирования параметров метки, представляющий из себя макет для содержимого балуна;
• PointsManager – класс, позволяющий осуществлять экспорт информации о метках в строковое представление, а также обратное преобразование.

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

PointsClicker позволяет включать и выключать режим добавления новых меток с помощью методов  enable() и disable() соответственно.

При вызове метода enable() создается обработчик события Click на карте, который позволяет расставлять метки по щелчку мыши, а при вызове метода disable() – обработчик события Click удаляется.

// Класс для включения/выключения режима "Установка точек"
function PointsClicker (map) {
        // Группа меток, добавленных на карту
    var group = new YMaps.GeoObjectCollection(),
 
        // Слушатель щелчков по карте
        listenerClicker;
 
    // Добавление группы с метками на карту
    map.addOverlay(group);
 
    // Возвращает  группу с метками
    this.getGroup = function (){
        return group;
    };
 
    // Включает режим добавления меток
    this.enable = function () {
 
        // Создание слушателя щелчков по карте
        listenerClicker = YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
            var placemark =  this.createPoint(mEvent.getGeoPoint()
            placemark.openBalloon(
        }, this);
    };
 
    // Создает метку на карте
    this.createPoint = function (point, style)  {
        //
        // Создание новой метки
        //
    };
 
    // Выключает режим добавления меток
    this.disable = function () {
        listenerClicker.cleanup(
    }
}

Изначально PointsClicker не представляет визуальных средств для включения и выключения режима добавления новых меток. Поэтому создадим кнопку «Установка точек» на панели инструментов, которая позволит этот режим включать и выключать. Кнопку добавим к стандартной группе радиокнопок, а также зададим ей свой значок и всплывающую подсказку. За более подробной информацией о панеле инструментов обращайтесь в Руководство разработчика.

// Создание панели инструментов
var toolBar = new YMaps.ToolBar(
map.addControl(toolBar);
           
// Элемент управления "Добавление меток"
var clicker = new PointsClicker(map);
 
// Кнопка "Добавление меток"
var button = new YMaps.ToolBarRadioButton(YMaps.ToolBar.DEFAULT_GROUP, {
    icon : "http://api.yandex.ru/i/maps/tools/draw/add_point.png",
    width : 20,
    hint: "Установка точек"
}
toolBar.add(button);
 
// При активной кнопке включаем добавление меток
YMaps.Events.observe(button, button.Events.Select, function () {
    map.addCursor(YMaps.Cursor.POINTER);
    clicker.enable(
})
 
// При неактивной - выключаем
YMaps.Events.observe(button, button.Events.Deselect, function () {
    map.removeCursor(YMaps.Cursor.POINTER);
    clicker.disable(
})

Интерфейс редактирования параметров метки разместим в балуне, который будет отображаться при щелчке по метке. Реализуем его, используя механизм макетов и назовем EditorInterfaceLayout.  В контексте решаемой задачи макеты полезны тем, что позволяют выделить интерфейс редактирования в отдельную логическую единицу. Это даст возможность легко поменять интерфейс редактирования в случае необходимости.

Для создания макета, необходимо реализовать интерфейс YMaps.ILayout.

// Класс макета для содержимого балуна
function EditorInterfaceLayout (context, map, owner) {
    this.editorInterface = this.getEditorInterface(
    this.context = context;
}
 
EditorInterfaceLayout.prototype = {
   // Вызывается при открытии балуна
    onAddToParent : function (parentNode) {
        this.editorInterface.appendTo(parentNode);
        this.update(
    },
 
    // Вызывается при закрытии балуна
    onRemoveFromParent : function () {
        this.editorInterface.remove(
    },
 
    // Обновление содержимого балуна
    update : function () {
        //
        // В данном методе разместим обработчики интерфейса редактирования
        //
    },
 
    // Возвращает jQuery-объект интерфейса редактирования
    getEditorInterface : function () {
        //
        // Создание jQuery-объекта с интерфейсом редактирования
        //
    }
}

Класс PointsManager позволяет преобразовать координаты и описание меток, добавленных на карту с помощью PointsClicker, в строковое представление и обратно. Используя в качестве основы статью Формирование ссылки на фрагмент карты и данный класс, можно формировать ссылки на карту с нанесенными на нее метками.

Класс PointsManager имеет два метода fromString() и toString() с помощью которых и делаются вышеописанные преобразования.

// Класс для преобразования описаний меток в строковое представление и обратно
function PointsManager (clicker) {
 
    // Перевод из строки в объекты на карте
    this.fromString = function (str) {
        //
        // Код для перевода строки в объекты
        //
    };
 
    // Возвращает строку с описанием меток
    this.toString = function () {
        //
        // Код для перевода описаний объектов в строке
        //
    }
}

Окончательный пример можно посмотреть по адресу:

http://ymaps.narod2.ru/examples/mapeditor-simple.html 

В данной статье был рассмотрен процесс создания самого простого из возможных редакторов. Функциональность предложенного редактора можно легко расширить или изменить под свои конкретные нужды, например, добавить возможность редактирования для многоугольников и ломаных.