Почему не всегда находит адрес по яндекс карте?

Question

[Юлия Лис]

Всем привет, такой вопрос
ссылка на кодепен ( не дает почему то виджетом вставить)
Есть расчет доставки после ввода адреса.
Ввожу так адрес

вижу в списке свой адрес, выбираю и получаю что адрес не корректен

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

А если выбирать адрес с поля ввода который на карте, то все ок работает. Возможно этот пробел проблему создает?

Comments

[freeExec]

Пробел не должен играть роли, хоть десять их вставь. Смотри какой уходит запрос на сервер.

[Юлия Лис]

freeExec, получается что когда ввожу в строку
187 27 и выбираю адрес предложенный мне яндексом
то в логах показывает undefined
Потом удаляю в конце пробел и нажимаю Enter и в obj хранится
json со всей информацией от геокодера...
Поэтому я даже не пойму что ему надо, единственное мое предположение что это из за этого пробела.

[Александр Шипин]

Юлия Лис, можете просто тогда удалить пробел с конца, получив информацию из поля ввода в действии Submit
с помощью этого.

[Юлия Лис]

alexshipin, правильно ли я поняла что надо вот эту функцию поправить?

document.getElementById('suggest').addEventListener('change', function(e) {
        let adress = e.target.value
        geocode(adress)
          console.log(val)
    })

[Александр Шипин]

Юлия Лис, да, ваш adress, который address будет:

document.getElementById('suggest').addEventListener('change', function(e) {
        let address = e.target.value.trim() // убирает пробелы в начале и конце
        geocode(address)
          console.log(value)
    })

UPD: поправил console.log

UPD2: проверил на вашем codepen, работает

[Юлия Лис]

alexshipin, странно, сделала также, но пробел есть и значение
val - undefined

[Александр Шипин]

Юлия Лис, я исправил свой комментарий, там вместо val требовалось value :) только что зашел на ваш codepen, до проспекта Богенбай батыра 36 из поисковой строки проложил маршрут

И, чтобы увидеть результат с уже удаленными пробелами:

document.getElementById('suggest').addEventListener('change', function(e) {
        let address = e.target.value.trim() // убирает пробелы в начале и конце
        geocode(address)
          console.log(address)
    })

[Юлия Лис]

alexshipin, Странно, вот посмотрите видео, вот как у меня ошибка воспроизводится.
Причем даже не отследить что не так отправляет геокодеру. значение undefined

https://disk.yandex.ru/i/HB5cW0aErbjLUA

[Юлия Лис]

alexshipin, может не в этом дело, но почему то если адрес вставить прям целиком без пробела в конце, то считает, а если выбираем из выпадающего списка то нет(

[Александр Шипин]

Юлия Лис, только что заглянул к вам в codepen. вот видео

https://drive.google.com/file/d/1r1odKSYnLx-_HTFk_...

[Юлия Лис]

alexshipin, аа, вижу что в консоль забыла переменную нужную вывести, но проблема такая и есть
Смотрите как я делаю.
Открываю свой кодепен, дальше пишу в строку адреса
187 20
дальше мышкой выбираю адрес и вот так.
Попробуйте напишите как я в видео.
Чувствую себя дурой.. уже чистый браузер открыла другой , вдруг что то с кэшем.

https://disk.yandex.ru/i/0KjJBaFdROdUDQ

[Александр Шипин]

Юлия Лис, дело не в браузере, а в API, которое у вас почему-то выдаёт неправильные адреса.
У меня совсем нет "улица 108", зато "улица Е-108", "улица А-108" и "улица 12-108", что и весьма странно.
Я даже через обычные карты проверил, результат тот же. В пределах Нур-Султан нет улицы 108, но есть Е-108, А-108 и 12-108. Так что, проблема не с вашей стороны, но со стороны API

[Юлия Лис]

Александр Шипин, да вот к примеру есть улица
Казахстан, Нур-Султан (Астана), улица 187, 20
Ее выбираю же из предложенных яндексом.
Получаю ошибку потом стираю в конце пробел и расчет уже идет

[Александр Шипин]

Юлия Лис, а это уже связанно с тем, как работает API.
Я вношу в строку "улица 108, 20", меня отправляет в Египет :)

1. Если я копирую ваш запрос "Казахстан, Нур-Султан (Астана), улица 187, 20" и вставляю в поле ввода, то у меня нет лишних пробелов нигде, ошибок не возникает.
2. Если ввести неполный адрес, к примеру "Казахстан, Нур-Султан (Астана), проспект Богенбай батыра", и выбрать из списка предложенных полностью схожий вариант, то он предлагает ввести уточнение (оно и понятно, так как адрес не точный)
3. Если ввести конкретный, к примеру "Алматы, 13", то сразу находит требуемый адрес без ошибок

4. Я заметил одну такую проблему, которая возникает в вашем codepen: если я получаю ошибку (alert), то после этого весь алгоритм перестаёт работать, и какой бы адрес я не ввёл, ничего не поменяется.

UPD (решение проблемы на codepen).
Непустое поле ввода всем виной. Решается:
1. как только ввели неправильный адрес - сохранить его значение в переменную
2. выдать вместо стоимости неправильный адрес
3. выдать вместо дистанции текст ошибки
4. очистить поле ввода присвоив пустую строку document.getElementById('suggest').value = "";

после этого скрипт отрабатывал у меня во всех случаях:
Ввожу неправильный адрес:
Ошибка. Выдал адрес и текст вместо стоимости и дистанции. Ввожу правильный адрес - всё отлично рассчитал (смотрите следующий пункт)
Нет ошибок. Показал стоимость и дистанцию, поставил метку, проложил маршрут.

Ввожу другой адрес:
Правильный - всё отлично
Неправильный - см ошибка

PS: не знаю, зачем придумали Alert, если из-за него всё может перестать работать :)
PPS: 187 20 - может вызвать ошибку, так как для API это может быть воспринято не только как адрес, но и как координаты. Поэтому в подобных случаях необходимо выбирать в ручную из предложенных
То есть, необходимо отдельно отработать каждый вид ошибок.

PPPS: Если необходимо удалить лишний пробел из поисковой строки (для обычного пользователя), то
let address = e.target.value.trim();
document.getElementById('suggest').value = address;
а уже потом исполнять geocode(address);

[Юлия Лис]

Александр Шипин, я поняла в чем дело) но не знаю как это поправить)
В общем такая ситуация, допустим цифры откинем и взять обычный адрес)
Пишу в поисковой строке "кабанбай"
Дальше в выпадающем списке выбираю
Казахстан, Нур-Султан (Астана), проспект Кабанбай Батыра, 62
А дальше выходит следующее в логах.

Получается в переменной
console.log(obj);
Лежит не адрес а кабанбай просто , поэтому геокодер выдает undefined
Так как там должен лежать Казахстан, Нур-Султан (Астана), проспект Кабанбай Батыра, 62 а лежит "кабанбай"
Такое ощущение что скрипт срабатывает не на то что выбрал, а на то что ввели вручную. Может как то при клике на выпадающий список сначала записать в input а потом отдавать геокодеру?

[Юлия Лис]

Александр Шипин, в общем если вставляю полноценный адрес и выбираю из списка то как раз берет адрес
Казахстан, Нур-Султан (Астана), проспект Кабанбай Батыра, 19/1
А если пишу кабанбай и тот же адрес выбираю, то в логе только
кабанбай и поэтому не может расчитать.

[Александр Шипин]

Юлия Лис, да можно сделать так.

Может как то при клике на выпадающий список сначала записать в input а потом отдавать геокодеру?

Немного переписал код, убрал alert, добавил обработку ошибки

ymaps.ready(init);
			function init() {
				var startPlacemark, endPlacemark, multiRoute
				let coord_start = ['71.406975', '51.089227'];
				var DELIVERY_TARIFF = 100,
					MINIMUM_COST = 200,
					myMap = new ymaps.Map('map', {
						center: coord_start,
						zoom: 9,
						controls: []
					}),
					zoomControl = new ymaps.control.ZoomControl({
						options: {
							size: 'small',
							float: 'none',
							position: {
								bottom: 145,
								right: 10
							}
						}
					});

				var suggestView = new ymaps.SuggestView('suggest', {
					provider: {
						suggest: (function(request, options) {
							return ymaps.suggest("Нур-Султан," + request);

						})
					}
				});

				var searchControl = new ymaps.control.SearchControl({
					options: {
						provider: 'yandex#map',
						noPlacemark: true
					}
				});
				myMap.controls.add(searchControl);

				startPlacemark = new ymaps.Placemark(coord_start, {
					balloonContent: 'Кабанбай Батыра, 62',
				}, {
					hideIconOnBalloonOpen: false
				});

				searchControl.events.add('resultselect', function(e) {
					var results = searchControl.getResultsArray();
					var selected = searchControl.getSelectedIndex();
					coord_end = results[selected].geometry.getCoordinates();

					addRoute(coord_start, coord_end)
				})

				function createPlacemark(coords) {
					return new ymaps.Placemark(coords, {
						iconCaption: 'поиск...'
					}, {
						preset: 'islands#violetDotIconWithCaption',
						draggable: false
					});
				}

				myMap.events.add('click', function(e) {
					let coord_end = e.get('coords');
					addRoute(coord_start, coord_end)

				});

				function addEndPlacemark(coord_end) {
					if (endPlacemark) endPlacemark.geometry.setCoordinates(end_coords);
					else {
						endPlacemark = createPlacemark(end_coords);
						myMap.geoObjects.add(endPlacemark);
					}
					coord_end = endPlacemark.geometry.getCoordinates()
					getAddress(coord_end);
					myMap.geoObjects.add(endPlacemark);
				}

				function getAddress(coords) {
					endPlacemark.properties.set('iconCaption', 'поиск...');
					ymaps.geocode(coords).then(function(res) {
						var firstGeoObject = res.geoObjects.get(0);

						endPlacemark.properties
							.set({
								iconCaption: [
									firstGeoObject.getLocalities().length ? firstGeoObject.getLocalities() : firstGeoObject.getAdministrativeAreas(),
									firstGeoObject.getThoroughfare() || firstGeoObject.getPremise()
								].filter(Boolean).join(', '),
								balloonContent: firstGeoObject.getAddressLine()
							});
					});
				}

				function addRoute(coord_start, coord_end) {

					if (multiRoute) multiRoute.model.setReferencePoints([coord_start, coord_end]);
					else {
						multiRoute = new ymaps.multiRouter.MultiRoute(
							{
								referencePoints: [
									coord_start,
									coord_end
								],
								params: {
									results: 1
								}
							},
							{
								boundsAutoApply: true
							}
						);
						myMap.geoObjects.add(multiRoute);
					}

					multiRoute.model.events.add('requestsuccess', function() {
						let distance = multiRoute.getActiveRoute().properties.get("distance")
						let distance_km = Math.round(distance.value / 1000)
						let price = calculate(distance_km)
					});

				}

				myMap.controls.add(zoomControl);
				myMap.controls.add(searchControl);
				myMap.geoObjects.add(startPlacemark);

				function calculate(routeLength) {
					return Math.max(routeLength * DELIVERY_TARIFF, MINIMUM_COST);
				}

				let searchAddress = document.getElementById('suggest');
			
				searchAddress.onchange = (e) => {
					e.preventDefault();
					let address = e.target.value.trim();
					document.getElementById('suggest').value = address;
					geocode(address);
					console.log(address);
				}

				function geocode(address) {
					var request = address
					ymaps.geocode(request).then(
						function(res) {
							var obj = res.geoObjects.get(0), error, hint;
							if (obj) {
								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)
							else if (error === 'Неполный адрес') searchAddress.focus()
							else {
								coord_end = obj.geometry.getCoordinates()
								addRoute(coord_start, coord_end)
							}
						},
						function(e) {
							console.log(e)
						}
					)
				}

				function showError(message) {
					searchAddress.focus();
					console.log(message);
				}
			}

[Юлия Лис]

Александр Шипин, я создала новый кодепен) чтоб протестировать)
https://codepen.io/seo_master/pen/VwrdOOz
по факту не ищет потому что при выборе из выпадающего списка он адрес толи не успевает брать, толи что...

Как сделать чтоб он именно адрес добавлял в поле а потом только его брал для расчета?
вот прям пишу кабанбай, потом выбираю Казахстан, Нур-Султан (Астана), проспект Кабанбай Батыра, 42
а ищет все равно по "кабанбай"....
а если вставить "Казахстан, Нур-Султан (Астана), проспект Кабанбай Батыра, 42 " и выбрать этот адрес то он соответственно возмет с инпута весь адрес и нормально посчитает..
Я уже тут делов написала, что только не пробовала....думала уже и в value как то успевать записывать. Почему то то что ввела берет и все..зараза(

[Александр Шипин]

Юлия Лис, есть вот такое решение:

function init() {
    ....
    // добавляем в любом удобном месте внутри 
    suggestView.state.events.add('change', function () {
        var activeIndex = suggestView.state.get('activeIndex');
        if (typeof activeIndex == 'number') {
            activeItem = suggestView.state.get('items')[activeIndex];
        }
        if (activeItem && activeItem.value != searchAddress.value) {
            searchAddress.value = activeItem.value;
        }
    });
    ...
});

Только у него есть несколько проблем:
1. Как только человек наведёт на любой элемент из выпадающего списка, содержимое input моментально меняется.
2. Чтобы список закрылся, нужно будет ещё раз кликнуть по результату после прокладывания маршрута.

Информация о работе функции:
События suggestView (выпадающего списка)
Как получить требуемое событие