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

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

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

Сделать такой функционал можно на следующих методах 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, обновлено 22.11.2022
11986

Комментарии 5

Эрадж Байгузин Эрадж Байгузин
27 мая 2020 в 03:41
Здравствуйте, спасибо за код, пригодился. Вы, случаем, не подскажите как сделать так, чтобы метка подгрузилась на моем местоположении? Многое уже перепробовал, что-то не получилось сделать
Александр Новиков Александр Новиков
20 января 2022 в 12:09
Было бы идеально к этому коду добавить еще перемещение по клику. Т.е. не только перетаскиванием, но и кликнув в любое место карты...
Не подскажете, как это сделать?
Александр Новиков Александр Новиков
21 января 2022 в 14:46
Готов за это заплатить!
Ramik QQ Ramik QQ
8 апреля 2022 в 16:35
Готов Вам помочь!
Ramik QQ Ramik QQ
8 апреля 2022 в 16:35
Готов Вам помочь!

, чтобы добавить комментарий.

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

Верстка блока контактов с картой
Пример, как вывести Яндекс карту на всю ширину сайта + плавающий блок с контактной информацией.
19961
-1
Ускорение загрузки Яндекс Карт
Несколько рекомендаций как увеличить скорость загрузки API Яндекс.Карт 2.0.
27247
+12
Как вывести метки на Яндекс.Картах из MySQL+PHP
В статье рассмотрены примеры как вывести метку на карту из БД и вывод других объектов, которые находятся рядом.
21510
+11
Яндекс.Доставка работа с API в PHP
Примеры работы с API Яндекс.Доставки (для заказа перевозки грузов корпоративным клиентам).
8570
+5
Яндекс карты не прямоугольной формы
Пример, как сделать Яндекс карту не прямоугольной формы т.е. наложить изображение (маску) по верх карты со сохранением...
7064
-2
Использование API Геокодера в PHP для получения координат
Сервис Яндекс.Карты предоставляет доступ к API Геокодера, который позволяет по адресу получить координаты объекта на...
13446
+8