Функция заполнения адреса input путем тыка на карту

Question

Здесь есть вопрос и ответ на него "функция выбора адреса путем тыка и определения геопозиции на карте yandex map"

   $(document).ready(function(){
        ymaps.ready(init);
        function init() {
            var  myInput = document.getElementById("input-result"),
                myPlacemark,
                myMap = new ymaps.Map('map', {
                    center: [55.862267, 48.372041],
                    zoom: 13
                }, {
                    searchControlProvider: 'yandex#search'
                });

// Слушаем клик на карте.
            myMap.events.add('click', function (e) {
                var coords = e.get('coords');

                // Если метка уже создана – просто передвигаем ее.
                if (myPlacemark) {
                    myPlacemark.geometry.setCoordinates(coords);
                }
                // Если нет – создаем.
                else {
                    myPlacemark = createPlacemark(coords);
                    myMap.geoObjects.add(myPlacemark);
                    // Слушаем событие окончания перетаскивания на метке.
                    myPlacemark.events.add('dragend', function () {
                        getAddress(myPlacemark.geometry.getCoordinates());
                    });
                }
                getAddress(coords);
            });

// Создание метки.
            function createPlacemark(coords) {
                return new ymaps.Placemark(coords, {
                    iconCaption: 'поиск...'
                }, {
                    preset: 'islands#violetDotIconWithCaption',
                    draggable: true
                });
            }

// Определяем адрес по координатам (обратное геокодирование).
            function getAddress(coords) {
                myPlacemark.properties.set('iconCaption', 'поиск...');
                ymaps.geocode(coords).then(function (res) {
                    var firstGeoObject = res.geoObjects.get(0),
                        address = firstGeoObject.getAddressLine();

                    myPlacemark.properties
                        .set({
                            // Формируем строку с данными об объекте.
                            iconCaption: [
                                // Название населенного пункта или вышестоящее административно-территориальное образование.
                                firstGeoObject.getLocalities().length ? firstGeoObject.getLocalities() : firstGeoObject.getAdministrativeAreas(),
                                // Получаем путь до топонима, если метод вернул null, запрашиваем наименование здания.
                                firstGeoObject.getThoroughfare() || firstGeoObject.getPremise()
                            ].filter(Boolean).join(', '),
                            // В качестве контента балуна задаем строку с адресом объекта.
                            balloonContent: address
                        });
                    myInput.value = address;
                    localStorage.setItem('value', address); // При вызове функции (которая срабатываем при нажатии на карте) записываем данные в localstorage
                });
            }
            if(localStorage.getItem('value')){ // При выполнении функции init, если есть данные в localstorage, то...
                myInput.value = localStorage.getItem('value'); // Вставляем значение в input
            }
        }
    });

Всё работае Помогите пожалуйста вместо указанных коордат center: [55.862267, 48.372041], определить по местоположению пользователя. И разделить заполняемый адрес в input

"Россия, Рязань, район Южный Промышленный узел, 6с5"

Вывести в разные поля

1)Россия
2)Рязань
3)район Южный Промышленный узел, 6с5
Спасибо

Answer 1

Можно сделать, например, так:

ymaps.ready(init);

function init() {
    var myPlacemark,
        myMap = new ymaps.Map('map', {
            center: [55.753994, 37.622093],
            zoom: 9
        }, {
            searchControlProvider: 'yandex#search'
        });

    // Слушаем клик на карте.
    myMap.events.add('click', function (e) {
        var coords = e.get('coords');

        // Если метка уже создана – просто передвигаем ее.
        if (myPlacemark) {
            myPlacemark.geometry.setCoordinates(coords);
        }
        // Если нет – создаем.
        else {
            myPlacemark = createPlacemark(coords);
            myMap.geoObjects.add(myPlacemark);
            // Слушаем событие окончания перетаскивания на метке.
            myPlacemark.events.add('dragend', function () {
                getAddress(myPlacemark.geometry.getCoordinates());
            });
        }
        getAddress(coords);
    });

    // Создание метки.
    function createPlacemark(coords) {
        return new ymaps.Placemark(coords, {
            iconCaption: 'поиск...'
        }, {
            preset: 'islands#violetDotIconWithCaption',
            draggable: true
        });
    }

    // Определяем адрес по координатам (обратное геокодирование).
    function getAddress(coords) {
        myPlacemark.properties.set('iconCaption', 'поиск...');
        ymaps.geocode(coords).then(function (res) {
            var firstGeoObject = res.geoObjects.get(0);

            myPlacemark.properties
                .set({
                    // Формируем строку с данными об объекте.
                    iconCaption: [
                        // Название населенного пункта или вышестоящее административно-территориальное образование.
                        firstGeoObject.getLocalities().length ? firstGeoObject.getLocalities() : firstGeoObject.getAdministrativeAreas(),
                        // Получаем путь до топонима, если метод вернул null, запрашиваем наименование здания.
                        firstGeoObject.getThoroughfare() || firstGeoObject.getPremise()
                    ].filter(Boolean).join(', '),
                    // В качестве контента балуна задаем строку с адресом объекта.
                    balloonContent: firstGeoObject.getAddressLine()
                });
                document.getElementById('address').value = firstGeoObject.getAddressLine();
                document.getElementById('country').value = firstGeoObject.getCountry();
                document.getElementById('locality').value = firstGeoObject.getLocalities().length ? firstGeoObject.getLocalities() : firstGeoObject.getAdministrativeAreas();
                document.getElementById('street').value = firstGeoObject.getThoroughfare().length ? firstGeoObject.getThoroughfare() : firstGeoObject.getPremise();
                document.getElementById('building').value = firstGeoObject.getPremiseNumber();
        });
    }
}

        html, body {
            width: 100%;
            height: 95%;
            margin: 0;
            padding: 0;
            font-family: Arial;
            font-size: 14px;
        }
        #map {
            width: 100%;
            height: 95%;
        }
        .header {
            padding: 5px;
        }

<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=60445215-6d3a-4f88-87fe-8d52b72e5bc9"></script>
<p class="header">Кликните по карте, чтобы узнать адрес</p>
<input id="address" type="text" value="" placeholder="тут появится адрес"><br>
<input id="country" type="text" value="" placeholder="Страна">
<input id="locality" type="text" value="" placeholder="нас.пункт или атд">
<input id="street" type="text" value="" placeholder="улица/наименование здания">
<input id="building" type="text" value="" placeholder="здание">
<div id="map"></div>

Подробнее об ответе Геокодера можно посмотреть в документации Там указаны методы, которыми можно распарсить ответ.

БЛОГ НА HUSL

Функция заполнения адреса input путем тыка на карту

Ответы (1 шт):