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(); }); }); Где поправить? 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(), "Содержимое балуна", {}); }); }); 17 мар 2018 в 18:41
  • только мне нужно открывать уже готовый балун из моего objectManager, а не собирать новый 17 мар 2018 в 19:32
  • Денис Степанов, разобрался, да, это работает, спасибо! 18 мар 2018 в 15:59
  • Скажите по вашему примеру, почему когда указываешь вот так provider: new CustomSearchProvider(objectManager), то есть только один objectManager, то ничего не находит? 10 фев 2019 в 13:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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