0

Пробую выполнить первый проект на js и в ходе выполнения столкнулся с некоторыми проблемами.

Собрал из примеров нужный функционал. Одна из фич должна работать так: человек вбивает в поиск что-то неточное, например, улицу и дом без города, тогда ему выдается несколько вариантов отмеченных на карте. При клике на такую метку надо заменять ее другой или показывать особый балон с кнопкой. Или наоборот, когда результат один, то такую метку надо сразу заменять красной, которая передает адрес дальше.

Проблема в том что я не понимаю где размещаются результаты поиска и как с ними работать. Надо как-то их преобразовать в коллекцию геообъектов?

ymaps.ready(init);

function init(){

var myPlacemark, metkaCoord, 
suggestView = new ymaps.SuggestView('searchLine', {boundedBy: [[58.29, 57.47], [56.24, 64.54]]}),
myMap = new ymaps.Map('map', {
	center: [56.83, 60.60],
	zoom: 9
});


myMap.controls.remove('searchControl');
myMap.controls.remove('trafficControl');
myMap.controls.remove('typeSelector');
myMap.controls.remove('rulerControl');


myMap.events.add('click', function (e) {
	var coords = e.get('coords');

	// Если метка уже создана – просто передвигаем ее.
	if (myPlacemark) {
		myPlacemark.geometry.setCoordinates(coords);
	}
	// Если нет – создаем.
	else {
		myPlacemark = createPlacemark(coords);
		myMap.geoObjects.add(myPlacemark);
		// Слушаем событие окончания перетаскивания на метке.
		myPlacemark.events.add('dragend', function () {
			getAddress(myPlacemark.geometry.getCoordinates());
		});
	}
	getAddress(coords);
});

// Создание метки.
function createPlacemark(coords) {
	myMap.geoObjects.removeAll();
	return new ymaps.Placemark(coords, {
		iconCaption: 'поиск...'
	}, {
		preset: 'islands#redDotIconWithCaption',
		draggable: true
	});
}

// Определяем адрес по координатам (обратное геокодирование).
function getAddress(coords) {
	myPlacemark.properties.set('iconCaption', 'поиск...');
	ymaps.geocode(coords).then(function (res) {
		var firstGeoObject = res.geoObjects.get(0);

		myPlacemark.properties
			.set({
				// Формируем строку с данными об объекте.
				iconCaption: [
					// Название населенного пункта или вышестоящее административно-территориальное образование.
					firstGeoObject.getLocalities().length ? firstGeoObject.getLocalities() : firstGeoObject.getAdministrativeAreas(),
					// Получаем путь до топонима, если метод вернул null, запрашиваем наименование здания.
					firstGeoObject.getThoroughfare() || firstGeoObject.getPremise()
				].filter(Boolean).join(', '),
				// В качестве контента балуна задаем строку с адресом объекта.
				balloonContent: firstGeoObject.getAddressLine()
			});

			$('#addressFull').text(firstGeoObject.getAddressLine());
			
			
			$('#addressCoordinates').text('');
			$('#addressCoordinates').text(firstGeoObject.geometry.getCoordinates());
			metkaCoord = firstGeoObject.geometry.getCoordinates()
			$('#addressRegion').text('');
			$('#addressRegion').text(firstGeoObject.getAdministrativeAreas()[0]);
			$('#addressCity').text('');
			$('#addressCity').text(firstGeoObject.getLocalities()[0]);
			$('#addressDistrict').text('');
			$('#addressDistrict').text(firstGeoObject.getLocalities()[1]);
			$('#addressMcrDistrict').text('');
			$('#addressMcrDistrict').text(firstGeoObject.getLocalities()[2]);
			$('#addressStreet').text('');
			$('#addressStreet').text(firstGeoObject.getThoroughfare());
			
			if (firstGeoObject.getPremiseNumber()) {
				$('#addressHouse').removeClass('text-danger');
				$('#addressHouse').text('');
				$('#addressHouse').text(firstGeoObject.getPremiseNumber());
			} else {
				$('#addressHouse').addClass('text-danger');
				$('#addressHouse').text('номера дома нет');
			}

	});
}


/* Начало поисковой строки*/

$('#searchSubmit').bind('click', function (e) {
	myMap.geoObjects.removeAll();
	metkaCoord = null;
	geocode();
});

function geocode() {
	var request = $('#searchLine').val();
	var myGeocoder = ymaps.geocode(request, {boundedBy: [[58.29, 57.47], [56.24, 64.54]], strictBounds: true});
	myGeocoder.then(
		function (res) {
			myMap.geoObjects.add(res.geoObjects);
			myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange:true}).then(function(){ if(myMap.getZoom() > 16) myMap.setZoom(16);});
		},
		function (err) {
			// обработка ошибки
			alert('Ошибка');
		}
	);
}


/* Заменяем найденный объект на нашу метку */




/* Считаем километры */

$('#buildRoute').bind('click', function (e) {
	console.log(metkaCoord);
	ymaps.route([
		'Екатеринбург, проспект Ленина, 39',
		metkaCoord
	]).then(
		function (route) {
			myMap.geoObjects.add(route);
			var routeLength = Math.floor(route.getLength() / 1000);
			$('#routeKm').text(routeLength + ' км');
		},
		function (error) {
			alert("Возникла ошибка: " + error.message);
		}
	);
});






}
body {font-family:'PT Sans', sans-serif;}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


<div class="container my-3">

<h1>Добавление нового объявления</h1>

<p><div class="form-inline"><input type="text" id="searchLine" class="form-control w-50 mr-1" data-provide="typeahead"> <button type="submit" id="searchSubmit" class="btn btn-primary">Показать на карте</button></div></p>

<p><div id="map" style="width: 100%; height: 400px"></div></p>

<p id="addressFull">Полный адрес</p>

<table>
<tr>
	<td>Координаты:</td>
    <td id="addressCoordinates"></td>
</tr>
<tr>
	<td>Область:</td>
    <td id="addressRegion"></td>
</tr>
<tr>
	<td>Город:</td>
    <td id="addressCity"></td>
</tr>
<tr>
	<td>Район:</td>
    <td id="addressDistrict"></td>
</tr>
<tr>
	<td>Микрорайон:</td>
    <td id="addressMcrDistrict"></td>
</tr>
<tr>
	<td>Улица:</td>
    <td id="addressStreet"></td>
</tr>
<tr>
	<td>Дом:</td>
    <td id="addressHouse"></td>
</tr>
</table>
<p class="mt-5"><button id="buildRoute" class="btn btn-secondary">Посчитать километры от центра</button></p>
<p>Сколько километров от центра: <span id="routeKm">не известно</span></p>


</div>

1 ответ 1

1

https://jsfiddle.net/cLynjk3c/2/

function geocode() {
    var request = $('#searchLine').val();
    var myGeocoder = ymaps.geocode(request, {boundedBy: [[58.29, 57.47], [56.24, 64.54]], strictBounds: true});
    myGeocoder.then(function (res) {
    // !!! В res результаты поиска
    // res.geoObjects - гео-объекты, найденных мест
    if (res.geoObjects.getLength() === 1) {
        createMyPlacemark(res.geoObjects.get(0).geometry.getCoordinates());
    } else {
        myMap.geoObjects.add(res.geoObjects);
        myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange:true}).then(function(){ if(myMap.getZoom() > 16) myMap.setZoom(16);});
    }}, function (err) {
        // обработка ошибки
        alert('Ошибка');
    });
}

https://tech.yandex.ru/maps/jsbox/2.1/balloon_autopan - здесь пример на создание пользовательского макета для балуна https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject-docpage/ - описание гео-объекта

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.