Загрузка данных с помощью JQuery и добавление их на карту

Open in CodeSandbox

В примере показано, как произвести загрузку данных с помощью функции JQuery.getJSON() и отобразить их на карте.

Загруженные данные представлены в формате GeoJSON. Для их добавления на карту необходимо использовать geoQuery.

Обратите внимание, что координаты объектов заданы в последовательности "долгота, широта". Поскольку по умолчанию в API принят порядок "широта, долгота", необходимо при подключении API передать параметр coordorder со значением longlat. Подробнее см. в разделе Подключение API. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
    <head>
        <title>
            Загрузка данных с помощью JQuery и добавление их на карту
        </title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />

        <script
            src="https://yandex.st/jquery/2.2.3/jquery.min.js"
            type="text/javascript"
        ></script>
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;coordorder=longlat&amp;apikey=<ваш API-ключ>"></script>
        <script src="data_load_jquery.js"></script>
        <style type="text/css">
            html,
            body,
            #YMapsID {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="YMapsID"></div>
    </body>
</html>

ymaps.ready().done(function (ym) {
    var myMap = new ym.Map(
        "YMapsID",
        {
            center: [55.751574, 37.573856],
            zoom: 10,
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    jQuery.getJSON("data.json", function (json) {
        /** Сохраним ссылку на геообъекты на случай, если понадобится какая-либо постобработка.
         * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoQueryResult.xml
         */
        var geoObjects = ym
            .geoQuery(json)
            .addToMap(myMap)
            .applyBoundsToMap(myMap, {
                checkZoomRange: true,
            });
    });
});