Версия:
Популярные примеры
Карта
Геообъекты
Балун и хинт
Элементы управления
Активные области
Кластеризация
GeoQuery
Поведения и события
Поиск по карте
Пробки
Местоположение пользователя
Маршрутизация
YMapsML
GeoXML
ObjectManager
Модульная система
Панорамы
Внешние модули

Проверка при вводе адреса доставки

Сохранить как файлыЭкспорт на JSFiddle

Пример показывает, как использовать поисковые подсказки и геокодер для создания поля ввода адреса на сайте.

API позволяет проверить, что введённый адрес существует, записан с нужной полнотой и без опечаток.

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

\n\n","input_validation.js":"ymaps.ready(init);\n\nfunction init() {\n // Подключаем поисковые подсказки к полю ввода.\n var suggestView = new ymaps.SuggestView('suggest'),\n map,\n placemark;\n\n // При клике по кнопке запускаем верификацию введёных данных.\n $('#button').bind('click', function (e) {\n geocode();\n });\n\n function geocode() {\n // Забираем запрос из поля ввода.\n var request = $('#suggest').val();\n // Геокодируем введённые данные.\n ymaps.geocode(request).then(function (res) {\n var obj = res.geoObjects.get(0),\n error, hint;\n\n if (obj) {\n // Об оценке точности ответа геокодера можно прочитать тут: https://tech.yandex.ru/maps/doc/geocoder/desc/reference/precision-docpage/\n switch (obj.properties.get('metaDataProperty.GeocoderMetaData.precision')) {\n case 'exact':\n break;\n case 'number':\n case 'near':\n case 'range':\n error = 'Неточный адрес, требуется уточнение';\n hint = 'Уточните номер дома';\n break;\n case 'street':\n error = 'Неполный адрес, требуется уточнение';\n hint = 'Уточните номер дома';\n break;\n case 'other':\n default:\n error = 'Неточный адрес, требуется уточнение';\n hint = 'Уточните адрес';\n }\n } else {\n error = 'Адрес не найден';\n hint = 'Уточните адрес';\n }\n\n // Если геокодер возвращает пустой массив или неточный результат, то показываем ошибку.\n if (error) {\n showError(error);\n showMessage(hint);\n } else {\n showResult(obj);\n }\n }, function (e) {\n console.log(e)\n })\n\n }\n function showResult(obj) {\n // Удаляем сообщение об ошибке, если найденный адрес совпадает с поисковым запросом.\n $('#suggest').removeClass('input_error');\n $('#notice').css('display', 'none');\n\n var mapContainer = $('#map'),\n bounds = obj.properties.get('boundedBy'),\n // Рассчитываем видимую область для текущего положения пользователя.\n mapState = ymaps.util.bounds.getCenterAndZoom(\n bounds,\n [mapContainer.width(), mapContainer.height()]\n ),\n // Сохраняем полный адрес для сообщения под картой.\n address = [obj.getCountry(), obj.getAddressLine()].join(', '),\n // Сохраняем укороченный адрес для подписи метки.\n shortAddress = [obj.getThoroughfare(), obj.getPremiseNumber(), obj.getPremise()].join(' ');\n // Убираем контролы с карты.\n mapState.controls = [];\n // Создаём карту.\n createMap(mapState, shortAddress);\n // Выводим сообщение под картой.\n showMessage(address);\n }\n\n function showError(message) {\n $('#notice').text(message);\n $('#suggest').addClass('input_error');\n $('#notice').css('display', 'block');\n // Удаляем карту.\n if (map) {\n map.destroy();\n map = null;\n }\n }\n\n function createMap(state, caption) {\n // Если карта еще не была создана, то создадим ее и добавим метку с адресом.\n if (!map) {\n map = new ymaps.Map('map', state);\n placemark = new ymaps.Placemark(\n map.getCenter(), {\n iconCaption: caption,\n balloonContent: caption\n }, {\n preset: 'islands#redDotIconWithCaption'\n });\n map.geoObjects.add(placemark);\n // Если карта есть, то выставляем новый центр карты и меняем данные и позицию метки в соответствии с найденным адресом.\n } else {\n map.setCenter(state.center, state.zoom);\n placemark.geometry.setCoordinates(state.center);\n placemark.properties.set({iconCaption: caption, balloonContent: caption});\n }\n }\n\n function showMessage(message) {\n $('#messageHeader').text('Данные получены:');\n $('#message').text(message);\n }\n}\n"},"resources":[],"directory":"https://sandbox.api.maps.yandex.net/examples/ru/2.1/input_validation/"}
Пишете на JavaScript? У нас есть вакансии
Sun Sep 18 2022 20:10:14 GMT+0300 (Moscow Standard Time)