Поиск и построение маршрутов

Создание формы поиска

Пример иллюстрирует взаимодействие с геокодером посредством JavaScript.

Страница с примером содержит простую HTML-форму с полем для ввода адреса (или его части) и кнопкой "Искать". При нажатии на кнопку производится поиск координат точки, соответствующей запрошенному адресу. Если поиск завершился успешно, то в соответствующей точке на карте появляется балун с полным почтовым адресом объекта.

Чтобы создать форму поиска выполните следующие шаги:

  1. Создайте HTML-страницу с формой для ввода адреса и картой, на которой будет показываться результат геокодирования:
    <form action="#" onsubmit="showAddress( this.address.value );return false;">
        <p>
            <input id="address" style="width:725px;" value="Москва" />
            <input type="submit" value="Искать" />
        </p>
        
        <div id="YMapsID" style="height:400px; width:800px;"></div>
    </form>
  2. Создайте функцию showAddress(), которая будет принимать введенный адрес, отправлять запрос к геокодеру и в случае, если адрес нашелся, указывать его на карте с помощью балуна:
    // Функция для отображения результата геокодирования на карте
    // Параметр value - адрес объекта для поиска
    function showAddress (value) {
        // Удаляет результат предыдущего поиска
        map.removeOverlay(geoResult);
    
        // Запускает процесс геокодирования
        var geocoder = new YMaps.Geocoder(value, {results: 1, boundedBy: map.getBounds()});
    
        // Создает обработчик успешного завершения геокодирования
        YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {
            // Если объект найден, добавляет его на карту
            // и устанавливает центр карты в центр области показа объекта
            if (this.length()) {
                geoResult = this.get(0);
                map.addOverlay(geoResult);
                map.setBounds(geoResult.getBounds());
            }else {
                alert("Ничего не найдено")
            }
        });
    
        // Процесс геокодирования завершен с ошибкой
        YMaps.Events.observe(geocoder, geocoder.Events.Fault, function (gc, error) {
            alert("Произошла ошибка: " + error);
        })
    }

Для обращения к созданной функции используйте, например, следующую ссылку:

<a href="javascript:showAddress('Москва, ул.Самокатная, д.1., стр.21')">Москва, ул.Самокатная, д.1., стр.21</a>

Открыть пример в новом окне

Создание инструмента "Информация"

Инструмент "Информация" - это элемент управления, позволяющий по координатам щелчка мыши пользователя определить почтовый адрес объекта (или ближайший к нему адрес). Инструмент размещен на странице maps.yandex.ru.

В примере ниже показано, как создать аналог инструмента "Информация", используя объект JavaScript API YMaps.Geocoder.

  1. Создайте элемент управления InformationControl,, который будет включать/выключать инструмент. Для этого реализуйте интерфейс YMasp.IControl:
    // Элемент управления "Информация"
    function InformationControl () {
       // Вызывается при добавлении элемента управления на карту
       this.onAddToMap = function (parentMap) {}
    
       // Вызывается при удалении элемента управления с карты
       this.onRemoveFromMap = function () {}
    }
  2. Реализуйте внутреннюю логику работы элемента управления.

    При добавлении элемента управления на карту создается обработчик щелчка мыши. По щелчку на карту добавляется метка с координатами места щелчка и результат геокодирования этих координат:

    // Вызывается при добавлении элемента управления на карту
    this.onAddToMap = function (parentMap) {
        map = parentMap;
    
        map.addCursor(YMaps.Cursor.HELP);
    
        // Создает обработчик щелчка мыши по карте
        listener = YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
            // Координаты щелчка мыши
            var clickPoint  = mEvent.getGeoPoint();
    
            // Удаляет предыдущие результаты поиска (если были добавлены на карту)
            if (geoResult) {
                map.removeOverlay(geoResult);
                result = null;
            }
    
            if (clickPlace) {
                map.removeOverlay(clickPlace);
                clickPlace = null;
            }
    
            // Отмечает точку, по которой щелкнул пользователь
            clickPlace = new YMaps.Placemark(clickPoint, {style: anchorStyle});
            clickPlace.description = clickPoint.toString();
            map.addOverlay(clickPlace);
    
            // Запускает процесс геокодирования
            this.geocode(clickPoint);
        }, this);
    }
  3. Создайте метод geocode(), который будет запускать процесс геокодирования и добавлять результат на карту. В методе создайте обработчики событий геокодера Load и Fault, в которых будет происходить обработка результатов поиска (в частности, включаться обработчики щелчков мыши по карте).

    При успешном завершении геокодирования наиболее релевантный результат добавляется на карту (если он был найден с помощью метода getResult()).

    // Геокодирует координаты щелчка мыши по карте
    this.geocode = function (clickPoint) {
        // Выключает обработчики событий, чтобы создать не более одного запроса к геокодеру
        // (по окончании геокодирования обработчик включается вновь)
        listener.disable();
    
        // Запуск процесса геокодирования
        var geocoder = new YMaps.Geocoder(clickPoint);
    
        // Обработчик успешного завершения геокодирования
        YMaps.Events.observe(geocoder, geocoder.Events.Load, function (geocoder) {
            // Получение результата поиска
            geoResult = this.getResult(geocoder);
    
            if (geoResult) {
                // Добавляет на карту результат геокодирования и открывает балун
                map.addOverlay(geoResult);
                geoResult.openBalloon();
            } else {
                alert("Ничего не найдено!");
            }
    
            // Включает обработчик щелчка мыши по карте
            listener.enable();
        }, this);
    
        // Обработчик неудачного геокодирования
        YMaps.Events.observe(geocoder, geocoder.Events.Fault, function (geocoder, err) {
            alert("Произошла ошибка при геокодировании: " + err);
    
            // Включает обработчик щелчков мыши по карте
            listener.enable();
        });
    }
  4. Создайте метод getResult(), который будет возвращать результат геокодирования с различной точностью, в зависимости от текущего коэффициента масштабирования.
     // Возвращает результат геокодирования с точностью, зависящей от масштаба
    this.getResult = function (geocoder) {
       // Точность: город, страна
       function isOther (result) {
           return result.precision == "other";
       }
    
       // Точность: улица
       function isStreet (result) {
           return result.precision == "street";
       }
    
       // Точность: дом
       function isHouse (result) {
           return !isOther(result) && !isStreet(result);
       };
    
       // Выбирает точность поиска
       var filter = isHouse;
       if (map.getZoom() < 10) {
           filter = isOther;
       } else if (map.getZoom() < 15) {
           filter = isStreet;
       }
    
       // Возвращает первый найденный результат с необходимой точностью
       return geocoder.filter(filter)[0];
    }
  5. Создайте экземпляр класса InformationControl(см. шаг 1), а также добавьте на тулбар кнопку включения/выключения созданного элемента управления.
    // Создает экземпляр элемента управления "Информация"
    var informationControl = new InformationControl();
    
    // Создает кнопку тулбара
    // Добавляет кнопку в стандартную группу кнопок тулбара
    var buttonInformation = new YMaps.ToolBarRadioButton(YMaps.ToolBar.DEFAULT_GROUP, {
       caption: "Информация"
    });
    
    // Включает/выключает инструмент "Информация"
    YMaps.Events.observe(buttonInformation, buttonInformation.Events.Select, function () {
       map.addControl(informationControl);
    });
    
    YMaps.Events.observe(buttonInformation, buttonInformation.Events.Deselect, function () {
       map.removeControl(informationControl);
    });
    
    // Добавляет элемент управления на карту
    var toolBar = new YMaps.ToolBar();
    toolBar.add(buttonInformation);
    map.addControl(toolBar);

Открыть пример в новом окне