Клуб API Карт

Как скрыть метки на карте?

kuklachel
14 августа 2013, 17:44

  Добрый вечер. Подскажите, пожалуйста, как мне добавить на карту скрытые метки, сделать выделение многоугольником и показать только те метки, которые попали в выделенную область. Я делаю так:  

// Создание коллекций геообъектов
        myPointsCollection = new ymaps.GeoObjectCollection();
// Создаем многоугольник без вершин.
    var myPolygon = new ymaps.Polygon([], { pointColor: 'red' }, { strokeColor: "FF0000AA" });
        
myPolygon.options
.set({
    fill: false,
             draggable: false,
    // Курсор в режиме добавления новых вершин.
             editorDrawingCursor: "crosshair",
             // Максимально допустимое количество вершин.
             editorMaxPoints: 50,
             // Ширина обводки.
             strokeWidth: 5
    });
// Добавление меток в коллекцию
myPointsCollection
                .add(new ymaps.Placemark([55.647685, 37.196578]))
                .add(new ymaps.Placemark([55.578996, 37.094667]))
                .add(new ymaps.Placemark([55.484970, 37.737869]))
                .add(new ymaps.Placemark([55.892466, 37.834056]))
                .add(new ymaps.Placemark([55.045867, 37.967653]));
// Добавление полигона и коллекций геообъектов на карту
             myMap.geoObjects
                .add(myPointsCollection)
                .add(myPolygon);
// Выставляем границы карте, чтобы все точки были видны
    myMap.setBounds(myPointsCollection.getBounds());
// Включаем режим редактирования с возможностью добавления новых вершин.
    myPolygon.editor.startDrawing();
    // Проверяем попадание в него координат меток
            myPolygon.events.add('editorstatechange', function (e) {
                // Получаем ссылку на текущий геообъект
                var geoObject = e.get('target'),
                    color = geoObject.properties.get('pointColor');
                // Проверяем попадание в область геометрии геообъекта всех точек из коллекции
                myPointsCollection.each(function (point) {
                    if(geoObject.geometry.contains(point.geometry.getCoordinates())) {
                        point.options.set('preset', 'twirl#' + color + 'Icon');
}
                    else {
                        point.options.unset('preset');

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

9 комментариев
Подписаться на комментарии к посту

Как-то так: http://jsfiddle.net/zloylos/uvpv3/5/

Обязательно почитайте про GeoQuery здесь и здесь. Очень упростит жизнь в подобных задачах.

Спасибо

Большое спасибо!

Скажите, а вместо событий ['statechange','vertexadd'] можно показывать метки при нажатии кнопки?

да, просто нужно слушать клик на кнопке (с помощью jquery, например) и произвести те же действия.

Ясно, спасибо за столь полные ответы.

Доброе утро. Возник еще один вопрос, подскажите пожалуйста. Мне нужно к меткам на карте добавить  балун и хинт. Если я это делаю стандартным способом: 

geoObjects = new ymaps.Placemark([55.755546, 37.654538], {

            balloonContent: 'Name',

            hintContent: 'Adr',

    balloonContentFooter: 'Cont'

        });

то при отображении карты не включается рисование многоугольника. В описании GeoQuery я , к сожалению, не нашел как это сделать.

Все, вопрос снят). Я добавил:

result

 .setProperties('balloonContent', 'Name')

.setProperties('hintContent', 'Descr')

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

Если сделать так:

function AddPlacemark (Name, Descr, Cont, Att, Latt, Params){ 

        geoObjects = new ymaps.Placemark([55.755546, 37.654538], {             

        });

        result = ymaps.geoQuery(geoObjects);

    

    result

   // Содержимое иконки, балуна, хинта и подвала.

   .setProperties('balloonContent', Name)

.setProperties('hintContent', Descr)

.setProperties('balloonContentFooter', Cont)

        // Добавляем геообъекты на карту.

        .addToMap(myMap)

        // Указываем пресет.

        .setOptions('preset', 'twirl#houseIcon')

        // Скрываем все элементы.

        .setOptions('visible', false)

        // Выставляем bounds так, чтобы все объекты вместились.

        .applyBoundsToMap(myMap);

 

    // Добавляем полигон на карту.

    myMap.geoObjects.add(myPolygon);

    

    myPolygon.editor.startDrawing();

    myPolygon.editor.events.add(['editorstatechange','vertexadd'], function () {

        result

            // Скрываем все наши элементы.

            .setOptions('visible', false)

            // Ищем пересечения. Метод вернет новую выборку.

            .searchIntersect(myPolygon)

            // Убираем опцию visilbe у элементов выборки.

            .unsetOptions('visible') 

    });

return myPlacemark;

}

то снова не отрабатывает рисование многоугольника. Помогите, пожалуйста.

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

Всё же есть такие вещи как ООП, паттерны проектирования и т.п.

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