Поиск

Яндекс Карты: перетаскивание метки по карте

Функция перетаскивания метки по карте и получение адреса и координат будет весьма удобна на сайтах недвижимости, например Циан использует данный метод при добавлении объявления.

Сделать такой функционал можно на следующих методах API Яндекс Карт:

  • Свойство draggable:true у метки, которое включает перетаскивание.
  • Событие dragend (срабатывает при завершение перетаскивания объекта).
  • Геокодирование.

Подробнее о методах и свойствах метки в документации JS API.

Реализация

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

Адрес:
<input type="text" id="address">

Координаты:
<input type="text" id="ypoint" class="form-input">

<script src="https://yandex.st/jquery/2.1.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?apikey=xxxxxx&lang=ru_RU"></script>

<script type="text/javascript">
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 - получение нового адреса */
		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.geoObjects.add(myPlacemark);	
		myMap.setCenter(coord, 15);
	});
}
</script>
HTML

В действии:

28.09.2018, обновлено 17.10.2019 1690

Другие публикации

Рассмотрим пример как найти в базе данных соседние объекты по координатам и вывести их на карте Яндекс.
17.09.2019 327
Пример, как вывести Яндекс карту на всю ширину сайта + плавающий блок с контактной информацией.
12.01.2019 1166
В статье рассмотрены примеры как вывести метку на карту из БД и вывод других объектов, которые находятся рядом.
07.02.2018 3800
Несколько рекомендаций как увеличить скорость загрузки API Яндекс.Карт 2.0.
26.01.2019 3866
Ниже приведён список MIME-заголовков и расширений файлов.
11.07.2019 417
Несколько примеров как в PHP получить информацию о домене и IP-адресе.
10.04.2019 849