0

У меня создано 2 objectManager : placeObject и iconObject Нужно сделать контрол поиска, который будет искать в 2х менеджерах по пункту balloonContentHeader, и при выборе центр карты будет перемещен на найденную в поиске иконку. К поиску нужно еще добавить suggest подсказки, взятые так же из balloonContentHeader. В песочнице яндекса лежит пример, но там подсказки не прикручены к поиску, а сам поиск выполняется по коллекции, а не по objectManager. Пример из песочницы я вписал в свой код, но не пойму, как заменить поиск по коллекции на поиск по objectManager

Собрал минимальный пример на jsfiddle http://jsfiddle.net/LYGiraffe/wLk3pbrk/46/

    ymaps.ready(init);

function init () {
    var map = new ymaps.Map('map', {
            center: [55.76, 37.64],
            zoom: 10,
            controls: ['zoomControl']
        });


         var iconData = {
    "type": "FeatureCollection",
    "features": [
         {"type": "Feature", "id": 1, "geometry": {"type": "Point", "coordinates": [55.8, 37.54]}, "properties": { "level": "1 Этаж", "hintContent": "Place 1", "balloonContentHeader": "Place 1"}, "options": {"preset": "islands#redCircleDotIcon", hideIconOnBalloonOpen: false}},

        {"type": "Feature", "id": 2, "geometry": {"type": "Point", "coordinates": [55.8, 37.64]}, "properties": { "level": "2 Этаж", "hintContent": "Place 2", "balloonContentHeader": "Place 2"}, "options": {"preset": "islands#violetCircleDotIcon", hideIconOnBalloonOpen: false}},

        {"type": "Feature", "id": 3, "geometry": {"type": "Point", "coordinates": [55.8, 37.74]}, "properties": {"level": "3 Этаж", "hintContent": "Place 3", "balloonContentHeader": "Place 3"}, "options": {"preset": "islands#blueCircleDotIcon", hideIconOnBalloonOpen: false}}
         ]}

    var placesData = {
    "type": "FeatureCollection",
    "features": [
         {"type": "Feature", "id": 4, "geometry": {"type": "Point", "coordinates": [55.76, 37.54]}, "properties": { "level": "4 Этаж", "hintContent": "Place 4", "balloonContentHeader": "Place 4"}, "options": {"preset": "islands#blackCircleDotIcon", hideIconOnBalloonOpen: false}},

        {"type": "Feature", "id": 5, "geometry": {"type": "Point", "coordinates": [55.76, 37.64]}, "properties": { "level": "5 Этаж", "hintContent": "Place 5", "balloonContentHeader": "Place 5"}, "options": {"preset": "islands#pinkCircleDotIcon", hideIconOnBalloonOpen: false}},

        {"type": "Feature", "id": 6, "geometry": {"type": "Point", "coordinates": [55.76, 37.74]}, "properties": {"level": "6 Этаж", "hintContent": "Place 6", "balloonContentHeader": "Place 6"}, "options": {"preset": "islands#yellowCircleDotIcon", hideIconOnBalloonOpen: false}}
         ]}


       var objectManager = new ymaps.ObjectManager();
    objectManager.add(placesData);
    map.geoObjects.add(objectManager);

    var iconObjectManager = new ymaps.ObjectManager();
    objectManager.add(iconData);
    map.geoObjects.add(iconObjectManager);

    //Создаем коллекцию, для примера

     myCollection = new ymaps.GeoObjectCollection(),
    // Создаем массив с данными.
        myPoints = [
            { coords: [55.7, 37.54], text: 'Place 7' },
            { coords: [55.7, 37.64], text: 'Place 8' },
            { coords: [55.7, 37.74], text: 'Place 9' },

        ];

    // Заполняем коллекцию данными.
    for (var i = 0, l = myPoints.length; i < l; i++) {
        var point = myPoints[i];
        myCollection.add(new ymaps.Placemark(
            point.coords, {
                balloonContentBody: point.text
            }
        ));
    }

    // Добавляем коллекцию меток на карту.
    map.geoObjects.add(myCollection);

    // Создаем экземпляр класса ymaps.control.SearchControl
    var mySearchControl = new ymaps.control.SearchControl({
        options: {
            // Заменяем стандартный провайдер данных (геокодер) нашим собственным.
            provider: new CustomSearchProvider(myPoints),
            // Не будем показывать еще одну метку при выборе результата поиска,
            // т.к. метки коллекции myCollection уже добавлены на карту.
            noPlacemark: true,
            resultsPerPage: 5
        }});

    // Добавляем контрол в верхний правый угол,
    map.controls
        .add(mySearchControl, { float: 'right' });
}


// Провайдер данных для элемента управления ymaps.control.SearchControl.
// Осуществляет поиск геообъектов в по массиву points.
// Реализует интерфейс IGeocodeProvider.
function CustomSearchProvider(points) {
    this.points = points;
}

// Провайдер ищет по полю text стандартным методом String.ptototype.indexOf.
CustomSearchProvider.prototype.geocode = function (request, options) {
    var deferred = new ymaps.vow.defer(),
        geoObjects = new ymaps.GeoObjectCollection(),
    // Сколько результатов нужно пропустить.
        offset = options.skip || 0,
    // Количество возвращаемых результатов.
        limit = options.results || 20;

    var points = [];
    // Ищем в свойстве text каждого элемента массива.
    for (var i = 0, l = this.points.length; i < l; i++) {
        var point = this.points[i];
        if (point.text.toLowerCase().indexOf(request.toLowerCase()) != -1) {
            points.push(point);
        }
    }
    // При формировании ответа можно учитывать offset и limit.
    points = points.splice(offset, limit);
    // Добавляем точки в результирующую коллекцию.
    for (var i = 0, l = points.length; i < l; i++) {
        var point = points[i],
            coords = point.coords,
                    text = point.text;

        geoObjects.add(new ymaps.Placemark(coords, {
            name: text + ' name',
            description: text + ' description',
            balloonContentBody: '<p>' + text + '</p>',
            boundedBy: [coords, coords]
        }));
    }

    deferred.resolve({
        // Геообъекты поисковой выдачи.
        geoObjects: geoObjects,
        // Метаинформация ответа.
        metaData: {
            geocoder: {
                // Строка обработанного запроса.
                request: request,
                // Количество найденных результатов.
                found: geoObjects.getLength(),
                // Количество возвращенных результатов.
                results: limit,
                // Количество пропущенных результатов.
                skip: offset
            }
        }
    });

    // Возвращаем объект-обещание.
    return deferred.promise();

}

1 ответ 1

1

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

http://jsfiddle.net/wLk3pbrk/62/

new CustomSearchProvider([objectManager, iconObjectManager])

В примере передал в провайдер массив objectManager-ов и внутри провайдера сделал поиск по их объектам по свойству balloonContentHeader

6
  • Спасибо! Все работает! Столкнулся еще с такой проблемой: открытие балуна метки после поиска. Использую такой код mySearchControl.events.add('resultselect', function(e) { var index = e.get('index'); mySearchControl.getResult(index).then(function (res) { geoObjects.balloon.open(); }); }); Где поправить? Commented 17 мар. 2018 в 17:36
  • попробуй так mySearchControl.events.add('resultselect', function(e) { var index = e.get('index'); mySearchControl.getResult(index).then(function (res) { myMap.balloon.open(res.geometry.getCoordinates(), "Содержимое балуна", {}); }); }); Commented 17 мар. 2018 в 18:41
  • только мне нужно открывать уже готовый балун из моего objectManager, а не собирать новый Commented 17 мар. 2018 в 19:32
  • Денис Степанов, разобрался, да, это работает, спасибо! Commented 18 мар. 2018 в 15:59
  • Скажите по вашему примеру, почему когда указываешь вот так provider: new CustomSearchProvider(objectManager), то есть только один objectManager, то ничего не находит? Commented 10 февр. 2019 в 13:24

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.