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