0

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

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

<!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>

1 ответ 1

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/

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

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>

Ваш ответ

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

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