Поиск ближайшего объекта

Open in CodeSandbox

С помощью объекта GeoQueryResult можно создавать объекты на карте из их JSON-описания.

В данном примере рассматривается, как найти объекты выборки, ближайшие к произвольному объекту на карте (например к метро). А также как находить объекты, ближайшие к месту клика.

<!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.31/?load=package.standard,package.geoObjects,package.geoQuery,package.search&amp;lang=ru-RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>

        <script
            src="find_closest_object.js"
            type="text/javascript"
        ></script>
    </head>
    <style>
        body {
            font-family: "Arial";
            font-size: 11pt;
        }
    </style>
    <body>
        <p>
            При клике на карту будет открываться балун ближайшей к месту
            клика метки
        </p>
        <div id="map" style="width:400px; height:300px"></div>
    </body>
</html>
ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.73, 37.75],
            zoom: 12,
        }),
        cafe,
        metro;

    function findClosestObjects() {
        // Найдем в выборке кафе, ближайшее к найденной станции метро,
        // и откроем его балун.
        cafe.getClosestTo(metro.get(0)).balloon.open();

        // Будем открывать балун кафе, который ближе всего к месту клика
        myMap.events.add("click", function (event) {
            cafe.getClosestTo(event.get("coordPosition")).balloon.open();
        });
    }

    // Описания кафе можно хранить в формате JSON, а потом генерировать
    // из описания геообъекты с помощью ymaps.geoQuery.
    cafe = ymaps
        .geoQuery({
            type: "FeatureCollection",
            features: [
                {
                    type: "Feature",
                    properties: {
                        balloonContent:
                            'Кофейня "Дарт Вейдер" - у нас есть печеньки!',
                    },
                    geometry: {
                        type: "Point",
                        coordinates: [55.724166, 37.545849],
                    },
                },
                {
                    type: "Feature",
                    properties: {
                        balloonContent:
                            'Кафе "Горлум" - пирожные прелесть.',
                    },
                    geometry: {
                        type: "Point",
                        coordinates: [55.717495, 37.567886],
                    },
                },
                {
                    type: "Feature",
                    properties: {
                        balloonContent:
                            'Кафе "Кирпич" - крепкий кофе для крепких парней.',
                    },
                    geometry: {
                        type: "Point",
                        coordinates: [55.721018, 37.631057],
                    },
                },
            ],
            // Сразу добавим точки на карту.
        })
        .addToMap(myMap);

    // Координаты станции метро получим через геокодер.
    metro = ymaps
        .geoQuery(ymaps.geocode("Москва, Кропоткинская", { kind: "metro" }))
        // Нужно дождаться ответа от сервера и только потом обрабатывать полученные результаты.
        .then(findClosestObjects);
}