Геокодирование

Open in CodeSandbox

API позволяет определять координаты объекта по его названию и название объекта по его координатам (прямое и обратное геокодирование).

Оба вида геокодирования производятся с помощью функции geocode. Результат, возвращаемый этой функцией, может быть сразу размещён на карте.

В данном примере используются оба вида геокодирования:

  • прямое — определение координат центра Нижнего Новгорода;
  • обратное — определение названий станций метро и названия места, по которому щёлкнули левой кнопкой мыши.

<!DOCTYPE html>

<html>
    <head>
        <title>Примеры. Прямое и обратное геокодирование</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.0/?load=package.standard&amp;lang=ru-RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <style type="text/css">
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>

        <script src="geocode.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="map" />
    </body>
</html>

ymaps.ready(init);

function init() {
    // Поиск координат центра Нижнего Новгорода.
    ymaps.geocode("Нижний Новгород", { results: 1 }).then(
        function (res) {
            // Выбираем первый результат геокодирования.
            var firstGeoObject = res.geoObjects.get(0),
                // Создаем карту с нужным центром.
                myMap = new ymaps.Map("map", {
                    center: firstGeoObject.geometry.getCoordinates(),
                    zoom: 11,
                });

            myMap.container.fitToViewport();
            attachReverseGeocode(myMap);

            // Поиск станций метро.
            // Делаем запрос на обратное геокодирование.
            ymaps
                .geocode(myMap.getCenter(), {
                    // Ищем только станции метро.
                    kind: "metro",
                    // Ищем в пределах области видимости карты.
                    boundedBy: myMap.getBounds(),
                    // Запрашиваем не более 20 результатов.
                    results: 20,
                })
                .then(function (res) {
                    // Задаем изображение для иконок меток.
                    res.geoObjects.options.set(
                        "preset",
                        "twirl#metroMoscowIcon"
                    );
                    // Добавляем полученную коллекцию на карту.
                    myMap.geoObjects.add(res.geoObjects);
                });
        },
        function (err) {
            // Если геокодирование не удалось, сообщаем об ошибке.
            alert(err.message);
        }
    );

    // При щелчке левой кнопкой мыши выводится
    // информация о месте, на котором щёлкнули.
    function attachReverseGeocode(myMap) {
        myMap.events.add("click", function (e) {
            var coords = e.get("coordPosition");

            // Отправим запрос на геокодирование.
            ymaps.geocode(coords).then(function (res) {
                var names = [];
                // Переберём все найденные результаты и
                // запишем имена найденный объектов в массив names.
                res.geoObjects.each(function (obj) {
                    names.push(obj.properties.get("name"));
                });
                // Добавим на карту метку в точку, по координатам
                // которой запрашивали обратное геокодирование.
                myMap.geoObjects.add(
                    new ymaps.Placemark(
                        coords,
                        {
                            // В качестве контента иконки выведем
                            // первый найденный объект.
                            iconContent: names[0],
                            // А в качестве контента балуна - подробности:
                            // имена всех остальных найденных объектов.
                            balloonContent: names.reverse().join(", "),
                        },
                        {
                            preset: "twirl#redStretchyIcon",
                            balloonMaxWidth: "250",
                        }
                    )
                );
            });
        });
    }
}