Поиск и построение маршрутов
Примеры использования сервисов 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);