JS/jQuery

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

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

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

Пример

28 сентября 2018