среда, 3 августа 2011 г.

MVC. Поиск на карте средствами API Яндекс.Карт


Итак, у нас есть карта с кучей объектов, все работает, и все вроде бы прекрасно. Но объектов становится все больше, и ориентироваться в них все сложнее. Поэтому юзеру рано или поздно захочется воспользоваться хотя бы простеньким поиском. Вот и попробуем сделать простенький поиск по названию объекта. Для этого нам нужно окошко для ввода поискового слова, кнопка для запуска поиска и контейнер для списка найденных объектов (у нас это будет просто DropDownList). При выборе в списке найденных объектов какого-либо элемента на карте будет отображаться соответствующий балун. Все это будет сделано на чистом jQuery с использованием API YandexMaps.
Для начала создадим необходимые контролы (листинг 1).
Листинг 1 – Контролы для поиска
    <table>
        <tr>
            <td>
                @Html.Editor("findWord")
            </td>
            <td>
                <input type="button" value="Find" id="findButton" />
            </td>
        </tr>
        <tr>
            <td>
                @Html.DropDownList("ObjName", Enumerable.Empty<SelectListItem>())
            </td>
            <td>
            </td>
        </tr>
    </table>

Теперь пишем функцию поиска объектов по введенному слову (листинг 2).
Листинг 2 – jQuery – функция поиска
        // Функция для поиска объектов среди имеющихся на карте
        // по названию объекта и добавления их в список
        function getFindList() {
           
            // поисковая стркоа
            var searchName = document.getElementById('findWord').value.replace(new RegExp(' ', 'i'), '.+');

            // "регулярка" для поиска
            re = new RegExp(searchName, 'i');

            // произведем поиск
            var result = group["new"].filter(function (overlay) {

                var i = overlay.name.search(re);

                if (i != -1) {

                    return overlay.name;
                }
             });

            // ищем список
            var findChild = $('#ObjName');

            findChild.empty();

            // заполняем
            $.each(result, function (index, resultItem) {

                findChild.append($('<option/>', {

                    value: resultItem.name,

                    text: resultItem.name
                }));
            });
        };

Остановимся подробнее на этой функции. Сначала мы получаем наше искомое слово, попутно избавляясь от лишним пробелов в нем. Далее составляем регулярное выражение, по которому будет происходить поиск (подробнее ознакомиться с регулярными выражениями можно тут, ну и Google в помощь). Далее, используя полученную «регулярку», осуществляем поиск методом API Яндекс.Карт. В переменной result у нас будут объекты, названия которых удовлетворяет нашей поисковой строке. Далее уже знакомый код по добавлению найденных значений в выпадающий список. Осталось вызвать эту функцию при клике по кнопке поиска (листинг 3).
Листинг 3 – Вызов поиска при клике по кнопке
        $('#findButton').click(function () {

            getFindList();

        });

Мы получили список объектов, которые удовлетворяют поисковой строке (рисунок 1).

Рисунок 1 – Список найденных объектов

Идем дальше. Нам нужно снова осуществить поиск на карте, но теперь уже по найденным названиям объектов. И теперь совпадение имен должно быть стопроцентным, т.е. никаких регулярных выражений. И, кроме того, необходимо показывать соответствующий балун (листинг 4).
Листинг 4 – Отображение балуна найденного объекта
        // Функция для отображения объекта
        // из списка найденных
        function showObject() {

            var findChild = $('#ObjName');

            var searchName = findChild.val();

            var result = group["new"].filter(function (overlay) {
                return overlay.name == searchName; // Точное совпадение
            });

            if (result[0] != null) {
                result[0].openBalloon();
            }
        };

Думаю, тут все понятно. Осталось вызвать эту функцию при выборе элемента списка (листинг 5).
Листинг 5 – Отображение балуна объекта при выборе его в списке
        $('#ObjName').change(function () {

            showObject();

        });
Собственно, все! Удачи!


4 комментария:

Сергей комментирует...

Нашел интересную статью http://blogs.mis-russia.com/post/2011/07/12/asp-net-mvc3-google-analytics-yandex-metrika-html-helper.aspx
Может можно так же поступить с управляющими скриптами яндекс карты?

dedMazDie комментирует...

Можно попробовать конечно :)

Serge Froloff комментирует...

Доброго дня , а как можно переговорить с Вами по электронной почте? к сожалению наши админы считают все Гугловское запретным )))

dedMazDie комментирует...

yarmakin@gmail.com