Пример показывает, как использовать поисковые подсказки и геокодер для создания поля ввода адреса на сайте.
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/"}
Пример показывает, как использовать поисковые подсказки и геокодер для создания поля ввода адреса на сайте.
API позволяет проверить, что введённый адрес существует, записан с нужной полнотой и без опечаток.
При вводе адреса в поисковую строку сначала производится проверка на точность и существование такого адреса. Для этого геокодеру отправляется запрос с введенным адресом. Если адрес найден, то создается карта с меткой по заданному адресу. Если такого адреса не существует или он задан неточно, то будет отображено сообщение об ошибке. В этом случае пользователю нужно будет указать более подробный адрес.