Функция перетаскивания метки по карте и получение адреса и координат будет весьма удобна на сайтах недвижимости, например Циан использует данный метод при добавлении объявления.
Сделать такой функционал можно на следующих методах 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>
Не подскажете, как это сделать?