主页 / 问题 / 819050
Accepted
Alexei Lavrov
Asked:2020-04-25 15:36:34 +0000 UTC2020-04-25 15:36:34 +0000 UTC

处理搜索结果

  • 772

我正在尝试做我的第一个 js 项目，但在此过程中遇到了一些问题。

从示例中收集必要的功能。其中一个功能应该是这样工作的：一个人在搜索中驱动了一些不准确的东西，例如，一条街道和一个没有城市的房子，然后在地图上给他几个标记的选项。当您单击此类标签时，您需要将其替换为另一个标签或显示带有按钮的特殊气球。反之亦然，当结果为 1 时，必须立即将此类标签替换为红色标签，从而进一步传递地址。

问题是我不明白搜索结果的放置位置以及如何使用它们。我是否需要以某种方式将它们转换为地理对象的集合？

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>

yandex-maps-jsapi

1 个回答

  1. Best Answer

    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/参考/GeoObject- docpage/ - 地理对象的描述

    • 1

相关问题