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 you have read our privacy policy.

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