Перемещение метки яндекс карты при движении курсора

243
11 апреля 2022, 08:00

На Авито (добавление объявления) при выборе адреса на карте метка движется вместе с курсором (по центру). Я пытаюсь повторить тоже самое , но не совсем получается , моя метка ходит только после завершения движения, а хочется одновременного движения.

Подскажите, как это реализовать ?

<!DOCTYPE html> 
<html lang="ru"> 
<head> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<meta http-equiv="content-language" content="ru"> 
	<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
	<title>Пример - Яндекс Карты: перетаскивание метки по карте</title> 
	<link rel="canonical" href="https://snipp.ru/view/203"> 
 
	<style type="text/css"> 
	html{height: 100%;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} 
	body{ 
		margin: 0; 
		padding: 0;	 
		height: 100%;	 
		overflow:hidden;	 
	} 
	.sample-content{ 
		height: 100%;	 
		padding: 15px 20px;	 
		text-align: left; 
		font-size:14px;		 
		overflow:hidden;	} 
	</style> 
	<link rel="stylesheet" href="https://snipp.ru/themes/site/css/controls.css?ver=239"> 
</head> 
<body class="sample-body"> 
<div class="sample-content" id="sample-content"> 
 
 
<!-- Код примера --> 
<div id="map" style="width: 100%; height: 400px; margin: 0 0 20px 0;"></div>  
 
<div class="snp-form-row"> 
	<label class="form-label">Адрес:</label> 
	<input type="text" id="address" class="snp-form-input"> 
</div> 
 
<div class="snp-form-row"> 
	<label class="form-label">Координаты:</label> 
	<input type="text" id="ypoint" class="snp-form-input"> 
</div> 
 
<script src="https://yandex.st/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://api-maps.yandex.ru/2.1/?apikey=7a44ac63-07a5-4dc3-b456-2c89f4bbfaeb&lang=ru_RU"></script> 
<script> 
ymaps.ready(init);         
function init() { 
	var myMap = new ymaps.Map("map", { 
		center: [55.76, 37.64], 
		zoom: 10 
	}, { 
		searchControlProvider: 'yandex#search' 
	}); 
 
	/* Начальный адрес метки */ 
	var address = 'Россия, Москва, Тверская, д. 7'; 
 
	ymaps.geocode(address).then(function(res) { 
		var coord = res.geoObjects.get(0).geometry.getCoordinates(); 
 
		var myPlacemark = new ymaps.Placemark(coord, null, { 
			preset: 'islands#blueDotIcon', 
			draggable: true 
		}); 
 
		/* Событие dragend - получение нового адреса */ 
 
		 
		myMap.events.add('click', function(e){ 
			myPlacemark.geometry.setCoordinates(e.get('coords')); // устанавливаем метке координаты, высчитанные из положения клика 
			myMap.geoObjects.add(myPlacemark); // ставим метку на карту	 
			$('#ypoint').val(e.get('coords')); 
			ymaps.geocode(e.get('coords')).then(function(res) { 
				var data = res.geoObjects.get(0).properties.getAll(); 
				$('#address').val(data.text); 
			}); 
		});	 
 
		 
		myPlacemark.events.add('dragend', function(e){ 
		 
			var cord = e.get('target').geometry.getCoordinates(); 
			$('#ypoint').val(cord); 
			ymaps.geocode(cord).then(function(res) { 
				var data = res.geoObjects.get(0).properties.getAll(); 
				$('#address').val(data.text); 
			}); 
		}); 
		 
		 
		myMap.events.add('boundschange', function (e) { 
			myPlacemark.geometry.setCoordinates(e.get('newCenter')); // устанавливаем метке координаты, высчитанные из положения клика 
			myMap.geoObjects.add(myPlacemark); // ставим метку на карту				 
		});			 
			 
		 
		myMap.geoObjects.add(myPlacemark);	 
		myMap.setCenter(coord, 15); 
		 
		 
		 
		 
 
		 
		 
		 
	}); 
} 
</script> 
<!-- /Код примера --> 
 
</div> 
</body> 
</html>

Answer 1

Получилось вот так: https://jsfiddle.net/naivv/km5p4a7e/

Над центром карты размещена метка-прицел. Обработчик события окончания перемещения карты или изменения масштаба получает координаты центра карты и выполняет их обратное геокодирование.

Обратите внимание:

  • запрос выполняется асинхронно (дождитесь ответа, прежде чем снова перемещать карту);
  • это тарифицируемый запрос.

События карты: https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/Map-docpage/#Map__events-summary

Программное геокодирование: https://tech.yandex.ru/maps/jsapi/doc/2.1/dg/concepts/geocoding/geocode-docpage/

Примеры в песочнице:

  • обратное геокодирование: https://tech.yandex.ru/maps/jsbox/2.1/reverse_geocode
  • свойства события: https://tech.yandex.ru/maps/jsbox/2.1/event_properties

ymaps.ready(init); 
var myMap; 
 
function init() { 
  myMap = new ymaps.Map("map", { 
    center: [55.76, 37.64], 
    zoom: 11 
  }, { 
    balloonMaxWidth: 200, 
    searchControlProvider: 'yandex#search' 
  }); 
 
 
  myMap.events.add('actionend', function(e) { 
    //alert(myMap.getCenter()); 
    ymaps.geocode(myMap.getCenter(), { 
      /** 
       * Опции запроса 
       * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/geocode.xml 
       */ 
      // Ищем только дома. 
      kind: 'house', 
      // Запрашиваем не более 1 результата. 
      results: 1 
    }).then(function(res) { 
      var firstGeoObject = res.geoObjects.get(0), 
        address = firstGeoObject.getAddressLine(); 
      alert(address); 
    }); 
  }); 
}
body, 
html { 
  width: 100%; 
  height: 95%; 
  padding: 0; 
  margin: 0; 
  font-family: Arial; 
} 
 
#map { 
  width: 400px; 
  height: 300px; 
} 
 
#marker { 
  background-image: url('https://sandbox.api.maps.yandex.net/examples/ru/2.1/dragger/images/pin_food.png'); 
  width: 33px; 
  height: 36px; 
  position: absolute; 
  top: 168px; 
  /* высота #map плюс половина высоты метки */ 
  left: 183px; 
  /* ширина #map минус половина ширины метки */ 
} 
 
.header { 
  padding: 5px; 
}
<!DOCTYPE html> 
<html> 
 
<head> 
  <title>Обратное геокодирование</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <!-- 
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах. 
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/ 
    --> 
  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=60445215-6d3a-4f88-87fe-8d52b72e5bc9" type="text/javascript"></script> 
</head> 
 
<body> 
  <p class="header">Перемещайте карту</p> 
  <div id="map"> 
  </div> 
  <div id="marker"></div> 
</body> 
 
</html>

READ ALSO
Вопрос из задачника
javascript

Вопрос из задачника

Число называется счастливым если при складывании, суммы обеих сторон числа ровны друг другуНа пример։A=1230 считается счастливым потому что...

 295
Хочу понять как работает эта функция (Java Script)
javascript

Хочу понять как работает эта функция (Java Script)

Найти наибольший общий делитель двух натуральных чисел:

 211
Почему не работают мягкие переходы страниц (barba)?
javascript

Почему не работают мягкие переходы страниц (barba)?

Я подключил barba js(второй версии) и gsap через cdn:

 144
javascript и mongodb: Cannot read property &#39;insertOne&#39; of undefined
javascript

javascript и mongodb: Cannot read property 'insertOne' of undefined

Есть проблема, в файле dbjs есть такой код:

 122