API Яндекс.Карт. Статьи: Поиск и построение маршрутов

Примеры использования сервисов API:

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

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

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

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

Создайте 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>

Создайте функцию 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.

Создайте элемент управления InformationControl,, который будет включать/выключать инструмент. Для этого реализуйте интерфейс YMasp.IControl:

// Элемент управления "Информация"
function InformationControl () {
   // Вызывается при добавлении элемента управления на карту
   this.onAddToMap = function (parentMap) {}

   // Вызывается при удалении элемента управления с карты
   this.onRemoveFromMap = function () {}
}

Реализуйте внутреннюю логику работы элемента управления.

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

// Вызывается при добавлении элемента управления на карту
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);
}

Создайте метод 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();
    });
}

Создайте метод 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];
}

Создайте экземпляр класса 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);

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

API Карт:

JavaScript API 1.x

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

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

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